aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components
diff options
context:
space:
mode:
authorNidboj132 <lol2s@vp.plm>2023-04-29 13:00:05 +0200
committerNidboj132 <lol2s@vp.plm>2023-04-29 13:00:05 +0200
commitda7c988469ce2c3e17173f72416808ddb355d224 (patch)
treec39842b00587c003b567f76eda9a20a6069d3ab9 /frontend/src/components
parentdoc: added tags (diff)
downloadlphub-da7c988469ce2c3e17173f72416808ddb355d224.tar.gz
lphub-da7c988469ce2c3e17173f72416808ddb355d224.tar.bz2
lphub-da7c988469ce2c3e17173f72416808ddb355d224.zip
ui update
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/main.css11
-rw-r--r--frontend/src/components/main.js16
-rw-r--r--frontend/src/components/sidebar.css158
-rw-r--r--frontend/src/components/sidebar.js148
4 files changed, 231 insertions, 102 deletions
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 @@
1main {
2 overflow: auto;
3 position: relative;
4 width: calc(100% - 350px);
5 height: 100vh;
6 left: 350px;
7 /* background-color: red; */
8 font-size: 40px;
9 font-family: BarlowSemiCondensed-Regular;
10 color: white;
11}
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 @@
1import React from 'react';
2
3import "../App.css"
4import "./main.css";
5
6export default function Main(props) {
7
8
9return (
10 <main>
11 <h1>{props.text}</h1>
12 </main>
13 )
14}
15
16
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 @@
1#sidebar { 1#sidebar {
2 overflow: hidden;
3 position: absolute;
2 background-color: #2b2e46; 4 background-color: #2b2e46;
3 width: 320px; height: 100vh; 5 width: 320px; height: 100vh;
4 min-height: 840px; 6 min-height: 670px;
7
5} 8}
6 9
7#sidebar>div:nth-child(1){height: 140px;} /* logo */ 10 /* logo */
11#logo{
12 display: grid;
13 grid-template-columns: 60px 200px;
8 14
9button#side-grid { 15
10 border: 0; 16 height: 80px;
11 background-color: #202232; 17 padding: 20px 0 20px 30px;
12 border-radius: 20px; 18}
13 font-size: 18px; 19
14 color: #cdcfdf; 20#logo-text{
15 width: 300px; 21 font-family: BarlowCondensed-Regular;
22 font-size: 42px;
23 color: #FFF;
24 line-height: 38px;
25}
26span>b{
27 font-family: BarlowCondensed-Bold;
28 font-size: 56px;
29}
30
31 /* Sidelist */
32#sidebar-list{
33 z-index: 2;
34 background-color: #2b2e46;
35 position: relative;
36 height: calc(100vh - 120px);
37 width: 320px;
38 /* min-height: 670px; */
39 transition: width .3s;
40}
41#sidebar-toplist>button:nth-child(1){margin-top: 5px;}
42#sidebar-toplist{
16 43
17 transition: 44 margin: 0 5px 0 5px;
18 background-color .2s, 45 display: grid;
19 border-radius .5s, 46 height: 400px;
20 width .3s; 47 grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
21} 48}
22span { 49
23 font-family: D-DIN; 50#sidebar-bottomlist{
24 opacity: 1; 51 display: grid;
52
53 margin: 0 5px 0 5px;
54 justify-items: left;
55 grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
56 grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
57}
58button>span{
59 font-family: BarlowSemiCondensed-Regular;
60 font-size: 18px;
61 color: #CDCFDF;
62 height: 32px;
63 line-height: 28px;
25 transition: opacity .1s; 64 transition: opacity .1s;
26} 65}
27button#side-grid:hover { 66button{
28 background-color: #141520 !important; 67 display: grid;
29 border-radius: 10px !important; 68 grid-template-columns: 50px auto;
69 place-items: left;
70 text-align: left;
71
72 background-color: inherit;
30 cursor: pointer; 73 cursor: pointer;
31} 74 border: none;
75 width: 310px;
76 height: 40px;
77 border-radius: 20px;
78 padding: 5px 0 0 6px;
32 79
33button>img{ 80 transition:
34 height: 20px; 81 width .3s,
35 float: left; 82 background-color .3s;
36 padding-left: 4px; 83 /* outline: red dotted 1px; */
37 filter: invert(0.8);
38 scale: 1.1;
39} 84}
85/* button>*{outline: red 1px dotted;} */
40 86
41#side-menu { /* just the menu button */ 87button>img {
42 border: 0; 88 scale: 1.1;
43 position: absolute; 89 width: 20px;
44 background-color: transparent; 90 padding: 5px;
45 left: 6px; top: 6px;
46 width: 40px; height: 40px;
47 cursor: pointer;
48} 91}
49 92
50#sidebar-list { /* buttons */ 93 /* Maplist */
94#sidebar>div:nth-child(3){
95 position: relative;
96 background-color: #202232;
97 color: #424562;
51 z-index: 1; 98 z-index: 1;
52 min-height: 700px; 99
53 width: 308px; height: calc(100vh - 140px); /* calc - logo */ 100 left: 52px;
54 position: absolute; 101 top: calc(-100vh + 120px);
55 background-color: #2b2e46; 102 width: 268px; height: calc(100vh - 120px);
56 display: grid; 103 min-height: 550px;
57 padding: 0 6px; 104}
58 row-gap: 8px; 105input[type=text]{
59 grid-template-rows: 106 margin: 10px 0 0 6px;
60 60px 40px 40px 107 padding: 1px 0px 1px 16px;
61 30px 40px 40px 40px 108 width: 240px;
62 30px 40px 40px; 109 height: 30px;
63 110
64 transition: width .3s; 111 font-family: BarlowSemiCondensed-Regular;
65} 112 font-size: 20px;
113
114 background-color: #161723;
115 color:#CDCFDF;
116
117 border: 0;
118 border-radius: 20px;
66 119
67#sidebar-content { 120}
68 position: absolute; 121input[type=text]::placeholder{color:#2b2e46}
69 background-color: #202232; 122input[type=text]:focus{outline: inherit;}
70 left: 52px; 123a{text-decoration: none;height: 40px;} \ No newline at end of file
71 min-height: 700px;
72 width: 268px; height: calc(100vh - 140px); /* calc - logo */
73} \ 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 @@
1import React from 'react'; 1import React from 'react';
2import { Link, useLocation } from "react-router-dom";
2 3
4import "../App.css"
3import "./sidebar.css"; 5import "./sidebar.css";
4import img0 from "../imgs/0.png" 6import logo from "../imgs/logo.png"
5import img1 from "../imgs/1.png" 7import img1 from "../imgs/1.png"
6import img2 from "../imgs/2.png" 8import img2 from "../imgs/2.png"
7import img3 from "../imgs/3.png" 9import img3 from "../imgs/3.png"
@@ -10,19 +12,16 @@ import img5 from "../imgs/5.png"
10import img6 from "../imgs/6.png" 12import img6 from "../imgs/6.png"
11import img7 from "../imgs/7.png" 13import img7 from "../imgs/7.png"
12import img8 from "../imgs/8.png" 14import img8 from "../imgs/8.png"
15import img9 from "../imgs/9.png"
13 16
17export default function Sidebar(x) {
14 18
15export default function Sidebar() { 19// Locks search button for 300ms before it can be clicked again, prevents spam
16const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons
17const [sidebar, setSidebar] = React.useState();
18
19
20// Locks button for 200ms before it can be clicked again, prevents spam
21const [isLocked, setIsLocked] = React.useState(false); 20const [isLocked, setIsLocked] = React.useState(false);
22function HandleLock(arg) { 21function HandleLock(arg) {
23if (!isLocked) { 22if (!isLocked) {
24 setIsLocked(true); 23 setIsLocked(true);
25 setTimeout(() => setIsLocked(false), 200); 24 setTimeout(() => setIsLocked(false), 300);
26 SidebarHide(arg) 25 SidebarHide(arg)
27 } 26 }
28} 27}
@@ -30,66 +29,119 @@ if (!isLocked) {
30 29
31// Clicked buttons 30// Clicked buttons
32function SidebarClick(x){ 31function SidebarClick(x){
33const btn = document.querySelectorAll("button#side-grid"); 32const btn = document.querySelectorAll("button");
34 33
34if(sidebar===1){setSidebar(0);SidebarHide()}
35 35
36sidebar_text.forEach((e,i) =>( 36btn.forEach((e,i) =>{
37 btn[i].style.backgroundColor="#202232", 37 btn[i].style.backgroundColor="inherit"
38 btn[i].style.borderRadius="20px" 38})
39)) 39btn[x].style.backgroundColor="#202232"
40 40
41btn[x].style.backgroundColor="#141520"
42btn[x].style.borderRadius="10px"
43} 41}
44 42
45 43
46// The menu button 44// The menu button
45const [sidebar, setSidebar] = React.useState();
46
47function SidebarHide(){ 47function SidebarHide(){
48const btn = document.querySelectorAll("button#side-grid"); 48const btn = document.querySelectorAll("button");
49const span = document.querySelectorAll("#side-grid>span"); 49const span = document.querySelectorAll("button>span");
50const side = document.querySelector("#sidebar-list"); 50const side = document.querySelector("#sidebar-list");
51 51
52if(sidebar===1){ 52if(sidebar===1){
53 setSidebar(0) 53 setSidebar(0)
54 side.style.width="308px" 54 side.style.width="320px"
55 sidebar_text.forEach((e, i) =>( 55 btn.forEach((e, i) =>{
56 btn[i].style.width="300px", 56 e.style.width="310px"
57 setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200) 57 setTimeout(() => {span[i].style.opacity="1"}, 100)
58 )) 58 })
59 side.style.zIndex="2"
59} else { 60} else {
60 side.style.width="40px"; 61 side.style.width="40px";
61 setSidebar(1) 62 setSidebar(1)
62 sidebar_text.forEach((e,i) =>( 63 btn.forEach((e,i) =>{
63 btn[i].style.width="40px", 64 e.style.width="40px"
64 span[i].style.opacity="0", 65 span[i].style.opacity="0"
65 setTimeout(() => {span[i].textContent=""}, 100) 66 })
66 )) 67 setTimeout(() => {side.style.zIndex="0"}, 300);
67 } 68 }
68} 69}
69 70
70return ( 71const location = useLocation()
71<div id='sidebar'> 72React.useEffect(()=>{
72 <div> 73 if(location.pathname==="/"){SidebarClick(1)}
73 <img src={img0} alt="" width='320px' /> 74 if(location.pathname.includes("news")){SidebarClick(2)}
74 </div> 75 if(location.pathname.includes("records")){SidebarClick(3)}
75 <div id='sidebar-list'> 76 if(location.pathname.includes("leaderboards")){SidebarClick(4)}
76 <button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button> 77 if(location.pathname.includes("discussions")){SidebarClick(5)}
77 <p id='side-grid'></p> {/* p's are spaces between buttons */} 78 if(location.pathname.includes("scorelog")){SidebarClick(6)}
78 <button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button> 79 if(location.pathname.includes("profile")){SidebarClick(7)}
79 <button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button> 80 if(location.pathname.includes("rules")){SidebarClick(8)}
80 <p id='side-grid'></p> 81 if(location.pathname.includes("about")){SidebarClick(9)}
81 <button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button> 82 // console.log(location.pathname)
82 <button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button> 83 // eslint-disable-next-line react-hooks/exhaustive-deps
83 <button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button> 84}, [location])
84 <p id='side-grid'></p>
85 <button onClick={()=>SidebarClick(5)} id='side-grid'><img src={img7} alt="" /><span>Leaderboards</span></button>
86 <button onClick={()=>SidebarClick(6)} id='side-grid'><img src={img8} alt="" /><span>Score&nbsp;log</span></button>
87 </div>
88 <div id='sidebar-content'>
89 85
86return (
87 <div id='sidebar'>
88 <div id='logo'> {/* logo */}
89 <img src={logo} alt="" height={"80px"}/>
90 <div id='logo-text'>
91 <span><b>PORTAL 2</b></span><br/>
92 <span>Least Portals</span>
93 </div>
94 </div>
95 <div id='sidebar-list'> {/* List */}
96 <div id='sidebar-toplist'> {/* Top */}
97 <button onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>
98 <span></span>
99
100 <Link to="/" tabIndex={-1}>
101 <button><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
102 </Link>
103
104 <Link to="/news" tabIndex={-1}>
105 <button><img src={img3} alt="" /><span>News</span></button>
106 </Link>
107
108 <Link to="/records" tabIndex={-1}>
109 <button><img src={img4} alt="" /><span>Records</span></button>
110 </Link>
111
112 <Link to="/leaderboards" tabIndex={-1}>
113 <button><img src={img5} alt="" /><span>Leaderboards</span></button>
114 </Link>
115
116 <Link to="/discussions" tabIndex={-1}>
117 <button><img src={img6} alt="" /><span>Discussions</span></button>
118 </Link>
119
120 <Link to="/scorelog" tabIndex={-1}>
121 <button><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
122 </Link>
123 </div>
124 <div id='sidebar-bottomlist'>
125 <span></span>
126
127 <Link to="/profile" tabIndex={-1}>
128 <button><img src={img1} alt="" /><span>Login</span></button>
129 </Link>
130
131 <Link to="/rules" tabIndex={-1}>
132 <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>
133 </Link>
134
135 <Link to="/about" tabIndex={-1}>
136 <button><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>
137 </Link>
138 </div>
139 </div>
140 <div>
141 <input type="text" placeholder='Search for map or a player...'/>
142 </div>
90 </div> 143 </div>
91</div> 144 )
92 )
93} 145}
94 146
95 147
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-09 03:38:06 +0000