From da7c988469ce2c3e17173f72416808ddb355d224 Mon Sep 17 00:00:00 2001 From: Nidboj132 Date: Sat, 29 Apr 2023 13:00:05 +0200 Subject: ui update --- frontend/package-lock.json | 69 +++++++++ frontend/package.json | 3 + frontend/public/index.html | 1 - frontend/src/App.css | 15 +- frontend/src/App.js | 19 ++- frontend/src/components/main.css | 11 ++ frontend/src/components/main.js | 16 +++ frontend/src/components/sidebar.css | 158 ++++++++++++++------- frontend/src/components/sidebar.js | 148 ++++++++++++------- frontend/src/fonts/BarlowCondensed-Bold.ttf | Bin 0 -> 104316 bytes frontend/src/fonts/BarlowCondensed-Regular.ttf | Bin 0 -> 97132 bytes frontend/src/fonts/BarlowSemiCondensed-Regular.ttf | Bin 0 -> 100096 bytes frontend/src/fonts/D-DIN.otf | Bin 59860 -> 0 bytes frontend/src/imgs/0.png | Bin 41216 -> 0 bytes frontend/src/imgs/1.png | Bin 3308 -> 2011 bytes frontend/src/imgs/2.png | Bin 4093 -> 1833 bytes frontend/src/imgs/3.png | Bin 9600 -> 1517 bytes frontend/src/imgs/4.png | Bin 12164 -> 4517 bytes frontend/src/imgs/5.png | Bin 19087 -> 4112 bytes frontend/src/imgs/6.png | Bin 14501 -> 2715 bytes frontend/src/imgs/7.png | Bin 12182 -> 1608 bytes frontend/src/imgs/8.png | Bin 5605 -> 1584 bytes frontend/src/imgs/9.png | Bin 0 -> 6037 bytes frontend/src/imgs/logo.png | Bin 0 -> 67124 bytes 24 files changed, 333 insertions(+), 107 deletions(-) create mode 100644 frontend/src/components/main.css create mode 100644 frontend/src/components/main.js create mode 100644 frontend/src/fonts/BarlowCondensed-Bold.ttf create mode 100644 frontend/src/fonts/BarlowCondensed-Regular.ttf create mode 100644 frontend/src/fonts/BarlowSemiCondensed-Regular.ttf delete mode 100644 frontend/src/fonts/D-DIN.otf delete mode 100644 frontend/src/imgs/0.png create mode 100644 frontend/src/imgs/9.png create mode 100644 frontend/src/imgs/logo.png diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0f8593d..0c4569a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,9 @@ "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "react-router-dom": "^6.10.0" } }, "node_modules/@adobe/css-tools": { @@ -3082,6 +3085,15 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz", + "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14321,6 +14333,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz", + "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==", + "dev": true, + "dependencies": { + "@remix-run/router": "1.5.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz", + "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==", + "dev": true, + "dependencies": { + "@remix-run/router": "1.5.0", + "react-router": "6.10.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -19245,6 +19289,12 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz", + "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==", + "dev": true + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -27254,6 +27304,25 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz", + "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==", + "dev": true, + "requires": { + "@remix-run/router": "1.5.0" + } + }, + "react-router-dom": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz", + "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==", + "dev": true, + "requires": { + "@remix-run/router": "1.5.0", + "react-router": "6.10.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 149bb8e..123a434 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,5 +34,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "react-router-dom": "^6.10.0" } } diff --git a/frontend/public/index.html b/frontend/public/index.html index 3af82f1..f847ea0 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -4,7 +4,6 @@ - lp boards diff --git a/frontend/src/App.css b/frontend/src/App.css index 78dea16..c96f197 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,9 +1,20 @@ body { + overflow: hidden; background-color: #141520; margin: 0; } @font-face { - font-family: 'D-DIN'; - src: local('D-DIN'), url(./fonts/D-DIN.otf) format('oft'); + font-family: 'BarlowCondensed-Bold'; + src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype'); +} + +@font-face { + font-family: 'BarlowCondensed-Regular'; + src: local('BarlowCondensed-Regular'), url(./fonts/BarlowCondensed-Regular.ttf) format('truetype'); +} + +@font-face { + font-family: 'BarlowSemiCondensed-Regular'; + src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-Regular.ttf) format('truetype'); } \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index e853b02..26aec98 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,16 +1,31 @@ import React from 'react'; +import { BrowserRouter, Routes, Route} from "react-router-dom"; import Sidebar from "./components/sidebar.js" +import Main from "./components/main.js" import "./App.css"; -import "./fonts/D-DIN.otf" export default function App() { - + return ( <> + + + }> + }> + }> + }> + }> + }> + }> + }> + }> + }> + + ) } \ No newline at end of file diff --git a/frontend/src/components/main.css b/frontend/src/components/main.css new file mode 100644 index 0000000..990bc41 --- /dev/null +++ b/frontend/src/components/main.css @@ -0,0 +1,11 @@ +main { + overflow: auto; + position: relative; + width: calc(100% - 350px); + height: 100vh; + left: 350px; + /* background-color: red; */ + font-size: 40px; + font-family: BarlowSemiCondensed-Regular; + color: white; +} diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js new file mode 100644 index 0000000..18b0f5a --- /dev/null +++ b/frontend/src/components/main.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import "../App.css" +import "./main.css"; + +export default function Main(props) { + + +return ( +
+

{props.text}

+
+ ) +} + + diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css index 9742f0e..23d46ad 100644 --- a/frontend/src/components/sidebar.css +++ b/frontend/src/components/sidebar.css @@ -1,73 +1,123 @@ #sidebar { + overflow: hidden; + position: absolute; background-color: #2b2e46; width: 320px; height: 100vh; - min-height: 840px; + min-height: 670px; + } -#sidebar>div:nth-child(1){height: 140px;} /* logo */ + /* logo */ +#logo{ + display: grid; + grid-template-columns: 60px 200px; -button#side-grid { - border: 0; - background-color: #202232; - border-radius: 20px; - font-size: 18px; - color: #cdcfdf; - width: 300px; + + height: 80px; + padding: 20px 0 20px 30px; +} + +#logo-text{ + font-family: BarlowCondensed-Regular; + font-size: 42px; + color: #FFF; + line-height: 38px; +} +span>b{ + font-family: BarlowCondensed-Bold; + font-size: 56px; +} + + /* Sidelist */ +#sidebar-list{ + z-index: 2; + background-color: #2b2e46; + position: relative; + height: calc(100vh - 120px); + width: 320px; + /* min-height: 670px; */ + transition: width .3s; +} +#sidebar-toplist>button:nth-child(1){margin-top: 5px;} +#sidebar-toplist{ - transition: - background-color .2s, - border-radius .5s, - width .3s; + margin: 0 5px 0 5px; + display: grid; + height: 400px; + grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto; } -span { - font-family: D-DIN; - opacity: 1; + +#sidebar-bottomlist{ + display: grid; + + margin: 0 5px 0 5px; + justify-items: left; + grid-template-rows: calc(100vh - 670px) 50px 50px 50px; + grid-template-rows: calc(100vh - 670px) 50px 50px 50px; +} +button>span{ + font-family: BarlowSemiCondensed-Regular; + font-size: 18px; + color: #CDCFDF; + height: 32px; + line-height: 28px; transition: opacity .1s; } -button#side-grid:hover { - background-color: #141520 !important; - border-radius: 10px !important; +button{ + display: grid; + grid-template-columns: 50px auto; + place-items: left; + text-align: left; + + background-color: inherit; cursor: pointer; -} + border: none; + width: 310px; + height: 40px; + border-radius: 20px; + padding: 5px 0 0 6px; -button>img{ - height: 20px; - float: left; - padding-left: 4px; - filter: invert(0.8); - scale: 1.1; + transition: + width .3s, + background-color .3s; + /* outline: red dotted 1px; */ } +/* button>*{outline: red 1px dotted;} */ -#side-menu { /* just the menu button */ - border: 0; - position: absolute; - background-color: transparent; - left: 6px; top: 6px; - width: 40px; height: 40px; - cursor: pointer; +button>img { + scale: 1.1; + width: 20px; + padding: 5px; } -#sidebar-list { /* buttons */ + /* Maplist */ +#sidebar>div:nth-child(3){ + position: relative; + background-color: #202232; + color: #424562; z-index: 1; - min-height: 700px; - width: 308px; height: calc(100vh - 140px); /* calc - logo */ - position: absolute; - background-color: #2b2e46; - display: grid; - padding: 0 6px; - row-gap: 8px; - grid-template-rows: - 60px 40px 40px - 30px 40px 40px 40px - 30px 40px 40px; + + left: 52px; + top: calc(-100vh + 120px); + width: 268px; height: calc(100vh - 120px); + min-height: 550px; +} +input[type=text]{ + margin: 10px 0 0 6px; + padding: 1px 0px 1px 16px; + width: 240px; + height: 30px; - transition: width .3s; -} + font-family: BarlowSemiCondensed-Regular; + font-size: 20px; + + background-color: #161723; + color:#CDCFDF; + + border: 0; + border-radius: 20px; -#sidebar-content { - position: absolute; - background-color: #202232; - left: 52px; - min-height: 700px; - width: 268px; height: calc(100vh - 140px); /* calc - logo */ -} \ No newline at end of file +} +input[type=text]::placeholder{color:#2b2e46} +input[type=text]:focus{outline: inherit;} +a{text-decoration: none;height: 40px;} \ No newline at end of file diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js index 0bc5a1e..d5a55fd 100644 --- a/frontend/src/components/sidebar.js +++ b/frontend/src/components/sidebar.js @@ -1,7 +1,9 @@ import React from 'react'; +import { Link, useLocation } from "react-router-dom"; +import "../App.css" import "./sidebar.css"; -import img0 from "../imgs/0.png" +import logo from "../imgs/logo.png" import img1 from "../imgs/1.png" import img2 from "../imgs/2.png" import img3 from "../imgs/3.png" @@ -10,19 +12,16 @@ import img5 from "../imgs/5.png" import img6 from "../imgs/6.png" import img7 from "../imgs/7.png" import img8 from "../imgs/8.png" +import img9 from "../imgs/9.png" +export default function Sidebar(x) { -export default function Sidebar() { -const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons -const [sidebar, setSidebar] = React.useState(); - - -// Locks button for 200ms before it can be clicked again, prevents spam +// Locks search button for 300ms before it can be clicked again, prevents spam const [isLocked, setIsLocked] = React.useState(false); function HandleLock(arg) { if (!isLocked) { setIsLocked(true); - setTimeout(() => setIsLocked(false), 200); + setTimeout(() => setIsLocked(false), 300); SidebarHide(arg) } } @@ -30,66 +29,119 @@ if (!isLocked) { // Clicked buttons function SidebarClick(x){ -const btn = document.querySelectorAll("button#side-grid"); +const btn = document.querySelectorAll("button"); +if(sidebar===1){setSidebar(0);SidebarHide()} -sidebar_text.forEach((e,i) =>( - btn[i].style.backgroundColor="#202232", - btn[i].style.borderRadius="20px" -)) +btn.forEach((e,i) =>{ + btn[i].style.backgroundColor="inherit" +}) +btn[x].style.backgroundColor="#202232" -btn[x].style.backgroundColor="#141520" -btn[x].style.borderRadius="10px" } // The menu button +const [sidebar, setSidebar] = React.useState(); + function SidebarHide(){ -const btn = document.querySelectorAll("button#side-grid"); -const span = document.querySelectorAll("#side-grid>span"); +const btn = document.querySelectorAll("button"); +const span = document.querySelectorAll("button>span"); const side = document.querySelector("#sidebar-list"); if(sidebar===1){ setSidebar(0) - side.style.width="308px" - sidebar_text.forEach((e, i) =>( - btn[i].style.width="300px", - setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200) - )) + side.style.width="320px" + btn.forEach((e, i) =>{ + e.style.width="310px" + setTimeout(() => {span[i].style.opacity="1"}, 100) + }) + side.style.zIndex="2" } else { side.style.width="40px"; setSidebar(1) - sidebar_text.forEach((e,i) =>( - btn[i].style.width="40px", - span[i].style.opacity="0", - setTimeout(() => {span[i].textContent=""}, 100) - )) + btn.forEach((e,i) =>{ + e.style.width="40px" + span[i].style.opacity="0" + }) + setTimeout(() => {side.style.zIndex="0"}, 300); } } -return ( -