From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 28 Jul 2023 17:14:00 +0000 (+0200)
Subject: wip #6182 footer, css page intro
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d6e7e230ca4a16dc5855b5dac1e3e7bef6a9391e;p=fluidbook-toolbox.git

wip #6182 footer, css page intro
---

diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index f35373340..3a7bd8220 100644
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -40,3 +40,7 @@
     font-size: #{$size}px
     line-height: map-get($fonts-size,$size)
 
+@mixin padding-container()
+    padding: 16px
+    +breakpoint(md)
+        padding: 24px
diff --git a/resources/quizv2/style/100-global.sass b/resources/quizv2/style/100-global.sass
index 4dcff0b1c..7120e1fe6 100644
--- a/resources/quizv2/style/100-global.sass
+++ b/resources/quizv2/style/100-global.sass
@@ -16,21 +16,36 @@ body
     min-height: 680px
     margin: 0 auto
     padding: 0 24px 24px
+    position: relative
 
 .radius
     border-radius: 16px
 
 .btn
-    padding: 12px
+    padding: 0 12px
     text-align: center
     font-size: 20px
     border: none
     cursor: pointer
     display: inline-block
+    height: 58px
+    +flex-config(center,false,false,center)
     @extend .radius
+    +font-size(20)
     &.primary
-        background: radial-gradient(at 16% 7px, rgba(255,102,186,1) 0%, rgba(208,22,124,1) 91%)
+        background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
+        box-shadow: 0 4px 6px rgba(0,0,0,.2)
     &.secondary
-
+        background-color: #{$texts-color}2f
+        padding-left: 22px
+    &.reset
+        max-width: 144px
+    &.info
+        max-width: 177px
     .access
-        @extend .radius
+        border-radius: 4px
+        padding: 6px 12px
+        +font-size(16)
+        background-color: #{$texts-color}2f
+        text-transform: uppercase
+        margin-left: 16px
diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass
index c42394256..b71c20d1e 100644
--- a/resources/quizv2/style/101-header-footer.sass
+++ b/resources/quizv2/style/101-header-footer.sass
@@ -3,9 +3,20 @@
     +flex-config(space-between,false,row,center)
 #logo
     height: 40px
-
+    filter: brightness(10)
 
 #footer
     position: absolute
-    bottom: 24px
+    bottom: 0
+    left: 0
+    width: 100%
     +flex-config(space-between,false,row,center)
+    +padding-container()
+
+    .btn.primary
+        width: 100%
+        max-width: 400px
+        position: absolute
+        left: 50%
+        bottom: 24px
+        transform: translateX(-50%)
diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php
index 57295472f..4c74b1954 100644
--- a/resources/views/quizv2/footer.blade.php
+++ b/resources/views/quizv2/footer.blade.php
@@ -1,19 +1,21 @@
 <footer id="footer">
-    @if($reset)
+    @isset($reset)
         <a class="btn secondary">
             Reset
             <span class="access">R</span>
         </a>
-    @endif
+    @endisset
     <a class="btn primary">
         {{$data->intro_button}}
         <span class="access">space</span>
-        <span data-icon="running-man"></span>
+        @isset($time)
+            <span data-icon="running-man"></span>
+        @endisset
     </a>
-    @if($info)
+    @isset($info)
         <a class="btn secondary">
             More infos
             <span class="access">F1</span>
         </a>
-    @endif
+    @endisset
 </footer>
diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php
index 37cbf94a0..655ddacf0 100644
--- a/resources/views/quizv2/screens/intro.blade.php
+++ b/resources/views/quizv2/screens/intro.blade.php
@@ -3,4 +3,4 @@
     <h2>{{$data->intro_title}}</h2>
     <p>{{$data->intro_text}}</p>
 </div>
-@include('quizv2.footer', ['data', $data])
+@include('quizv2.footer', ['data' => $data])