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

Merge pull request #50 from hubHarmony/lazyload

Browse Source 
responsive to the moon
This commit is contained in:
Antoninop 2024-09-21 16:49:20 +02:00 committed by GitHub
commit 1e64fc0677
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 122 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/navbar/Navbar.module.scss
View File

@ -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;
}
}

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

@ -59,7 +59,7 @@ img {
background-color: #2f2f2f;
color: white;
cursor: pointer;
border: none;
visibility: hidden;
opacity: 0;
}
@ -85,3 +85,25 @@ img {
width: 22rem;
height: auto;
}
@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;
}
}

12
src/pages/CreateServer/Javapick/java.module.scss
View File

@ -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%);
}
}

30
src/pages/PlayersStatus/PlayersStatus.module.scss
View File

@ -53,3 +53,33 @@ input {
font-size: 1.5rem;
font-weight: 400;
}
@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;
}
}

28
src/pages/ServerDetails/ServerDetails.jsx
View File

@ -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 }) => {
<NavLink
to={`/server/${serverName}/options`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaCogs /> {!isSidebarCollapsed && 'Propriétés'}
<FaCogs style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Propriétés'}
</NavLink>
<NavLink
state={{ status }}
to={`/server/${serverName}/console`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaClipboardList /> {!isSidebarCollapsed && 'Console'}
<FaClipboardList style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Console'}
</NavLink>
<NavLink
to={`/server/${serverName}/history`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaHistory /> {!isSidebarCollapsed && 'Historique'}
<FaHistory style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Historique'}
</NavLink>
<NavLink
to={`/server/${serverName}/players`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaUserFriends /> {!isSidebarCollapsed && 'Joueurs'}
<FaUserFriends style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Joueurs'}
</NavLink>
<NavLink
to={`/server/${serverName}/worlds`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaGlobe /> {!isSidebarCollapsed && 'Mondes'}
<FaGlobe style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Mondes'}
</NavLink>
<NavLink
to={`/server/${serverName}/backups`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaSave /> {!isSidebarCollapsed && 'Sauvegardes'}
<FaSave style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Sauvegardes'}
</NavLink>
<NavLink
to={`/server/${serverName}/access`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaLock /> {!isSidebarCollapsed && 'Accès'}
<FaLock style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Accès'}
</NavLink>
</div>
</div>
<div className={styles.serverDetailsContainer}>

8
src/pages/ServerDetails/ServerDetails.module.scss
View File

@ -81,3 +81,11 @@
.container.collapsed .serverDetailsContainer {
margin-left: 5rem; // largeur mode rétracté
}
@media (max-width: 950px) {
.menuItem svg {
font-size: 2.25rem;
}
}

12
src/pages/ServerHistory/ServerHistory.module.scss
View File

@ -52,3 +52,15 @@
color: black;
font-weight: bold;
}
@media (max-width: 650px) {
.filterContainer {
padding: 2rem;
font-size: 1rem;
}
.historyCard {
padding: .5rem;
}
}

8
src/pages/ServerProperties/ServerProperties.module.scss
View File

@ -107,6 +107,14 @@
text-align: center;
}
@media (max-width: 700px) {
.formRow {
display: flex;
flex-direction: column;
}
}
@media (max-width: 48rem) {
.details {
width: 90%;