charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix responsive

Browse Source
This commit is contained in:
AntoninoP 2024-09-23 02:15:57 +02:00
parent 1212375d65
commit 0d6b741fd4
4 changed files with 172 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main.css
View File

@ -42,19 +42,19 @@ body {
@media (min-width: 1600px) { @media (min-width: 1600px) {
html { html {
font-size: 17px; font-size: 14px;
} }
} }
@media (min-width: 1800px) { @media (min-width: 1800px) {
html { html {
font-size: 19px; font-size: 15px;
} }
} }
@media (min-width: 2000px) { @media (min-width: 2000px) {
html { html {
font-size: 20px; font-size: 17px;
} }
} }

16
src/pages/CreateServer/CreateServer.module.scss
View File

@ -26,7 +26,6 @@
} }
.GamesContainer { .GamesContainer {
margin-top: 2.5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -90,20 +89,23 @@ img {
.GamesContainer { .GamesContainer {
flex-direction: column; flex-direction: column;
flex-wrap: row; flex-wrap: row;
margin-top: 40rem;
height: 100%; height: 100%;
margin-top: 45rem;
} }
.GameCard { .GameCard {
margin: 1rem; margin: 0rem 0rem .5rem 0rem;
width: 20rem; width: 20rem;
padding: 2.5rem; padding: 2.5rem;
} }
.GamesChoice {
margin-top: 35rem;
} }
@media (max-width: 750px) { .title {
.GamesContainer { margin-top: 2rem;
margin-top: 50rem;
} }
} }

26
src/pages/CreateServer/modpack/modpack.jsx
View File

@ -10,16 +10,13 @@ const Modpack = ({ user }) => {
const [modpacks, setModpacks] = useState([]); const [modpacks, setModpacks] = useState([]);
const [selectedModpackIndex, setSelectedModpackIndex] = useState(null); const [selectedModpackIndex, setSelectedModpackIndex] = useState(null);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [serverShortName, setServerShortName] = useState('');
useEffect(() => { useEffect(() => {
const fetchModpacks = async () => { const fetchModpacks = async () => {
try { try {
const response = await serviiApi.fetchModpacks(); const response = await serviiApi.fetchModpacks();
if (response.return_code === 200) { if (response.return_code === 200) {
const fetchedModpacks = response.message; setModpacks(response.message);
setModpacks(fetchedModpacks);
} else { } else {
setError(response.message); setError(response.message);
} }
@ -36,22 +33,23 @@ const Modpack = ({ user }) => {
setSelectedModpackIndex(index); setSelectedModpackIndex(index);
}; };
const handleCancel = () => { const handleCancel = () => {
setSelectedModpackIndex(null); console.log("Annuler cliqué, index sélectionné avant :", selectedModpackIndex);
console.log("dffdff"); setSelectedModpackIndex(null); // Remise à zéro de l'index sélectionné
}; };
const handleCreate = async () => { const handleCreate = async () => {
if (selectedModpackIndex !== null) {
const selectedModpack = modpacks[selectedModpackIndex];
const { short_name, framework } = selectedModpack;
try { try {
const framework = selectedModpackIndex.framework; await serviiApi.serverCreate(short_name, short_name, framework);
await serviiApi.serverCreate(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
console.log(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
navigate('/Dashboard'); navigate('/Dashboard');
} catch (error) { } catch (error) {
console.error('Error creating server:', error); console.error('Error creating server:', error);
} }
}
}; };
return ( return (
@ -67,7 +65,7 @@ const Modpack = ({ user }) => {
{error ? <h2>{error}</h2> : ( {error ? <h2>{error}</h2> : (
modpacks.map((modpack, index) => ( modpacks.map((modpack, index) => (
<div <div
key={index} key={`modpack-${index}`}
className={`${styles.modpackCard} ${selectedModpackIndex === index ? styles.selected : ''}`} className={`${styles.modpackCard} ${selectedModpackIndex === index ? styles.selected : ''}`}
onClick={() => handleModpackClick(index)} onClick={() => handleModpackClick(index)}
> >
@ -84,13 +82,11 @@ const Modpack = ({ user }) => {
<span>Version MC: {modpack.mcVersion}</span> <span>Version MC: {modpack.mcVersion}</span>
<span>Version Modpack: {modpack.version}</span> <span>Version Modpack: {modpack.version}</span>
</div> </div>
{selectedModpackIndex === index && ( // Condition modifiée
{selectedModpackIndex === index && (
<div className={styles.overlay}> <div className={styles.overlay}>
<div className={styles.shortNamtitle}>Créer le serveur {modpack.short_name} ?</div> <div className={styles.shortNamtitle}>Créer le serveur {modpack.short_name} ?</div>
<button className={styles.createButton} onClick={handleCreate}>Créer</button> <button className={styles.createButton} onClick={handleCreate}>Créer</button>
<button className={styles.cancelButton} onClick={handleCancel}>Annuler</button> <button className={styles.cancelButton} onClick={handleCancel}>Annuler</button>
</div> </div>
)} )}
</div> </div>

9
src/pages/CreateServer/modpack/modpack.module.scss
View File

@ -21,7 +21,7 @@
padding: 2rem; padding: 2rem;
width: 30rem; width: 30rem;
text-align: center; text-align: center;
transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out; transition: all 0.3s ease; /* Ajout de la transition pour l'état sélectionné/non-sélectionné */
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -30,14 +30,14 @@
} }
.content { .content {
transition: filter 0.2s ease-in-out; transition: filter 0.3s ease; /* Transition pour le flou */
filter: none; /* Par défaut, pas de flou */
} }
&.selected .content { &.selected .content {
filter: blur(.8rem); filter: blur(0.8rem); /* Appliquer le flou si sélectionné */
} }
h3 { h3 {
margin: .8rem 0; margin: .8rem 0;
font-size: 1.5em; font-size: 1.5em;
@ -152,4 +152,3 @@
} }
} }
} }