From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 18 Jun 2025 15:59:56 +0000 (+0200)
Subject: wip #7591 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e733b07463ab4fdb115d12775fe349430797f021;p=fluidbook-toolbox-quiz.git

wip #7591 @3
---

diff --git a/style/105-outro.sass b/style/105-outro.sass
index dbabffb..19eefd6 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -5,13 +5,23 @@
     border-radius: 16px
     overflow: hidden
     +flex-config(false, false, row, stretch)
-    +opacity(.64, background-color, $neutral-color)
+
     height: 576px
     //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
     .subtitle
         +opacity(.8, color, $texts-color)
 
 
+    &.left-overlay
+        +opacity(.64, background-color, $neutral-color)
+
+        .score-answers-review
+            border-radius: 0
+
+            &:after
+                border-radius: 0
+
+
     h1,
     .score-text .subtitle .word,
     .restart-sentence-mobile,
@@ -69,6 +79,7 @@
         position: relative
         +font-size(56)
         flex-shrink: 0
+
         &.large-nbr
             +font-size(45)
 
@@ -76,8 +87,9 @@
             #progress-counter
                 *
                     color: $nok-color
+
                 span
-                    text-shadow: 0 0 30px rgba($nok-color,.72)
+                    text-shadow: 0 0 30px rgba($nok-color, .72)
 
             #anime-result svg *
                 fill: $nok-color
@@ -87,8 +99,9 @@
             #progress-counter
                 *
                     color: $ok-color
+
                 span
-                    text-shadow: 0 0 30px rgba($ok-color,.72)
+                    text-shadow: 0 0 30px rgba($ok-color, .72)
 
             #anime-result svg *
                 fill: $ok-color
@@ -110,7 +123,7 @@
             &:after
                 content: ""
                 position: absolute
-                +opacity(.08,background-color,$neutral-color)
+                +opacity(.08, background-color, $neutral-color)
                 width: 130%
                 height: 130%
                 border-radius: 100%
@@ -143,10 +156,12 @@
         background-color: $neutral-color
         padding: 24px 24px 0
         position: relative
+        border-radius: 16px
 
         .slot
             &.active
                 background-color: $neutral-color !important
+
             &.nok
                 border: 1px solid $nok-color
 
@@ -176,6 +191,7 @@
             left: 0
             background: linear-gradient(to bottom, transparent, rgba($neutral-color, .8))
             pointer-events: none
+            border-radius: 0 0 16px 16px
 
     #answers-list
         height: 85%
@@ -192,11 +208,13 @@
             .title-section
                 +font-size(16)
                 font-weight: 700
+
                 .m &
                     +font-size(14)
 
             .title-block
                 +font-size(20)
+
                 .m &
                     +font-size(16)
 
@@ -235,8 +253,9 @@
             .content
                 cursor: pointer
 
-        .slot,.card-holder
+        .slot, .card-holder
             border-color: transparent
+
             p
                 overflow: hidden
                 text-overflow: ellipsis
@@ -302,6 +321,7 @@
     .area-container
         display: grid
         grid-template-columns: 2fr 2fr
+
         .m &
             display: flex
 
@@ -318,32 +338,37 @@
         gap: 8px
 
     .match-wrapper
-        +flex-config(false,false,row,center)
+        +flex-config(false, false, row, center)
         flex-wrap: wrap
+
         .access
             margin: 0
 
     .multiple-wrapper
-        +flex-config(false,false,column)
+        +flex-config(false, false, column)
         gap: 8px
+
         .card-holder
             background: transparent
             flex-direction: row
             border-radius: 8px
             min-height: 52px
+
         .slot
-            +flex-config(space-between,false,false,center)
-            background-color: rgba($texts-color,.08) !important
+            +flex-config(space-between, false, false, center)
+            background-color: rgba($texts-color, .08) !important
 
     .match-title,
     .area-title
         display: grid
         grid-template-columns: 2fr 2fr
+
         p
             width: 50%
 
     .area-title
         margin-bottom: 8px
+
         p
             width: 100%
 
@@ -353,12 +378,13 @@
         height: 100%
 
     .area-item
-        +flex-config(space-between,false,false,center)
+        +flex-config(space-between, false, false, center)
+
         .access
             margin-top: 2px
 
     .match-item
-        +flex-config(false,false,false,center)
+        +flex-config(false, false, false, center)
         flex: 1
         border: 0
 
@@ -385,6 +411,7 @@
     +radius(8px)
     transform: translate(calc(-50%), calc(-100% + -14px))
     z-index: 99
+
     &:after
         height: 0
         width: 0
@@ -490,13 +517,16 @@
         #answers-list
             height: 90%
             padding-right: 5px
+
             .item
                 padding-left: 0
+
                 &:after
                     display: none
 
         .toggle-answers-review
             display: flex
+
             span.text
                 margin-right: 16px
 
diff --git a/views/components/background.blade.php b/views/components/background.blade.php
index adf54a1..8497c86 100644
--- a/views/components/background.blade.php
+++ b/views/components/background.blade.php
@@ -6,4 +6,5 @@
         $m=false;
     }
 @endphp
-<div @if($d)data-has-bg=''@endif data-bg-type="{{$name}}" data-bg-fit="{{$fit}}" data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
+<div data-youpi="{{$d}}" @if($d)data-has-bg='' @endif data-bg-type="{{$name}}" data-bg-fit="{{$fit}}" data-bg=""
+     data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index cf4601a..b7b8c6d 100644
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -1,6 +1,7 @@
 <div class="container-screen none" data-type="outro" data-screen="outro">
     @include('header_title', ['data', $data])
-    <div class="screen score" id="score">
+    @include('components.background',['data'=>$data,'name'=>'outro','fit'=>'fill'])
+    <div class="screen score @if($data['outroLeftOverlay']) leftoverlay @endif" id="score">
         <div class="score-content {{$data->review === "never" ? 'full' : ''}}">
             <div class="score-content-wrapper">
                 <div id="container-score" class="score-counter">