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

responsive adaptations

Browse Source
This commit is contained in:
Antoine M 2024-05-13 10:27:09 +02:00
parent a57ff4142c
commit 75d5bb1da3
13 changed files with 67 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/components/layout/Nav.scss
View File

@ -1,14 +1,14 @@
nav.main-menu { nav.main-menu {
@apply absolute top-0 left-0 py-3 pr-6 w-full flex gap-6 justify-end; @apply absolute top-0 left-0 py-3 pr-6 w-full flex gap-6 justify-between md:justify-end;
z-index: 48; z-index: 48;
box-sizing: border-box; box-sizing: border-box;
} }
.nav-menu-toggle { .nav-menu-toggle {
@apply w-16 h-16 bg-transparent bg-no-repeat bg-center; @apply w-12 h-12 md:w-16 md:h-16 bg-transparent bg-no-repeat bg-center;
background-image: url("../../../img/shapes-background/menu-toggle-background.svg"); background-image: url("../../../img/shapes-background/menu-toggle-background.svg");
img { img {
@apply w-8 h-8; @apply w-6 h-6 md:w-8 md:h-8;
box-sizing: border-box; box-sizing: border-box;
} }
} }

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

@ -11,8 +11,11 @@
} }
.screen { .screen {
@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist; @apply xl:flex flex-col justify-center items-center relative bg-lhoist xl:h-screen;
height: 100vh; // height: 100vh;
// @apply overflow-x-hidden overflow-y-auto;
overflow: hidden;
@apply pb-44 pt-32 xl:pb-0 xl:pt-0;
@screen md { @screen md {
height: calc(99.8dvh - $margin * 2); height: calc(99.8dvh - $margin * 2);
@ -21,7 +24,7 @@
} }
&__content { &__content {
@apply text-center pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative; @apply text-center pb-8 md:pb-0 pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative;
background-image: url("../../../img/shapes-background/mask.svg"); background-image: url("../../../img/shapes-background/mask.svg");
background-position: center; background-position: center;
background-size: cover; background-size: cover;

12
src/assets/css/components/ui/AppLogoVector.scss
View File

@ -1,10 +1,12 @@
.app-Logo-vector { .app-logo-vector {
@apply md:absolute mr-auto ml-8 md:ml-0 top-0 left-0 z-10 bg-no-repeat w-auto h-auto; @apply md:absolute mr-auto ml-0 top-0 left-0 z-10 bg-no-repeat w-auto h-auto;
background-size: 100% 100%;
background-position: left; background-position: left;
translate: -2px -3px; background-size: 100% 100%;
isolation: isolate; isolation: isolate;
translate: -2px -3px;
@screen md {
}
img { img {
@apply w-16 md:w-24 h-auto py-2 md:py-6 px-2 md:px-12 z-10; @apply w-16 md:w-24 h-auto py-2 md:py-6 px-2 md:px-12 z-10;
} }

2
src/assets/css/components/ui/BrandingLogo.scss
View File

@ -1,5 +1,5 @@
.lhoist-branding-logo { .lhoist-branding-logo {
@apply absolute bottom-4 left-4 z-10 bg-no-repeat w-auto h-auto; @apply fixed bottom-4 left-4 z-10 bg-no-repeat w-auto h-auto;
translate: -2px -3px; translate: -2px -3px;

2
src/assets/css/components/ui/CountrySelect.scss
View File

@ -1,5 +1,5 @@
.country-select { .country-select {
@apply relative my-8 flex flex-wrap gap-4; @apply relative my-8 flex flex-wrap gap-4 justify-center;
&__toggle, &__toggle,
&__country-list { &__country-list {
@apply bg-slate-100 border-none w-full; @apply bg-slate-100 border-none w-full;

10
src/assets/css/components/ui/LanguageSelect.scss
View File

@ -17,12 +17,14 @@
} }
&__toggle { &__toggle {
@apply py-3 @apply flex
bg-transparent bg-transparent
text-neutral-800 text-neutral-800
capitalize capitalize
text-base text-sm
flex md:text-base
md:py-3
px-5 px-5
pr-12 pr-12
my-0 my-0
@ -32,7 +34,7 @@
transform: skew(-2deg); transform: skew(-2deg);
.flag { .flag {
@apply bg-slate-200 rounded-full w-8 h-8 flex justify-center items-center border-2 border-solid border-black overflow-hidden; @apply bg-slate-200 rounded-full w-6 h-6 md:w-8 md:h-8 flex justify-center items-center border-2 border-solid border-black overflow-hidden;
img { img {
@apply w-full h-full object-cover; @apply w-full h-full object-cover;

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

@ -38,9 +38,7 @@ dialog {
} }
.modal-content-container { .modal-content-container {
@apply w-full @apply grid
grid
gap-x-8 gap-x-8
md:grid-cols-2 md:grid-cols-2
@ -48,16 +46,24 @@ dialog {
md:px-24 md:px-24
pt-6 pt-6
md:pt-28 md:pt-28
pb-16; pb-16
bg-white
md:bg-transparent;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 20px);
margin: 10px auto 100px auto;
// grid-template-columns: 1fr 1fr; // grid-template-columns: 1fr 1fr;
&__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;
} }
background-image: url("../../../img/shapes-background/modal-background.svg"); @screen md {
background-image: url("../../../img/shapes-background/modal-background.svg");
@apply w-full;
}
background-position: center top; background-position: center top;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;

8
src/assets/css/pages/Game.scss
View File

@ -4,6 +4,14 @@
.screen { .screen {
@apply overflow-hidden; @apply overflow-hidden;
} }
.screen--game {
@apply py-0 flex;
height: 100vh;
}
.app-logo-vector {
@apply fixed left-0;
}
.lhoist-blocks-search-and-find { .lhoist-blocks-search-and-find {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */

14
src/assets/css/pages/Home.scss
View File

@ -1,10 +1,13 @@
.page-container--home { .page-container--home {
.screen { .screen {
@apply bg-lhoistlight; @apply bg-lhoistlight;
.screen_worker_1, .screen_worker_1,
.screen_worker_2 { .screen_worker_2 {
@apply hidden lg:block absolute w-fit; @apply hidden lg:block fixed w-fit max-h-[50%] 2xl:max-h-[60%];
max-height: 60%; pointer-events: none;
// max-height: 60%;
// height: 60%;
bottom: -3rem; bottom: -3rem;
} }
.screen_worker_1 { .screen_worker_1 {
@ -27,9 +30,10 @@
} }
} }
&__content { &__content {
@apply mt-40 xl:mt-0;
.cover_worker { .cover_worker {
@apply mx-auto; @apply mx-auto;
transform: translate(0%, -50%); transform: translate(0%, -60%);
margin-bottom: -130px; margin-bottom: -130px;
} }
@ -41,7 +45,7 @@
@apply text-6xl xl:text-9xl; @apply text-6xl xl:text-9xl;
} }
.application_subtitle { .application_subtitle {
@apply text-6xl bg-construction py-2 w-fit mx-auto px-3 block mb-10 md:inline-block; @apply text-6xl bg-construction py-2 w-fit mx-auto px-3 block md:mb-10 md:inline-block;
transform: rotate(-3deg); transform: rotate(-3deg);
} }
.application_draft { .application_draft {
@ -51,7 +55,7 @@
} }
.application_description { .application_description {
@apply max-w-lg 2xl:max-w-xl text-lg px-20 font-bold; @apply max-w-lg 2xl:max-w-xl text-lg px-4 md:px-20 font-bold;
margin-bottom: -40px; margin-bottom: -40px;
} }
.cta--play { .cta--play {

7
src/assets/css/pages/Profile.scss
View File

@ -1,8 +1,11 @@
.page-container--profile { .page-container--profile {
.screen__content {
@apply w-full md:w-fit;
}
.profile-select { .profile-select {
@apply grid sm:grid-cols-2 md:grid-cols-4 list-none gap-2; @apply grid sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 list-none gap-2 px-2;
&__profile-type { &__profile-type {
@apply flex flex-col justify-center items-center py-10 px-3 rounded-lg cursor-pointer gap-2; @apply flex flex-col justify-center items-center py-10 px-3 rounded-lg cursor-pointer gap-2 w-fit mx-auto;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
&:hover, &:hover,
&--selected { &--selected {

2
src/components/ui/AppLogoVector.jsx
View File

@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
export default function Logo() { export default function Logo() {
return ( return (
<Link to='/' className='app-Logo-vector'> <Link to='/' className='app-logo-vector'>
<img src={appLogo} alt='' /> <img src={appLogo} alt='' />
</Link> </Link>
); );

2
src/pages/Game.jsx
View File

@ -15,7 +15,7 @@ export default function Game() {
<> <>
<AnimatedPage className='page-container page-container--play'> <AnimatedPage className='page-container page-container--play'>
<GameContextProvider> <GameContextProvider>
<div className='screen'> <div className='screen screen--game'>
<AppLogo /> <AppLogo />
<GameModal /> <GameModal />
<Tutorials /> <Tutorials />

14
src/pages/Home.jsx
View File

@ -26,12 +26,14 @@ export default function Home() {
<BrandingLogo /> <BrandingLogo />
<section className='screen__content'> <section className='screen__content'>
<img className='cover_worker' src={coverWorker} alt='' /> <img className='cover_worker' src={coverWorker} alt='' />
<h1 className='application_title'>stay safe</h1> <div className='screen__content__wrapper'>
<h2 className='application_subtitle'>interactive</h2> <h1 className='application_title'>stay safe</h1>
<h3 className='application_draft'>draft</h3> <h2 className='application_subtitle'>interactive</h2>
<p className='application_description'> <h3 className='application_draft'>draft</h3>
{currentScreenTranslations.app_description} <p className='application_description'>
</p> {currentScreenTranslations.app_description}
</p>
</div>
<Link <Link
title={uiTranslations.start} title={uiTranslations.start}
to='/select-profile' to='/select-profile'