mirror of
https://github.com/hubHarmony/servii-frontend.git
synced 2024-11-17 21:40:30 +00:00
responsive to the moon
This commit is contained in:
parent
f90ef12102
commit
337f77a81a
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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%);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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 }) => {
|
||||
<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}>
|
||||
|
@ -81,3 +81,11 @@
|
||||
.container.collapsed .serverDetailsContainer {
|
||||
margin-left: 5rem; // largeur mode rétracté
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 950px) {
|
||||
.menuItem svg {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
@ -52,3 +52,15 @@
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.filterContainer {
|
||||
padding: 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.historyCard {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
|
@ -107,6 +107,14 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.formRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.details {
|
||||
width: 90%;
|
||||
|
Loading…
Reference in New Issue
Block a user