play page : add dynamical coming soon status. related to #37
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
This commit is contained in:
isUnknown
parent
f087260398
commit
80a7b41112
13 changed files with 99 additions and 48 deletions
20
assets/img/lock-icon.svg
Normal file
20
assets/img/lock-icon.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2096_2257)">
|
||||
<path d="M6.72667 0.977011H11.2733V0H6.68715V0.977011H5.70801V1.95402H6.72667V0.977011Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M12.292 0.97699H11.2733V1.9519H12.292V0.97699Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M15.9605 4.76531H13.315V1.95404H12.292V4.76531H5.70799V1.95404H4.68713V4.76531H2.04169V5.74232H15.9605V4.76531Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M16.9791 6.71722V13.1718V15.046H18V13.1718V6.71722H16.9791Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M16.9792 5.74231H15.9605V6.71722H16.9792V5.74231Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M1.02086 6.71722H0V13.1718V15.046H1.02086V13.1718V6.71722Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M2.03953 5.74231H1.02087V6.71722H2.03953V5.74231Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M15.9605 16.0209H2.04169V16.9979H15.9605V16.0209Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M16.9792 15.046H15.9605V16.0209H16.9792V15.046Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M2.03953 15.046H1.02087V16.0209H2.03953V15.046Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M8.47203 8.9696H7.45117V9.94452V10.9026V10.9194V11.8775H8.47203V12.8524H9.49069V11.8775H10.5093V10.9194V10.9026V9.94452V8.9696H9.49069H8.47203Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2096_2257">
|
||||
<rect width="18" height="17" fill="white" style="fill:white;fill-opacity:1;"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
title: À propos
|
||||
icon: info
|
||||
image:
|
||||
back: #fff
|
||||
back: rgba(0,0,0, 0)
|
||||
color: var(--color-green)
|
||||
query: false
|
||||
options:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: Blog
|
||||
icon: blog
|
||||
image:
|
||||
back: #fff
|
||||
back: rgba(0,0,0, 0)
|
||||
color: var(--color-green)
|
||||
query: false
|
||||
options:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: Expertise
|
||||
icon: text-left
|
||||
image:
|
||||
back: #fff
|
||||
back: rgba(0,0,0, 0)
|
||||
color: var(--color-green)
|
||||
options:
|
||||
delete: false
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ tabs:
|
|||
translate: false
|
||||
image:
|
||||
ratio: 1/1
|
||||
back: rgba(0,0,0, 0)
|
||||
uploads:
|
||||
template: image
|
||||
help: Pour le carousel de navigation parmi les jeux
|
||||
|
|
@ -40,10 +41,11 @@ tabs:
|
|||
translate: false
|
||||
layout: cards
|
||||
size: tiny
|
||||
image:
|
||||
back: rgba(0,0,0, 0)
|
||||
uploads:
|
||||
template: image
|
||||
help: Affiché au-dessus de la description
|
||||
width: 1/3
|
||||
- width: 3/10
|
||||
fields:
|
||||
description:
|
||||
|
|
@ -64,28 +66,26 @@ tabs:
|
|||
help: Laissez vide pour afficher "à venir / coming soon"
|
||||
translate: false
|
||||
type: url
|
||||
|
||||
- width: 3/10
|
||||
sections:
|
||||
previewCol:
|
||||
type: fields
|
||||
fields:
|
||||
backgroundColor:
|
||||
label: Couleur d'arrière plan
|
||||
type: code-editor
|
||||
language: css
|
||||
size: custom-size
|
||||
default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%)
|
||||
translate: false
|
||||
help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée
|
||||
preview:
|
||||
label: Aperçu
|
||||
type: files
|
||||
layout: cards
|
||||
multiple: false
|
||||
translate: false
|
||||
uploads:
|
||||
template: image
|
||||
help: Image affichée à droite de la description (sur ordinateur uniquement)
|
||||
fields:
|
||||
preview:
|
||||
label: Aperçu
|
||||
type: files
|
||||
layout: cards
|
||||
multiple: false
|
||||
translate: false
|
||||
image:
|
||||
back: rgba(0,0,0, 0)
|
||||
uploads:
|
||||
template: image
|
||||
help: Image affichée à droite de la description (sur ordinateur uniquement)
|
||||
backgroundColor:
|
||||
label: Couleur d'arrière plan
|
||||
type: code-editor
|
||||
language: css
|
||||
size: custom-size
|
||||
default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%)
|
||||
translate: false
|
||||
help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée
|
||||
|
||||
seo: seo/page
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: Jouer
|
||||
icon: game-pad
|
||||
image:
|
||||
back: #ffffff
|
||||
back: rgba(0,0,0, 0)fff
|
||||
color: var(--color-green)
|
||||
options:
|
||||
delete: false
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: Portfolio
|
||||
icon: stack
|
||||
image:
|
||||
back: #ffffff
|
||||
back: rgba(0,0,0, 0)fff
|
||||
query: false
|
||||
color: var(--color-green)
|
||||
options:
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ tabs:
|
|||
translate: false
|
||||
image:
|
||||
ratio: 1/1
|
||||
back: #ffffff
|
||||
back: rgba(0,0,0, 0)fff
|
||||
uploads:
|
||||
template: image
|
||||
help: Écran de jeu mis en situation sur un appareil
|
||||
|
|
@ -140,7 +140,7 @@ tabs:
|
|||
accept: image/*
|
||||
translate: false
|
||||
image:
|
||||
back: #ffffff
|
||||
back: rgba(0,0,0, 0)fff
|
||||
uploads:
|
||||
template: image
|
||||
help: |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: Livres blancs
|
||||
icon: book
|
||||
image:
|
||||
back: #fff
|
||||
back: rgba(0,0,0, 0)
|
||||
color: var(--color-green)
|
||||
query: false
|
||||
options:
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ tabs:
|
|||
type: files
|
||||
layout: cards
|
||||
image:
|
||||
back: #fff
|
||||
back: rgba(0,0,0, 0)
|
||||
max: 1
|
||||
help: Utilisé en pied de page (page À propos, Blog et Article).
|
||||
- width: 3/4
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const dict = {
|
|||
read_article: { fr: "Lire l'article", en: "Read article" },
|
||||
// Play
|
||||
play: { fr: "Jouer", en: "Play" },
|
||||
coming_soon: { fr: "Coming soon", en: "Coming soon" },
|
||||
coming_soon: { fr: "À venir", en: "Coming soon" },
|
||||
// Header
|
||||
close_menu: { fr: "Fermer le menu", en: "Close menu" },
|
||||
open_menu: { fr: "Ouvrir le menu", en: "Open menu" },
|
||||
|
|
|
|||
|
|
@ -57,23 +57,15 @@ button[disabled] {
|
|||
}
|
||||
|
||||
.button.play-icon::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7598 13.5H14.6348V14.625V15.75H15.7598V14.625H16.8848V13.5V12.375H15.7598V13.5Z' fill='black'/%3E%3Cpath d='M12.3848 15.75V16.875H13.5098H14.6348V15.75H13.5098H12.3848Z' fill='black'/%3E%3Cpath d='M10.1348 16.875H9.00977V18H10.1348H11.2598H12.3848V16.875H11.2598H10.1348Z' fill='black'/%3E%3Cpath d='M1.125 10.125V9V7.875V6.75V5.625H0V6.75V7.875V9V10.125V11.25V12.375H1.125V11.25V10.125Z' fill='black'/%3E%3Cpath d='M3.375 13.5H2.25V12.375H1.125V13.5V14.625H2.25V15.75H3.375V14.625V13.5Z' fill='black'/%3E%3Cpath d='M4.5 15.75H3.375V16.875H4.5H5.625V15.75H4.5Z' fill='black'/%3E%3Cpath d='M6.75 16.875H5.625V18H6.75H7.875H9V16.875H7.875H6.75Z' fill='black'/%3E%3Cpath d='M16.8848 5.625V6.75V7.875V9V10.125V11.25V12.375H18.0098V11.25V10.125V9V7.875V6.75V5.625H16.8848Z' fill='black'/%3E%3Cpath d='M16.8848 3.375H15.7598V2.25H14.6348V3.375V4.5H15.7598V5.625H16.8848V4.5V3.375Z' fill='black'/%3E%3Cpath d='M11.2598 0H10.1348H9.00977V1.125H10.1348H11.2598H12.3848V0H11.2598Z' fill='black'/%3E%3Cpath d='M13.5098 1.125H12.3848V2.25H13.5098H14.6348V1.125H13.5098Z' fill='black'/%3E%3Cpath d='M2.25 4.5H3.375V3.375V2.25H2.25V3.375H1.125V4.5V5.625H2.25V4.5Z' fill='black'/%3E%3Cpath d='M5.625 2.25V1.125H4.5H3.375V2.25H4.5H5.625Z' fill='black'/%3E%3Cpath d='M7.875 1.125H9V0H7.875H6.75H5.625V1.125H6.75H7.875Z' fill='black'/%3E%3Cpath d='M10.1399 10.1825H11.2774V9.6775H12.4149V8.54H11.2774V7.91H10.1399V6.7725H9.00492V5.6375H7.86742V4.5H6.73242V13.5925H7.86742V12.455H9.00492V11.3175H10.1399V10.1825Z' fill='black'/%3E%3C/svg%3E");
|
||||
background-size: 100%;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
transform: translateX(-0.5rem);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.button.download-icon::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2339_203)%22%3E%3Cpath%20d%3D%22M6.26423%208.06567H4.10986V10.0801H6.26423V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.41853%2012.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.8456%2011.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M14.8902%208.06567H12.7358V10.0801H14.8902V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2339_203%22%3E%3Crect%20width%3D%2219%22%20height%3D%2218%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
|
||||
background-size: 100%;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
transform: translateX(-0.5rem);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.button.lock-icon::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2096_2257)%22%3E%3Cpath%20d%3D%22M6.72667%200.977011H11.2733V0H6.68715V0.977011H5.70801V1.95402H6.72667V0.977011Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M12.292%200.97699H11.2733V1.9519H12.292V0.97699Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M15.9605%204.76531H13.315V1.95404H12.292V4.76531H5.70799V1.95404H4.68713V4.76531H2.04169V5.74232H15.9605V4.76531Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.9791%206.71722V13.1718V15.046H18V13.1718V6.71722H16.9791Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.9792%205.74231H15.9605V6.71722H16.9792V5.74231Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M1.02086%206.71722H0V13.1718V15.046H1.02086V13.1718V6.71722Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M2.03953%205.74231H1.02087V6.71722H2.03953V5.74231Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M15.9605%2016.0209H2.04169V16.9979H15.9605V16.0209Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.9792%2015.046H15.9605V16.0209H16.9792V15.046Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M2.03953%2015.046H1.02087V16.0209H2.03953V15.046Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.47203%208.9696H7.45117V9.94452V10.9026V10.9194V11.8775H8.47203V12.8524H9.49069V11.8775H10.5093V10.9194V10.9026V9.94452V8.9696H9.49069H8.47203Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2096_2257%22%3E%3Crect%20width%3D%2218%22%20height%3D%2217%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
/* Clickable elements */
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@
|
|||
class="button play-icon"
|
||||
>{t('play')}</a>
|
||||
{:else}
|
||||
<button class="button" disabled>{t('coming_soon')}</button>
|
||||
<button class="button with-icon lock-icon" disabled>{t('coming_soon')}</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -280,7 +280,14 @@
|
|||
<nav class="play-carousel" aria-label="Choisir un jeu">
|
||||
<ul role="list">
|
||||
{#each games as game, i}
|
||||
<li class="play-carousel-item" class:active={i === currentIndex}>
|
||||
<li
|
||||
class={[
|
||||
"play-carousel-item",
|
||||
i === currentIndex ? 'active' : '',
|
||||
!game.playLink ? 'coming-soon' : ''
|
||||
]}
|
||||
style:--status={!game.playLink ? '"' + t('coming_soon') + '"' : 'false'}
|
||||
>
|
||||
<button
|
||||
aria-label={game.title}
|
||||
aria-current={i === currentIndex ? 'true' : undefined}
|
||||
|
|
@ -440,18 +447,37 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.play-carousel-item :global(picture) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.play-carousel-item button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s var(--ease-standard);
|
||||
}
|
||||
|
||||
.play-carousel-item.coming-soon button::after {
|
||||
content: var(--status);
|
||||
text-transform: uppercase;
|
||||
font-family: "Danzza Bold", sans-serif;
|
||||
font-size: .7rem;
|
||||
background-color: var(--color-primary);
|
||||
margin-top: 1rem;
|
||||
padding: .5rem .7rem;
|
||||
border-radius: .5rem .5rem .5rem .5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.play-carousel-item :global(img) {
|
||||
width: clamp(140px, 15.09vw, 291px);
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
.play-carousel-item.active :global(img) {
|
||||
|
|
@ -462,7 +488,10 @@
|
|||
object-fit: cover;
|
||||
transition: all 0.4s var(--ease-standard);
|
||||
border: 5px solid var(--color-primary);
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
.play-carousel-item.coming-soon :global(img) {
|
||||
filter: saturate(0) contrast(1.3);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1140px) {
|
||||
|
|
@ -471,6 +500,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.play-carousel-item.coming-soon button::after {
|
||||
font-family: "Danzza", sans-serif;
|
||||
margin-top: .5rem;
|
||||
padding: .3rem .5rem;
|
||||
font-size: .5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Mobile (≤ 700px) --- */
|
||||
@media (max-width: 700px) {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue