wip #6193 @1:40 responsive outro

diff --git a/style/105-outro.sass b/style/105-outro.sass
index ae841e761fc2eb6ffd337f86eb67a0368e72cb33..79baa858d88c8273a5aa52d5b1eb6ecf370186db 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -1,21 +1,37 @@
 .score
-    height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
-    +opacity(.48,background-color,$neutral-color)
+    height: 600px //680(hauteur de base) - 80(hauteur du header)
     border-radius: 40px
     overflow: hidden
     +flex-config(false,false,row,stretch)
     +below(993px)
         position: static
+        border-radius: 0
+    +above(992px)
+        +opacity(.48,background-color,$neutral-color)
+        height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
+
+    &:after
+        +below(993px)
+            content: ""
+            width: 100%
+            position: absolute
+            height: 100%
+            +opacity(.48,background-color,$neutral-color)
+            top: 0
+            left: 0
 
     .subtitle
         +opacity(.8,color,$texts-color)
+        +below(993px)
+            margin-bottom: 20px
 
     &-content
         flex: 1
         padding: 24px
         position: relative
+        z-index: 1
         +below(993px)
-            padding: 16px
+            padding: 0
         h1
             +font-size(40)
             margin-bottom: 9px
@@ -47,6 +63,7 @@
         margin-right: 60px
         +below(993px)
             margin: 0 0 24px
+            font-size: 56px
         #progress-counter
             width: 100%
             height: 100%
@@ -84,9 +101,10 @@
             padding: 16px 16px 0
             align-items: flex-end
             visibility: hidden
-            +opacity(0,background-color,$ok-color)
+            //+opacity(0,background-color,$ok-color)
+            backdrop-filter: blur(4px)
             &.active
-                +opacity(1,background-color,$ok-color)
+                //+opacity(1,background-color,$ok-color)
                 visibility: visible
 
     &-answers-review
@@ -176,13 +194,38 @@
         position: absolute
         width: calc(100% - 48px)
         bottom: 24px
+        z-index: 1
         +below(993px)
-            width: calc(100% - 32px)
+            width: 100%
+            bottom: 0
         .restart-sentence
             margin-bottom: 14px
         .controls
             +flex-config(space-between)
 
+    .restart-sentence,
+    .btn.restart
+        +below(993px)
+            display: none
+        &-mobile
+            +flex-config(center)
+            +above(992px)
+                display: none
+
+    .restart-sentence-mobile
+        margin-bottom: 14px
+        font-size: 14px
+
+    .btn.restart-mobile
+        width: max-content
+        height: 35px
+        padding: 12px
+        margin: 0 auto
+        font-size: 16px
+        svg
+            height: 13px
+            margin-right: 6px
+
 
     // SimpleBar personalisation
     .simplebar-wrapper

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index 74b52c731ce7c798f5c5d2e2265e7fbed99197a8..71c2171ac19071a8f669f6c12c4351f0aedd931f 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -19,6 +19,13 @@
                     <p class="subtitle">You have completed the quiz<br/> with <span id="score-text"></span>
                         correct answers out of <span id="maxScore-text"></span>
                     </p>
+                    @if($data->restart_button)
+                        <div class="restart-sentence-mobile">Want to improve your score?</div>
+                        <a class="btn secondary restart restart-mobile">
+                            <span data-icon="reset"></span>
+                            Restart
+                        </a>
+                    @endif
                 </div>
             </div>
             <footer>
@@ -27,7 +34,7 @@
                 @endif
                 <div class="controls">
                     @if($data->restart_button)
-                        <a class="btn secondary reset">
+                        <a class="btn secondary restart">
                             Restart
                             <span class="access">R</span>
                         </a>