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 {
@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;
box-sizing: border-box;
}
.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");
img {
@apply w-8 h-8;
@apply w-6 h-6 md:w-8 md:h-8;
box-sizing: border-box;
}
}

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

@ -11,8 +11,11 @@
}
.screen {
@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist;
height: 100vh;
@apply xl:flex flex-col justify-center items-center relative bg-lhoist xl:h-screen;
// height: 100vh;
// @apply overflow-x-hidden overflow-y-auto;
overflow: hidden;
@apply pb-44 pt-32 xl:pb-0 xl:pt-0;
@screen md {
height: calc(99.8dvh - $margin * 2);
@ -21,7 +24,7 @@
}
&__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-position: center;
background-size: cover;

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

@ -1,10 +1,12 @@
.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;
background-size: 100% 100%;
.app-logo-vector {
@apply md:absolute mr-auto ml-0 top-0 left-0 z-10 bg-no-repeat w-auto h-auto;
background-position: left;
translate: -2px -3px;
background-size: 100% 100%;
isolation: isolate;
translate: -2px -3px;
@screen md {
}
img {
@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 {
@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;

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

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

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

@ -17,12 +17,14 @@
}
&__toggle {
@apply py-3
@apply flex
bg-transparent
text-neutral-800
capitalize
text-base
flex
text-sm
md:text-base
md:py-3
px-5
pr-12
my-0
@ -32,7 +34,7 @@
transform: skew(-2deg);
.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 {
@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 {
@apply w-full
grid
@apply grid
gap-x-8
md:grid-cols-2
@ -48,16 +46,24 @@ dialog {
md:px-24
pt-6
md:pt-28
pb-16;
pb-16
bg-white
md:bg-transparent;
box-sizing: border-box;
width: calc(100% - 20px);
margin: 10px auto 100px auto;
// grid-template-columns: 1fr 1fr;
&__background {
@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-size: 100% 100%;
background-repeat: no-repeat;

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

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

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

@ -1,10 +1,13 @@
.page-container--home {
.screen {
@apply bg-lhoistlight;
.screen_worker_1,
.screen_worker_2 {
@apply hidden lg:block absolute w-fit;
max-height: 60%;
@apply hidden lg:block fixed w-fit max-h-[50%] 2xl:max-h-[60%];
pointer-events: none;
// max-height: 60%;
// height: 60%;
bottom: -3rem;
}
.screen_worker_1 {
@ -27,9 +30,10 @@
}
}
&__content {
@apply mt-40 xl:mt-0;
.cover_worker {
@apply mx-auto;
transform: translate(0%, -50%);
transform: translate(0%, -60%);
margin-bottom: -130px;
}
@ -41,7 +45,7 @@
@apply text-6xl xl:text-9xl;
}
.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);
}
.application_draft {
@ -51,7 +55,7 @@
}
.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;
}
.cta--play {

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

@ -1,8 +1,11 @@
.page-container--profile {
.screen__content {
@apply w-full md:w-fit;
}
.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 {
@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;
&:hover,
&--selected {

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

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

2
src/pages/Game.jsx
View File

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

14
src/pages/Home.jsx
View File

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