MOBILE-2103 core: Fix timer styles

Author: crazyserver

www/addons/mod/quiz/scss/styles.scss

@@ -38,16 +38,34 @@ p.mma-mod-quiz-warning {
 
 // Remove padding-top and bottom from navigation bar to minimize height used.
 .mma-mod-quiz-subheader {
-  .row {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-  .col {
+  padding-top: 0px;
+  padding-bottom: 0px;
+
+  .row, .col {
     padding-top: 0px;
     padding-bottom: 0px;
   }
   .mm-timer {
-    line-height: $button-bar-button-height
+    min-height: 41px;
+    border: 0;
+    padding: 2px 0 1px 25px;
+
+    .icon {
+      left: 0;
+      font-size: $item-font-size * 3 /2;
+    }
+
+    label {
+      font-size: $item-font-size - 2;
+    }
+
+    span {
+      display: block;
+    }
+
+    span.mm-timesup {
+      line-height: 40px;
+    }
   }
 }
 

www/addons/mod/quiz/templates/player.html

@@ -19,7 +19,7 @@
             </div>
         </div>
     </ion-header-bar>
-    <ion-content padding="true" mm-state-class delegate-handle="mmaModQuizPlayerScroll" ng-class="{'has-subheader': dataLoaded && questions.length && !quizAborted && !showSummary}">
+    <ion-content mm-state-class delegate-handle="mmaModQuizPlayerScroll" ng-class="{'has-subheader': dataLoaded && questions.length && !quizAborted && !showSummary}">
         <mm-loading hide-until="dataLoaded">
             <div class="list padding" ng-if="!attempt">
                 <button class="button button-block" ng-click="start()">{{ 'mma.mod_quiz.startattempt' | translate }}</button>

www/addons/mod/quiz/templates/preflight-modal.html

@@ -7,7 +7,7 @@ <h1 class="title">{{ preflightModalTitle | translate}}</h1>
         <form class="list">
             <mma-quiz-access-rule ng-repeat="directive in accessRulesDirectives"></mma-quiz-access-rule>
             <div class="item">
-                <button class="button button-block" ng-click="start(true)">{{ 'mm.core.send' | translate }}</button>
+                <button class="button button-block button-positive" ng-click="start(true)">{{ 'mm.core.send' | translate }}</button>
             </div>
         </form>
     </ion-content>

www/core/directives/timer.js

@@ -50,7 +50,7 @@ angular.module('mm.core')
                 timeInterval;
 
             // Add mm-timer class.
-            element.addClass('mm-timer');
+            element.addClass('mm-timer item item-icon-left');
             scope.text = attrs.timerText || '';
 
             // Check time left every 200ms.

www/core/scss/styles.scss

@@ -817,32 +817,29 @@ p.mm-error { // Deprecated, use one of the above mm-error classes.
 // Timer.
 mm-timer {
   display: block;
-}
 
-// Style timer in items.
-mm-timer.mm-timer .item {
   span, label {
-    color: $item-default-text;
     font-size: $item-font-size;
+    color: $item-default-text;
   }
   span {
     font-weight: bold;
   }
-}
 
-// Create the timer warning colors. Go from $mm-timer-color to $mm-timer-warn-color.
-@for $i from 0 through $mm-timer-iterations {
-  mm-timer.mm-timer.mm-timer-timeleft-#{$i} .item {
-    background-color: mix($mm-timer-color, $mm-timer-warn-color, ($i / $mm-timer-iterations) * 100);
-    @if $i <= $mm-timer-iterations / 2 {
-      label, span, i {
-        color: $white;
+  // Create the timer warning colors. Go from $mm-timer-color to $mm-timer-warn-color.
+  @for $i from 0 through $mm-timer-iterations {
+    &.mm-timer-timeleft-#{$i} {
+      background-color: mix($mm-timer-color, $mm-timer-warn-color, ($i / $mm-timer-iterations) * 100);
+      @if $i <= $mm-timer-iterations / 2 {
+        label, span, i {
+          color: $white;
+        }
       }
     }
-
   }
 }
 
+
 .mm-monospaced {
   font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
 }

www/core/templates/timer.html

@@ -1,6 +1,4 @@
-<div class="item item-text-wrap item-icon-left">
-    <i class="icon ion-clock"></i>
-    <label ng-if="text">{{text}} </label>
-	<span ng-if="timeLeft > 0">{{ timeLeft | mmSecondsToHMS }}</span>
-	<span ng-if="timeLeft <= 0">{{ 'mm.core.timesup' | translate }}</span>
-</div>
+<i class="icon ion-clock"></i>
+<label ng-if="timeLeft > 0 && text">{{text}} </label>
+<span ng-if="timeLeft > 0">{{ timeLeft | mmSecondsToHMS }}</span>
+<span class="mm-timesup" ng-if="timeLeft <= 0">{{ 'mm.core.timesup' | translate }}</span>