From 1bca69dafe40adefd40872733423404cfb71a7d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 May 2017 13:08:15 +0200
Subject: [PATCH] MOBILE-2103 core: Fix timer styles

---
 www/addons/mod/quiz/scss/styles.scss          | 30 +++++++++++++++----
 www/addons/mod/quiz/templates/player.html     |  2 +-
 .../mod/quiz/templates/preflight-modal.html   |  2 +-
 www/core/directives/timer.js                  |  2 +-
 www/core/scss/styles.scss                     | 23 +++++++-------
 www/core/templates/timer.html                 | 10 +++----
 6 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/www/addons/mod/quiz/scss/styles.scss b/www/addons/mod/quiz/scss/styles.scss
index f7381465017..b46df9b646a 100644
--- a/www/addons/mod/quiz/scss/styles.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/www/addons/mod/quiz/templates/player.html b/www/addons/mod/quiz/templates/player.html
index d2189cf3dd5..e9194e0fe86 100644
--- a/www/addons/mod/quiz/templates/player.html
+++ b/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>
diff --git a/www/addons/mod/quiz/templates/preflight-modal.html b/www/addons/mod/quiz/templates/preflight-modal.html
index c85f85902bf..4ab1869ad99 100644
--- a/www/addons/mod/quiz/templates/preflight-modal.html
+++ b/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>
diff --git a/www/core/directives/timer.js b/www/core/directives/timer.js
index b96f0cd16a6..35b32de9bb2 100644
--- a/www/core/directives/timer.js
+++ b/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.
diff --git a/www/core/scss/styles.scss b/www/core/scss/styles.scss
index 023c76ed3ec..d2941757c0a 100644
--- a/www/core/scss/styles.scss
+++ b/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;
 }
diff --git a/www/core/templates/timer.html b/www/core/templates/timer.html
index 6ee19584c0f..6afcd4858ae 100644
--- a/www/core/templates/timer.html
+++ b/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>
\ No newline at end of file
+<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>