Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining modal to have a generic version

Browse Source
This commit is contained in:
Antoine M 2024-05-14 09:28:44 +02:00
parent 62cb4233e8
commit faa7f406b9
3 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/components/layout/Page-container.scss
View File

@ -15,7 +15,7 @@
// height: 100vh; // height: 100vh;
// @apply overflow-x-hidden overflow-y-auto; // @apply overflow-x-hidden overflow-y-auto;
overflow: hidden; overflow: hidden;
@apply pb-44 pt-32 xl:pb-0 xl:pt-0; @apply pb-44 pt-10 xl:pb-0 xl:pt-0;
@screen md { @screen md {
height: calc(99.8dvh - $margin * 2); height: calc(99.8dvh - $margin * 2);

43
src/assets/css/components/ui/Modal.scss
View File

@ -1,4 +1,4 @@
body:has(dialog) { body:has(dialog[open]) {
overflow: hidden; overflow: hidden;
} }
dialog { dialog {
@ -25,6 +25,12 @@ dialog {
max-width: 80vw; max-width: 80vw;
max-height: 90dvh; max-height: 90dvh;
} }
&:has(.modal-content-container__modal-cover) {
.game-modal__close-button {
@apply top-8;
}
}
} }
.game-modal { .game-modal {
@ -38,25 +44,28 @@ dialog {
} }
.modal-content-container { .modal-content-container {
@apply grid @apply gap-x-8
gap-x-8
md:grid-cols-2
p-8 p-8
md:px-24 md:px-24
pt-6 pt-6
md:pt-28 md:pt-28
pb-16 pb-16
bg-white bg-white
md:bg-transparent; md:bg-transparent;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 10px auto 100px auto; // margin: 10px auto 100px auto;
margin: 10px auto 0px auto;
// grid-template-columns: 1fr 1fr;
&--grided {
@apply grid md:grid-cols-2;
}
&--centered {
.modal-content-container__content {
@apply flex flex-col items-center justify-center text-center;
}
}
&__background { &__background {
@apply h-full w-full absolute top-0 left-0 object-fill; @apply h-full w-full absolute top-0 left-0 object-fill;
} }
@ -76,6 +85,22 @@ dialog {
} }
&__content { &__content {
} }
@apply pt-12;
&:has(.modal-content-container__modal-cover) {
@apply mt-12 pt-28;
}
&:not(:has(h2)) {
.explanation {
@apply pt-8;
}
}
&__modal-cover {
@apply absolute top-0 bg-white w-24 h-24 p-6 rounded-full;
// transform: translateY(-50%);
}
&__cover { &__cover {
@apply px-6 py-8 md:py-12 bg-neutral-50; @apply px-6 py-8 md:py-12 bg-neutral-50;
align-self: center; align-self: center;

2
src/components/game/GameQuestion.jsx
View File

@ -20,7 +20,7 @@ export default function GameQuestion({ questionId, correctAnswer }, ...props) {
} }
return ( return (
<div className='modal-content-container game-question-container'> <div className='modal-content-container modal-content-container--grided game-question-container '>
<div className='modal-content-container__content'> <div className='modal-content-container__content'>
<h3 className='titling-construction '>{currentScreenTranslations.found}</h3> <h3 className='titling-construction '>{currentScreenTranslations.found}</h3>
<h2>{currentScreenTranslations.is_it_secure}</h2> <h2>{currentScreenTranslations.is_it_secure}</h2>