From 337f77a81ab83fdc87c7db1cda4d6f176dcacfa9 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Sat, 21 Sep 2024 16:48:27 +0200 Subject: [PATCH] responsive to the moon --- src/components/navbar/Navbar.module.scss | 7 ++++ .../CreateServer/CreateServer.module.scss | 26 +++++++++++++-- .../CreateServer/Javapick/java.module.scss | 12 +++++++ .../PlayersStatus/PlayersStatus.module.scss | 32 ++++++++++++++++++- src/pages/ServerDetails/ServerDetails.jsx | 30 +++++++++++------ .../ServerDetails/ServerDetails.module.scss | 8 +++++ .../ServerHistory/ServerHistory.module.scss | 12 +++++++ .../ServerProperties.module.scss | 8 +++++ 8 files changed, 122 insertions(+), 13 deletions(-) diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss index dd41935..8c1347f 100644 --- a/src/components/navbar/Navbar.module.scss +++ b/src/components/navbar/Navbar.module.scss @@ -81,9 +81,16 @@ color: var(--primary-color); margin-right: auto; margin-left: 2rem; + } .backIcon { margin-right: 0.5rem; font-size: 1.5rem; } + +@media (max-width: 650px) { + .backButton{ + font-size: 1.25rem; + } +} diff --git a/src/pages/CreateServer/CreateServer.module.scss b/src/pages/CreateServer/CreateServer.module.scss index 2a8ae86..915ca10 100644 --- a/src/pages/CreateServer/CreateServer.module.scss +++ b/src/pages/CreateServer/CreateServer.module.scss @@ -59,7 +59,7 @@ img { background-color: #2f2f2f; color: white; cursor: pointer; - + border: none; visibility: hidden; opacity: 0; } @@ -84,4 +84,26 @@ img { .imgCard{ width: 22rem; height: auto; -} \ No newline at end of file +} + +@media (max-width: 1000px) { + .GamesContainer { + flex-direction: column; + flex-wrap: row; + margin-top: 40rem; + height: 100%; + + } + + .GameCard { + margin: 1rem; + width: 20rem; + padding: 2.5rem; + } +} + +@media (max-width: 750px) { + .GamesContainer { + margin-top: 50rem; + } +} diff --git a/src/pages/CreateServer/Javapick/java.module.scss b/src/pages/CreateServer/Javapick/java.module.scss index e256bab..98f8f2e 100644 --- a/src/pages/CreateServer/Javapick/java.module.scss +++ b/src/pages/CreateServer/Javapick/java.module.scss @@ -126,3 +126,15 @@ background-color: #145a32; transform: scale(1.05); } + + +@media (max-width: 900px) { + .VersionContainer { + grid-template-columns: repeat(4, 1fr); + } + + .inputContainer.inputValid { + transform: translateX(-20%); + } + +} diff --git a/src/pages/PlayersStatus/PlayersStatus.module.scss b/src/pages/PlayersStatus/PlayersStatus.module.scss index 6b0daed..2c594c3 100644 --- a/src/pages/PlayersStatus/PlayersStatus.module.scss +++ b/src/pages/PlayersStatus/PlayersStatus.module.scss @@ -52,4 +52,34 @@ input { .playerName { font-size: 1.5rem; font-weight: 400; -} \ No newline at end of file +} + +@media (max-width: 650px) { + +input { + font-size: 1rem; + padding: .35rem; + +} + +.sendButton { + margin-left: .25rem; + padding: .35rem .75rem; + +} + + +.titlesection { + font-size: 1.5rem; +} + +.playerAvatar { + width: 1.5rem; + height: 1.5rem; +} + +.playerName { + font-size: 1rem; +} + } + \ No newline at end of file diff --git a/src/pages/ServerDetails/ServerDetails.jsx b/src/pages/ServerDetails/ServerDetails.jsx index 99ca6b9..b4c4148 100644 --- a/src/pages/ServerDetails/ServerDetails.jsx +++ b/src/pages/ServerDetails/ServerDetails.jsx @@ -11,7 +11,7 @@ import PropTypes from "prop-types"; import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa'; import { FiChevronsLeft, FiChevronsRight } from "react-icons/fi"; import NotFoundPage from '../NotFoundPage/NotFoundPage'; -import { useLocation,useNavigate} from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; const ServerDetails = ({ user }) => { const { serverName } = useParams(); @@ -19,7 +19,18 @@ const ServerDetails = ({ user }) => { const navigate = useNavigate(); const initialStatus = location.state?.status ?? JSON.parse(localStorage.getItem('status')) ?? false; const [status, setStatus] = useState(initialStatus); - const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); + const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(window.innerWidth < 900); + + useEffect(() => { + const handleResize = () => { + setIsSidebarCollapsed(window.innerWidth < 900); + }; + + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); useEffect(() => { if (location.pathname.includes('/console')) { @@ -47,46 +58,45 @@ const ServerDetails = ({ user }) => { isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Propriétés'} + {!isSidebarCollapsed && 'Propriétés'} isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Console'} + {!isSidebarCollapsed && 'Console'} isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Historique'} + {!isSidebarCollapsed && 'Historique'} isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Joueurs'} + {!isSidebarCollapsed && 'Joueurs'} isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Mondes'} + {!isSidebarCollapsed && 'Mondes'} isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Sauvegardes'} + {!isSidebarCollapsed && 'Sauvegardes'} isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> - {!isSidebarCollapsed && 'Accès'} + {!isSidebarCollapsed && 'Accès'} -
diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss index 9723e03..5ace75d 100644 --- a/src/pages/ServerDetails/ServerDetails.module.scss +++ b/src/pages/ServerDetails/ServerDetails.module.scss @@ -81,3 +81,11 @@ .container.collapsed .serverDetailsContainer { margin-left: 5rem; // largeur mode rétracté } + + + +@media (max-width: 950px) { + .menuItem svg { + font-size: 2.25rem; + } + } \ No newline at end of file diff --git a/src/pages/ServerHistory/ServerHistory.module.scss b/src/pages/ServerHistory/ServerHistory.module.scss index 6e5bb95..583c71e 100644 --- a/src/pages/ServerHistory/ServerHistory.module.scss +++ b/src/pages/ServerHistory/ServerHistory.module.scss @@ -52,3 +52,15 @@ color: black; font-weight: bold; } + +@media (max-width: 650px) { + .filterContainer { + padding: 2rem; + font-size: 1rem; + } + + .historyCard { + padding: .5rem; + } + } + \ No newline at end of file diff --git a/src/pages/ServerProperties/ServerProperties.module.scss b/src/pages/ServerProperties/ServerProperties.module.scss index 6c4cf3a..c9dba2c 100644 --- a/src/pages/ServerProperties/ServerProperties.module.scss +++ b/src/pages/ServerProperties/ServerProperties.module.scss @@ -107,6 +107,14 @@ text-align: center; } +@media (max-width: 700px) { + .formRow { + display: flex; + flex-direction: column; + } + } + + @media (max-width: 48rem) { .details { width: 90%;