Merge pull request #57 from xpquiz/feature/#54

#54 changing loading question window

Author: isahann

src/app/question-window/question-window.component.html

@@ -3,6 +3,10 @@
     <app-window-title-bar iconPath="question.png" title="Question!"></app-window-title-bar>
     <div class="window-body window_question_body">
       <ng-container *ngIf="!this.showQuestion">
+        <div class="window_question_body_image">
+          <img ngSrc="assets/icons/question-loading.png"
+               alt="" height="40" width="40"/>
+        </div>
         <div class="window_question_body_loading">
           <label class="window_question_body_loading_title">Loading your question, please hold on a moment...</label>
           <progress class="window_question_body_loading_progress" max="100" [value]="this.loadingProgressBar"></progress>

src/app/question-window/question-window.component.sass

@@ -9,6 +9,11 @@
 
     &_question
       &_body
+        display: flex
+        flex-direction: row
+        align-items: center
+        justify-content: center
+
         &_loading
           display: flex
           flex-direction: column
@@ -17,10 +22,17 @@
 
           &_title
             margin: 5px
+            text-align: center
 
           &_progress
             margin: 5px
 
+        &_image
+          width: 30%
+          display: flex
+          align-items: initial
+          justify-content: center
+
         &_loaded
           display: flex
           flex-direction: column
@@ -53,8 +65,6 @@
 
 
     &_check-answer
-      width: 300px
-
       &_body
         display: flex
         flex-direction: row
@@ -68,7 +78,6 @@
           justify-content: center
 
         &_question
-          width: 70%
           display: flex
           flex-direction: column
           align-items: center