mirror of
https://github.com/Unkn0wnCat/matrix-veles.git
synced 2025-04-28 17:56:49 +02:00
webui: Handle small screens
This commit is contained in:
parent
00f4208ad2
commit
ba3cdf0288
5 changed files with 82 additions and 14 deletions
|
|
@ -17,6 +17,7 @@
|
|||
"@types/react-relay": "^13.0.1",
|
||||
"@types/relay-runtime": "^13.0.2",
|
||||
"axios": "^0.26.0",
|
||||
"hamburger-react": "^2.4.1",
|
||||
"i18next": "^21.6.13",
|
||||
"i18next-browser-languagedetector": "^6.1.3",
|
||||
"i18next-http-backend": "^1.3.2",
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
.dashboardGrid {
|
||||
height: 90%;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: var(--veles-layout-padding);
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
/*grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
@media (max-width: 1300px) {*/
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
//}
|
||||
@media (max-width: 950px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@import "../globals";
|
||||
|
||||
$navBreakpoint: 1000px;
|
||||
|
||||
.skipToContent {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
|
@ -62,6 +64,21 @@
|
|||
border-bottom: thin solid var(--veles-color-border);
|
||||
height: 66px;
|
||||
|
||||
.hamburger {
|
||||
padding: 8px 0 8px 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>*>span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a, button {
|
||||
@include panelTopBarLink;
|
||||
}
|
||||
|
|
@ -85,6 +102,27 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navUnderlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 900;
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s;
|
||||
|
||||
@media(max-width: $navBreakpoint) {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -92,6 +130,23 @@
|
|||
overflow-x: auto;
|
||||
height: calc(100vh - 66px);
|
||||
width: 250px;
|
||||
background-color: var(--veles-color-background);
|
||||
transition: left .25s;
|
||||
|
||||
@media (max-width: $navBreakpoint) {
|
||||
left: -250px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
&.expanded {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
>* {
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
import React, {useState} from "react";
|
||||
|
||||
import {Link, NavLink, useOutlet} from "react-router-dom";
|
||||
import {Home, List, ClipboardList, ExternalLink, ChevronRight, MessageSquare, LogOut} from "lucide-react";
|
||||
import {Home, List, ClipboardList, BookOpen, ChevronRight, MessageSquare, LogOut} from "lucide-react";
|
||||
import { Squash as Hamburger } from 'hamburger-react';
|
||||
|
||||
import {ReactComponent as Logo} from "../logo.svg";
|
||||
|
||||
import styles from "./PanelLayout.module.scss";
|
||||
import {Trans} from "react-i18next";
|
||||
import {Trans, useTranslation} from "react-i18next";
|
||||
import {useAppDispatch} from "../app/hooks";
|
||||
import {logOut} from "../features/auth/authSlice";
|
||||
|
||||
const PanelLayout = () => {
|
||||
const {t} = useTranslation()
|
||||
const outlet = useOutlet();
|
||||
const [hashingExpanded, setHashingExpanded] = useState(false)
|
||||
const [sideNavExpanded, setSideNavExpanded] = useState(true)
|
||||
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
|
|
@ -20,20 +23,24 @@ const PanelLayout = () => {
|
|||
<a href={"#main"} className={styles.skipToContent}><Trans i18nKey={"panel:jump_to_content"}>Jump to Content</Trans></a>
|
||||
<a href={"#navigation"} className={styles.skipToContent}><Trans i18nKey={"panel:jump_to_navigation"}>Jump to Navigation</Trans></a>
|
||||
<div className={styles.topBar}>
|
||||
<div className={styles.hamburger}>
|
||||
<Hamburger toggle={setSideNavExpanded} toggled={sideNavExpanded} rounded={true} duration={.25} distance={"lg"} />
|
||||
</div>
|
||||
<Link to={"/"} className={styles.logo}><Logo/> <span>Matrix-Veles</span></Link>
|
||||
<a href={"https://veles.1in1.net/docs/intro"} target={"_blank"} rel={"noreferrer"}><ExternalLink/> <span><Trans i18nKey={"panel:documentation"}>Documentation</Trans></span></a>
|
||||
<button onClick={() => {dispatch(logOut())}}><LogOut/> Logout</button>
|
||||
<a href={"https://veles.1in1.net/docs/intro"} target={"_blank"} rel={"noreferrer"} title={t("panel:documentation", "Documentation")}><BookOpen/><span> <Trans i18nKey={"panel:documentation"}>Documentation</Trans></span></a>
|
||||
<button onClick={() => {dispatch(logOut())}} title={t("panel:logout", "Logout")}><LogOut/><span> <Trans i18nKey={"panel:logout"}>Logout</Trans></span></button>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<nav id={"navigation"}>
|
||||
<NavLink to={"/"}><Home/><span><Trans i18nKey={"panel:navigation.dashboard"}>Dashboard</Trans></span></NavLink>
|
||||
<NavLink to={"/rooms"}><MessageSquare/><span><Trans i18nKey={"panel:navigation.rooms"}>My Rooms</Trans></span></NavLink>
|
||||
<div className={styles.navUnderlay + (sideNavExpanded ? " "+styles.show : "")} onClick={() => setSideNavExpanded(false)} />
|
||||
<nav id={"navigation"} className={sideNavExpanded ? styles.expanded : ""}>
|
||||
<NavLink to={"/"} onClick={() => setSideNavExpanded(false)}><Home/><span><Trans i18nKey={"panel:navigation.dashboard"}>Dashboard</Trans></span></NavLink>
|
||||
<NavLink to={"/rooms"} onClick={() => setSideNavExpanded(false)}><MessageSquare/><span><Trans i18nKey={"panel:navigation.rooms"}>My Rooms</Trans></span></NavLink>
|
||||
<div className={styles.dropdown + (hashingExpanded?" "+styles.expanded:"")}>
|
||||
<button onClick={() => setHashingExpanded(!hashingExpanded)}>
|
||||
<ChevronRight/> <span><Trans i18nKey={"panel:navigation.hash_checker"}>Hash-Checker</Trans></span>
|
||||
</button>
|
||||
<NavLink to={"/hashing/lists"}><List/><span><Trans i18nKey={"panel:navigation.hash_lists"}>Lists</Trans></span></NavLink>
|
||||
<NavLink to={"/hashing/entries"}><ClipboardList/><span><Trans i18nKey={"panel:navigation.hash_entries"}>Entries</Trans></span></NavLink>
|
||||
<NavLink to={"/hashing/lists"} onClick={() => setSideNavExpanded(false)}><List/><span><Trans i18nKey={"panel:navigation.hash_lists"}>Lists</Trans></span></NavLink>
|
||||
<NavLink to={"/hashing/entries"} onClick={() => setSideNavExpanded(false)}><ClipboardList/><span><Trans i18nKey={"panel:navigation.hash_entries"}>Entries</Trans></span></NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
<main id={"main"}>
|
||||
|
|
|
|||
|
|
@ -4934,6 +4934,11 @@ gzip-size@^6.0.0:
|
|||
dependencies:
|
||||
duplexer "^0.1.2"
|
||||
|
||||
hamburger-react@^2.4.1:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/hamburger-react/-/hamburger-react-2.4.1.tgz#44fac99c30720fe8ed098b2a33e919b14b3e007e"
|
||||
integrity sha512-oqG9CrTVi8wM/dyQQh3JJOOfEiol9ChLOqwtjx+hFyRu0nYfe2ymNmzi2wtfQTDyExUdqETdyACZV9KZ9wpApA==
|
||||
|
||||
handle-thing@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue