unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-24 05:54:18 +00:00
Code Activity

✨ Require a minimum window size of 1366x768

Browse source
This commit is contained in:
Steffo 2021-05-27 04:30:07 +02:00
parent 980d83efe2
commit 4a62862f9c
Signed by: steffo
GPG key ID: 6965406171929D01
12 changed files with 228 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
nest_frontend/App.js
View file

@ -1,5 +1,4 @@
import React from "react"
import Layout from "./components/interactive/Layout"
import { BrowserRouter } from "react-router-dom"
import GlobalTheme from "./components/providers/GlobalTheme"
import GlobalServer from "./components/providers/GlobalServer"
@ -7,6 +6,10 @@ import GlobalUser from "./components/providers/GlobalUser"
import PageSwitcher from "./PageSwitcher"
import GlobalLanguage from "./components/providers/GlobalLanguage"
import ErrorBoundary from "./components/boundaries/ErrorBoundary"
import Sidebar from "./components/interactive/Sidebar"
import WebsiteWithSidebar from "./components/base/layout/WebsiteWithSidebar"
import Window from "./components/base/layout/Window"
import RequireSize from "./components/base/RequireSize"
/**
@ -22,11 +25,17 @@ export default function App() {
<GlobalUser>
<GlobalTheme>
<BrowserRouter>
<Layout>
<Window>
<RequireSize width={1366} height={768}>
<WebsiteWithSidebar
sidebar={<Sidebar/>}
>
<ErrorBoundary>
<PageSwitcher/>
</ErrorBoundary>
</Layout>
</WebsiteWithSidebar>
</RequireSize>
</Window>
</BrowserRouter>
</GlobalTheme>
</GlobalUser>

3
nest_frontend/LocalizationStrings.js
View file

@ -16,6 +16,9 @@ export default {
appFullName: "Noi Estraiamo Statistiche Tweet",
welcomeToNest: "Benvenuto a N.E.S.T.!",
resolutionTooSmall: "Per visualizzare correttamente questa applicazione è richiesto uno schermo con risoluzione 1366x768 o superiore.", // TODO: Tradurre
ignore: "Visualizza comunque", // TODO: Tradurre
server: "Scegli un server",
baseURL: "Base URL",
notLoggedIn: "Accesso non effettuato",

28
nest_frontend/components/base/RequireSize.js Normal file
View file

@ -0,0 +1,28 @@
import React, { useState } from "react"
import { useWindowSize } from "@react-hook/window-size/throttled"
import Alert from "./Alert"
import useStrings from "../../hooks/useStrings"
import Button from "./Button"
import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"
import makeIcon from "../../utils/makeIcon"
import BodyFlex from "./layout/BodyFlex"
export default function RequireSize({ children, width, height, ...props }) {
const [windowWidth, windowHeight] = useWindowSize()
const [warn, setWarn] = useState(true)
const strings = useStrings()
if(warn && (windowWidth < width || windowHeight < height)) {
return <BodyFlex {...props}>
<Alert color={"Red"}>
{strings.resolutionTooSmall}
</Alert>
<Button color={"Yellow"} onClick={() => setWarn(false)} style={{alignSelf: "center"}}>
{makeIcon(faExclamationTriangle)} {strings.ignore}
</Button>
</BodyFlex>
}
return children
}

28
nest_frontend/components/base/layout/WebsiteWithSidebar.js Normal file
View file

@ -0,0 +1,28 @@
import React from "react"
import Style from "./WebsiteWithSidebar.module.css"
import classNames from "classnames"
/**
* The base page layout, consisting of a {@link Sidebar} on the left and the page contents on the remaining space.
*
* @param sidebar - The sidebar to display.
* @param children - The page contents.
* @param className - Additional class(es) to be added to the grid container.
* @param props - Additional props to be passed to the grid container.
* @returns {JSX.Element}
* @constructor
*/
export default function WebsiteWithSidebar({ sidebar, children, className, ...props }) {
return (
<div className={classNames(Style.WebsiteWithSidebar, className)} {...props}>
<aside className={Style.Sidebar}>
{sidebar}
</aside>
<main className={Style.Main}>
{children}
</main>
</div>
)
}

19
nest_frontend/components/base/layout/WebsiteWithSidebar.module.css Normal file
View file

@ -0,0 +1,19 @@
.WebsiteWithSidebar {
height: 100%;
width: 100%;
display: grid;
grid-template-areas:
"a b";
grid-template-columns: auto 1fr;
grid-gap: 10px;
}
.Sidebar {
grid-area: a;
}
.Main {
grid-area: b;
}

15
nest_frontend/components/base/layout/Window.js Normal file
View file

@ -0,0 +1,15 @@
import React, { useContext } from "react"
import Style from "./Window.module.css"
import classNames from "classnames"
import ContextTheme from "../../../contexts/ContextTheme"
export default function Window({ children, className, ...props }) {
const {theme} = useContext(ContextTheme)
return (
<div className={classNames(Style.Window, theme, className)} {...props}>
{children}
</div>
)
}

9
nest_frontend/components/base/layout/Window.module.css Normal file
View file

@ -0,0 +1,9 @@
.Window {
width: 100vw;
height: 100vh;
color: var(--fg-primary);
background-color: var(--bg-primary);
padding: 10px;
}

28
nest_frontend/components/interactive/Layout.js
View file

@ -1,28 +0,0 @@
import React, { useContext } from "react"
import Style from "./Layout.module.css"
import classNames from "classnames"
import Sidebar from "../interactive/Sidebar"
import ContextTheme from "../../contexts/ContextTheme"
/**
* The base page layout, consisting of a {@link Sidebar} on the left and the page contents on the remaining space.
*
* @param children - The page contents.
* @param className - Additional class(es) to be added to the grid container.
* @param props - Additional props to be passed to the grid container.
* @returns {JSX.Element}
* @constructor
*/
export default function Layout({ children, className, ...props }) {
const { theme } = useContext(ContextTheme)
return (
<div className={classNames(theme, Style.Layout, className)} {...props}>
<Sidebar className={Style.LayoutSidebar}/>
<main className={Style.LayoutContent}>
{children}
</main>
</div>
)
}

23
nest_frontend/components/interactive/Layout.module.css
View file

@ -1,23 +0,0 @@
.Layout {
height: 100vh;
width: 100vw;
padding: 16px;
background-color: var(--bg-primary);
color: var(--fg-primary);
display: grid;
grid-template-areas:
"a b";
grid-template-columns: 250px 1fr;
grid-gap: 10px;
}
.LayoutSidebar {
grid-area: a;
}
.LayoutContent {
grid-area: b;
}

2
nest_frontend/components/interactive/Sidebar.module.css
View file

@ -3,7 +3,7 @@
flex-direction: column;
gap: 25px;
width: 100%;
width: 250px;
height: 100%;
background-color: var(--bg-light);

109
package-lock.json generated
View file

@ -13,6 +13,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@react-hook/window-size": "^3.0.7",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",
"@steffo/nest-react-wordcloud": "1.2.11",
"@testing-library/jest-dom": "^5.11.10",
@ -2379,6 +2380,68 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@react-hook/debounce": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz",
"integrity": "sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==",
"dependencies": {
"@react-hook/latest": "^1.0.2"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/event": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@react-hook/event/-/event-1.2.3.tgz",
"integrity": "sha512-WMBwLnYY2rubLeecsi4skl1imfx0oiXTgazV/1ByPT6WkmLvxUao3hC+mxps5D/+JK4Fq3uG9OWU/dn5jMtXyg==",
"dependencies": {
"@react-hook/passive-layout-effect": "^1.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/latest": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
"integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/passive-layout-effect": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
"integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/throttle": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@react-hook/throttle/-/throttle-2.2.0.tgz",
"integrity": "sha512-LJ5eg+yMV8lXtqK3lR+OtOZ2WH/EfWvuiEEu0M3bhR7dZRfTyEJKxH1oK9uyBxiXPtWXiQggWbZirMCXam51tg==",
"dependencies": {
"@react-hook/latest": "^1.0.2"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/window-size": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@react-hook/window-size/-/window-size-3.0.7.tgz",
"integrity": "sha512-bK5ed/jN+cxy0s1jt2CelCnUt7jZRseUvPQ22ZJkUl/QDOsD+7CA/6wcqC3c0QweM/fPBRP6uI56TJ48SnlVww==",
"dependencies": {
"@react-hook/debounce": "^3.0.0",
"@react-hook/event": "^1.2.1",
"@react-hook/throttle": "^2.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-leaflet/core": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
@ -24512,6 +24575,52 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
},
"@react-hook/debounce": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz",
"integrity": "sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==",
"requires": {
"@react-hook/latest": "^1.0.2"
}
},
"@react-hook/event": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@react-hook/event/-/event-1.2.3.tgz",
"integrity": "sha512-WMBwLnYY2rubLeecsi4skl1imfx0oiXTgazV/1ByPT6WkmLvxUao3hC+mxps5D/+JK4Fq3uG9OWU/dn5jMtXyg==",
"requires": {
"@react-hook/passive-layout-effect": "^1.2.0"
}
},
"@react-hook/latest": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
"integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
"requires": {}
},
"@react-hook/passive-layout-effect": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
"integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
"requires": {}
},
"@react-hook/throttle": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@react-hook/throttle/-/throttle-2.2.0.tgz",
"integrity": "sha512-LJ5eg+yMV8lXtqK3lR+OtOZ2WH/EfWvuiEEu0M3bhR7dZRfTyEJKxH1oK9uyBxiXPtWXiQggWbZirMCXam51tg==",
"requires": {
"@react-hook/latest": "^1.0.2"
}
},
"@react-hook/window-size": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@react-hook/window-size/-/window-size-3.0.7.tgz",
"integrity": "sha512-bK5ed/jN+cxy0s1jt2CelCnUt7jZRseUvPQ22ZJkUl/QDOsD+7CA/6wcqC3c0QweM/fPBRP6uI56TJ48SnlVww==",
"requires": {
"@react-hook/debounce": "^3.0.0",
"@react-hook/event": "^1.2.1",
"@react-hook/throttle": "^2.2.0"
}
},
"@react-leaflet/core": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",

1
package.json
View file

@ -11,6 +11,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@react-hook/window-size": "^3.0.7",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",
"@steffo/nest-react-wordcloud": "1.2.11",
"@testing-library/jest-dom": "^5.11.10",