]> _ Git - fluidbook-toolbox-quiz.git/commitdiff
wait #6388 @0.75
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 10 Oct 2023 18:15:38 +0000 (20:15 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 10 Oct 2023 18:15:51 +0000 (20:15 +0200)
js/quiz.screen.intro.js
style/101-header-footer.sass
views/index.blade.php

index 5012bc91f0a71b01dbe32c7b47a74605ed11d582..b2cfdadc74dfc3a7899ea5367b2d4fe612508d3d 100644 (file)
@@ -29,6 +29,7 @@ QuizScreenIntro.prototype = {
             .to("#start", {
                 y: 0,
             }, .2)
+            .fromTo('#credits',{y:50}, {y: 0, duration: .5}, .3)
             .from(title.words, {
                 opacity: 0, y: 20, duration: .2, stagger: 0.05
             }, .5)
@@ -36,7 +37,7 @@ QuizScreenIntro.prototype = {
                 opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
                     amount: 0.2
                 }
-            }, .7)
+            }, .7);
     },
 
     resize: function (ww, hh) {
index d4ccbd20ac34496b9051d38d8efa65130604dbe6..ac1a802d38ee698e629714d317ee9cce66c1e295 100644 (file)
@@ -7,7 +7,7 @@ header
 
 .title-header
     height: 80px
-    +flex-config(space-between,false,row,center)
+    +flex-config(space-between, false, row, center)
     margin-top: -24px
     transform: translateY(-100%)
 
@@ -16,13 +16,17 @@ header
 
 .header-question
     text-align: center
+
     *
         opacity: 0
+
     .abovetitle
         +font-size(16)
+
     .progress-container
         margin: 6px 0 16px
-        +flex-config(center,false,false,center)
+        +flex-config(center, false, false, center)
+
     .progress-item
         width: 16px
         height: 4px
@@ -30,14 +34,19 @@ header
         +opacity(.16)
         display: inline-flex
         transition: background-color .3s
+
         &:not(:last-of-type)
             margin-right: 7px
+
         &.active
             background-color: $texts-color
-        &.ok,&.neutral
+
+        &.ok, &.neutral
             background-color: $ok-color
+
         &.nok
             background-color: $nok-color
+
     h1
         height: auto
         +font-size(24)
@@ -49,7 +58,8 @@ header
     width: 100%
     z-index: 2
     +padding-container()
-    +flex-config(space-between,false,row,center)
+    +flex-config(space-between, false, row, center)
+
     .btn.primary
         width: 100%
         max-width: 450px
@@ -57,6 +67,7 @@ header
         left: 50%
         bottom: 24px
         transform: translateX(-50%)
+
         &#start
             transform: translate(-50%, calc(100% + 24px))
 
@@ -67,17 +78,34 @@ header
     .header-question
         .abovetitle
             +font-size(14)
+
         .progress-container
             margin: 4px 0 16px
+
         h1
             +font-size(20)
             height: 84px
 
     .footer
-        +flex-config(center,false,row,center)
+        +flex-config(center, false, row, center)
 
     .btn.primary
         position: relative
         left: 0
         bottom: 0
         transform: none
+
+
+#credits
+    font-size: 12px
+    position: absolute
+    bottom: 20px
+    right: 20px
+    color: $texts-color
+    opacity: 0.7
+    z-index: 100
+
+    a
+        text-decoration: none
+        color: inherit
+
index cb5f5acbd091f4f7b7dc15d436318aabb2141739..c16b7eec85b670501aa694fd5e6a976ea067489d 100644 (file)
         @endforeach
         @include('screens.outro', ['data'=> $data])
         <div id="instantReviewAnimation"></div>
+        <div id="credits">{!! $data->credits !!}</div>
     </div>
 </div>
+
 <script src="js/manifest.js"></script>
 <script src="js/quiz.js"></script>
 <script src="js/vendor.js"></script>