From 0d6b741fd4da337360780fe3537d1b2e6d6b3bdc Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Mon, 23 Sep 2024 02:15:57 +0200 Subject: [PATCH] fix responsive --- src/main.css | 6 +- .../CreateServer/CreateServer.module.scss | 18 +- src/pages/CreateServer/modpack/modpack.jsx | 36 +-- .../CreateServer/modpack/modpack.module.scss | 287 +++++++++--------- 4 files changed, 172 insertions(+), 175 deletions(-) diff --git a/src/main.css b/src/main.css index 86da27f..886f248 100644 --- a/src/main.css +++ b/src/main.css @@ -42,19 +42,19 @@ body { @media (min-width: 1600px) { html { - font-size: 17px; + font-size: 14px; } } @media (min-width: 1800px) { html { - font-size: 19px; + font-size: 15px; } } @media (min-width: 2000px) { html { - font-size: 20px; + font-size: 17px; } } diff --git a/src/pages/CreateServer/CreateServer.module.scss b/src/pages/CreateServer/CreateServer.module.scss index 915ca10..bc72c7b 100644 --- a/src/pages/CreateServer/CreateServer.module.scss +++ b/src/pages/CreateServer/CreateServer.module.scss @@ -26,7 +26,6 @@ } .GamesContainer { - margin-top: 2.5rem; display: flex; justify-content: center; align-items: center; @@ -90,20 +89,23 @@ img { .GamesContainer { flex-direction: column; flex-wrap: row; - margin-top: 40rem; height: 100%; - + margin-top: 45rem; } .GameCard { - margin: 1rem; + margin: 0rem 0rem .5rem 0rem; width: 20rem; padding: 2.5rem; } -} -@media (max-width: 750px) { - .GamesContainer { - margin-top: 50rem; + .GamesChoice { + margin-top: 35rem; } + + .title { + margin-top: 2rem; + } + + } diff --git a/src/pages/CreateServer/modpack/modpack.jsx b/src/pages/CreateServer/modpack/modpack.jsx index cbdea89..879fdb3 100644 --- a/src/pages/CreateServer/modpack/modpack.jsx +++ b/src/pages/CreateServer/modpack/modpack.jsx @@ -10,16 +10,13 @@ const Modpack = ({ user }) => { const [modpacks, setModpacks] = useState([]); const [selectedModpackIndex, setSelectedModpackIndex] = useState(null); const [error, setError] = useState(''); - const [serverShortName, setServerShortName] = useState(''); useEffect(() => { const fetchModpacks = async () => { try { const response = await serviiApi.fetchModpacks(); if (response.return_code === 200) { - const fetchedModpacks = response.message; - - setModpacks(fetchedModpacks); + setModpacks(response.message); } else { setError(response.message); } @@ -36,22 +33,23 @@ const Modpack = ({ user }) => { setSelectedModpackIndex(index); }; - const handleCancel = () => { - setSelectedModpackIndex(null); - console.log("dffdff"); + console.log("Annuler cliqué, index sélectionné avant :", selectedModpackIndex); + setSelectedModpackIndex(null); // Remise à zéro de l'index sélectionné }; - const handleCreate = async () => { - try { - const framework = selectedModpackIndex.framework; - await serviiApi.serverCreate(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework); - console.log(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework); - navigate('/Dashboard'); - } catch (error) { - console.error('Error creating server:', error); - } + if (selectedModpackIndex !== null) { + const selectedModpack = modpacks[selectedModpackIndex]; + const { short_name, framework } = selectedModpack; + + try { + await serviiApi.serverCreate(short_name, short_name, framework); + navigate('/Dashboard'); + } catch (error) { + console.error('Error creating server:', error); + } + } }; return ( @@ -67,7 +65,7 @@ const Modpack = ({ user }) => { {error ?

{error}

: ( modpacks.map((modpack, index) => (
handleModpackClick(index)} > @@ -84,13 +82,11 @@ const Modpack = ({ user }) => { Version MC: {modpack.mcVersion} Version Modpack: {modpack.version}
- - {selectedModpackIndex === index && ( + {selectedModpackIndex === index && ( // Condition modifiée
Créer le serveur {modpack.short_name} ?
-
)} diff --git a/src/pages/CreateServer/modpack/modpack.module.scss b/src/pages/CreateServer/modpack/modpack.module.scss index 690f5f2..9272390 100644 --- a/src/pages/CreateServer/modpack/modpack.module.scss +++ b/src/pages/CreateServer/modpack/modpack.module.scss @@ -1,155 +1,154 @@ .Container { + display: flex; + flex-direction: column; + align-items: center; + padding: 6rem; +} + +.modpackGrid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); + gap: 2rem; + width: 100%; + padding: 1.5rem; +} + +.modpackCard { + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: .7rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 2rem; + width: 30rem; + text-align: center; + transition: all 0.3s ease; /* Ajout de la transition pour l'état sélectionné/non-sélectionné */ + cursor: pointer; + position: relative; + + &:hover { + transform: translateY(-.2rem); + } + + .content { + transition: filter 0.3s ease; /* Transition pour le flou */ + filter: none; /* Par défaut, pas de flou */ + } + + &.selected .content { + filter: blur(0.8rem); /* Appliquer le flou si sélectionné */ + } + + h3 { + margin: .8rem 0; + font-size: 1.5em; + color: #333; + } + + p { + font-size: 1em; + color: #666; + } + + .modpackImage { + width: 100%; + height: auto; + margin-bottom: 1rem; + } + + .tags { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: .5rem; + margin: 2.5rem 0rem; + + .tag { + display: flex; + align-items: center; + padding: .4rem .8rem; + border-radius: 1.5rem; + font-size: 0.9em; + font-weight: 500; + color: #fff; + + &.adventure { + background-color: #4CAF50; + } + + &.combat { + background-color: #E91E63; + } + + &.pve { + background-color: #2196F3; + } + + &.forge { + background-color: #FFC107; + } + } + } + + .meta { + display: flex; + justify-content: space-between; + font-size: .9rem; + color: #999; + } + + .overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; + justify-content: center; align-items: center; - padding: 6rem; - } - - .modpackGrid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); - gap: 2rem; - width: 100%; - padding: 1.5rem; - } - - .modpackCard { - background-color: #f9f9f9; - border: 1px solid #ddd; - border-radius: .7rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 2rem; - width: 30rem; - text-align: center; - transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out; - cursor: pointer; - position: relative; - - &:hover { - transform: translateY(-.2rem); - } - - .content { - transition: filter 0.2s ease-in-out; - } - - &.selected .content { - filter: blur(.8rem); - } - - - h3 { - margin: .8rem 0; - font-size: 1.5em; + gap: 1rem; + z-index: 10; + + h4 { + font-size: 1.8rem; color: #333; - } - - p { - font-size: 1em; - color: #666; - } - - .modpackImage { - width: 100%; - height: auto; margin-bottom: 1rem; } - - .tags { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: .5rem; - margin: 2.5rem 0rem; - - .tag { - display: flex; - align-items: center; - padding: .4rem .8rem; - border-radius: 1.5rem; - font-size: 0.9em; - font-weight: 500; - color: #fff; - - &.adventure { - background-color: #4CAF50; - } - - &.combat { - background-color: #E91E63; - } - - &.pve { - background-color: #2196F3; - } - - &.forge { - background-color: #FFC107; - } - } + + .createButton { + background-color: black; + color: white; + padding: 0.5rem 1.5rem; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1.25rem; } - - .meta { - display: flex; - justify-content: space-between; - font-size: .9rem; - color: #999; + + .createButton:hover { + background-color: #252525bb; } - - .overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.9); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 1rem; - z-index: 10; - - h4 { - font-size: 1.8rem; - color: #333; - margin-bottom: 1rem; - } - - .createButton { - background-color: black; - color: white; - padding: 0.5rem 1.5rem; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1.25rem; - } - - .createButton:hover { - background-color: #252525bb; - } - - .cancelButton { - background-color: gray; - color: white; - padding: 0.5rem 1.5rem; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1.25rem; - } - - .cancelButton:hover { - background-color: rgba(95, 95, 95, 0.685); - } - - .shortNamtitle { - font-weight: 400; - font-size: 1.5rem; - color: #333; - margin-bottom: 1rem; - } + + .cancelButton { + background-color: gray; + color: white; + padding: 0.5rem 1.5rem; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1.25rem; + } + + .cancelButton:hover { + background-color: rgba(95, 95, 95, 0.685); + } + + .shortNamtitle { + font-weight: 400; + font-size: 1.5rem; + color: #333; + margin-bottom: 1rem; } } - \ No newline at end of file +}