diff --git a/src/components/Questions.module.css b/src/components/Questions.module.css index 78254f8..7cdaa81 100644 --- a/src/components/Questions.module.css +++ b/src/components/Questions.module.css @@ -11,4 +11,4 @@ .questionBg { background-color: #1b1b1c; padding-bottom: 5px; -} \ No newline at end of file +} diff --git a/src/components/layout.js b/src/components/layout.js index 1a71632..f5df6db 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -55,65 +55,62 @@ function Donate() { ) } -function MessageButton({ - userSpecificMotd, - setShowMotdModal, - refetchGlobalData, -}) { +function UserStatus({ userId, unreads }) { return ( -
+
+
+ UID: {userId || '...'} +
+ + + 💬 + {unreads && unreads.length > 0 ?
{unreads.length}
: null} + + +
{ - if (!userSpecificMotd) { - return - } - setShowMotdModal(true) - if (userSpecificMotd.seen) { - return - } - fetch(constants.apiUrl + 'infos', { - method: 'POST', + fetch(constants.apiUrl + 'logout', { + method: 'GET', credentials: 'include', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, - body: JSON.stringify({ - userSpecificMotdSeen: true, - }), }) - .then((resp) => { - return resp.json() - }) - .then(() => { - refetchGlobalData() - }) + location.reload() }} - style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }} - title={ - userSpecificMotd && !userSpecificMotd.seen ? 'Új üzeneted van!' : '' - } > - {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'} + Logout
) } -export default function Layout({ - children, - router, - globalData, - refetchGlobalData, -}) { +function MenuIcon({ setSidebarOpen, sidebarOpen }) { + return ( +
{ + setSidebarOpen(!sidebarOpen) + }} + className={styles.menuicon} + > +
+
+
+
+ ) +} + +export default function Layout({ children, router, globalData }) { const [sidebarOpen, setSidebarOpen] = useState(true) const [windowSize, setWindowSize] = useState([100, 200]) - const [showMotdModal, setShowMotdModal] = useState(false) const [donateShowing, setDonateShowing] = useState(false) - const [showNewMsgModal, setShowNewMsgModal] = useState(true) const userId = globalData.userId - const userSpecificMotd = globalData.userSpecificMotd + const unreads = globalData.unreads useEffect(() => { setDonateShowing(!!router.query.donate) @@ -143,7 +140,7 @@ export default function Layout({ const snowflakeCount = (windowSize[0] + windowSize[1]) / 26 return ( -
+ <> {renderSnow() && (
)} -
-
- { - setSidebarOpen(!sidebarOpen) - }} - className="menuicon" - > -
-
-
- -
- - - FryLabs - - -
+
+ + + + FryLabs + + +
+ + Teendők + + + Jelszó kérés + + + Ranklista +
+
+ +
+
{sidebarOpen ? ( <> -
- -
- UID: {userId || '...'} -
-
{ - fetch(constants.apiUrl + 'logout', { - method: 'GET', - credentials: 'include', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - }) - location.reload() - }} - > - Logout -
-
) : null}
@@ -254,27 +221,8 @@ export default function Layout({ ) : null} - {showMotdModal ? ( - { - setShowMotdModal(false) - }} - > -
Üzenet admintól:
-
- - ) : null} - {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? ( - { - setShowNewMsgModal(false) - }} - > - Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez! - - ) : null} -
{children}
+
{children}
-
+ ) } diff --git a/src/components/layout.module.css b/src/components/layout.module.css index 441db20..4f99d14 100644 --- a/src/components/layout.module.css +++ b/src/components/layout.module.css @@ -1,24 +1,83 @@ -.modalHead { - text-align: center; - font-size: 22px; - font-weight: 700; - padding-top: 0px; - margin-top: 0px; - padding-bottom: 20px; - letter-spacing: 3px; -} - -.donateLogoContainer { +.topBar { display: flex; - justify-content: center; + align-items: center; + position: fixed; + background-color: var(--background-color); + z-index: 2; + width: 100%; + max-width: 1200px; + border-bottom: 1px solid var(--primary-color); + + height: 45px; } -.donateLogoContainer img { - max-width: 100px; - margin: 5px; +.topBar img { + display: block; + max-height: 45px; + width: auto; + height: auto; + border: none; + margin: 0px 15px; +} + +.topBarLinks { + display: flex; + align-items: center; + word-wrap: break-word; +} + +.topBarLinks > * { + text-align: center; + padding: 0px 10px; + text-decoration: none; +} + +.topBarLinks > *:hover { + background-color: var(--hoover-color); border-radius: 5px; } +.sidebar { + top: 45px; + display: flex; + flex-direction: column; + + width: 150px; + background-color: #222426; + position: fixed; + height: 100%; + overflow: auto; +} + +@media screen and (max-width: 700px) { + .sidebar { + width: 100%; + height: auto; + position: relative; + } + + .sidebar a { + text-align: center; + float: none; + } +} + +.content { + height: 100%; + margin-left: 150px; + margin-top: 45px; + padding: 1px 7px; + + word-wrap: break-word; +} + +@media screen and (max-width: 700px) { + div.content { + padding: 1px 0px; + margin-left: 0; + } +} + .sidebarLinks > a { border: 0.5px solid transparent; display: block; @@ -48,3 +107,116 @@ text-shadow: 2px 2px 8px black; transition: width 0.5s, height 0.5s, ease-out 0.5s; } + +.userStatus { + display: flex; + + height: 40px; + margin: 3px; + align-items: center; + text-align: center; + justify-content: space-between; +} + +.modalHead { + text-align: center; + font-size: 22px; + font-weight: 700; + padding-top: 0px; + margin-top: 0px; + padding-bottom: 20px; + letter-spacing: 3px; +} + +.donateLogoContainer { + display: flex; + justify-content: center; +} + +.donateLogoContainer img { + max-width: 100px; + margin: 5px; + border-radius: 5px; +} + +.menuicon div { + display: none; +} + +@media screen and (max-width: 700px) { + .menuicon div { + display: block; + margin: 6px 0; + width: 30px; + height: 5px; + background-color: var(--bright-color); + } + + .menuicon:hover { + background-color: var(--hoover-color); + } + + .menuicon { + cursor: pointer; + display: inline; + } +} + +.logout { + margin: 0px 5px; + padding: 3px; + cursor: pointer; + font-size: 15.5px; +} + +.logout:hover { + color: #fff; +} + +.userStatus > a { + text-decoration: none; + font-size: 27px; +} + +.msgs { + font-size: 15px; +} + +.msgs :first-child { + font-size: 27px; + margin-left: 4px; +} + +.msgs > div { + padding: 2px 6px; + font-size: 13.5px; +} + +.unreadNotification { + height: 45px; +} + +.unreadNotification > span { + top: 8px; + display: inline-block; + position: relative; +} + +.unreadNotification > div { + display: inline-block; + right: 10px; + top: 10px; + position: relative; + + background-color: red; + font-size: 14px; + border-radius: 5px; + padding: 0px 3px; +} + +@media screen and (max-width: 700px) { + .unreadNotification > div { + right: -10px; + top: -23px; + } +} diff --git a/src/components/searchBar.module.css b/src/components/searchBar.module.css index 983af43..7d8ab97 100644 --- a/src/components/searchBar.module.css +++ b/src/components/searchBar.module.css @@ -1,5 +1,5 @@ .searchContainer { - width: 100%; + width: 97%; display: flex; justify-content: center; margin-left: 10px; diff --git a/src/constants.json b/src/constants.json index 8650745..dec44ec 100644 --- a/src/constants.json +++ b/src/constants.json @@ -1,6 +1,6 @@ { "siteUrl": "https://qmining.frylabs.net/", - "apiUrl": "https://api.frylabs.net/", + "apiUrl": "http://localhost:8080/", "mobileWindowWidth": 700, "maxQuestionsToRender": 250 } diff --git a/src/data/tabs.json b/src/data/tabs.json index 833aacf..46f1c43 100644 --- a/src/data/tabs.json +++ b/src/data/tabs.json @@ -15,18 +15,6 @@ "href": "/userfiles", "text": "Tanulás segédanyagok" }, - "pwRequest": { - "href": "/pwRequest", - "text": "Jelszó generálás" - }, - "contribute": { - "href": "/contribute", - "text": "Teendők" - }, - "ranklist": { - "href": "/ranklist", - "text": "Ranklista" - }, "faq": { "href": "/faq", "text": "GYIK" diff --git a/src/defaultStyles.css b/src/defaultStyles.css index 9f9fb92..ec3dce6 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -1,6 +1,7 @@ :root { --text-color: #f2cb05; --primary-color: #f2cb05; + --primary-color-fade: #3f3503; --bright-color: #f2f2f2; --background-color: #222426; --hoover-color: #393939; @@ -9,13 +10,27 @@ @import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap'); +html { + height: calc(100vh - 50px); +} + body { + display: flex; + justify-content: center; + + margin: 0px; + height: 100%; font-family: 'Kameron', serif; font-family: 'Overpass Mono', monospace; color: #999999; cursor: default; } +#__next { + height: 100%; + width: 1200px; +} + img { margin: 5px; max-width: 90%; @@ -64,132 +79,10 @@ input:focus { } .link { - margin: 20px; + margin: 10px; font-size: 20px; } -.sidebarLink { - color: var(--text-color); - text-decoration: none; -} - -.sidebar { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - width: 200px; - background-color: #222426; - position: fixed; - height: 100%; - overflow: auto; -} - -.content { - margin-left: 200px; - padding: 1px 15px; -} - -.menuicon div { - height: 5px; - background-color: var(--bright-color); - margin: 0px 0; - display: none; - width: 30px; -} - -.sidebarheader { - font-size: 40px; - color: var(--bright-color); - display: flex; - text-align: center; -} - -.headercontainer { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: nowrap; - position: relative; - overflow: hidden; - padding-top: 15px; - padding-bottom: 17px; - padding-right: 2px; - padding-left: 2px; -} - -@media screen and (max-width: 700px) { - .sidebar { - width: 100%; - height: auto; - position: relative; - } - - .sidebar a { - float: left; - } - - div.content { - padding: 0px; - margin-left: 0; - } -} - -@media screen and (max-width: 700px) { - .menuicon div { - display: block; - margin: 6px 0; - } - - .sidebar a { - text-align: center; - float: none; - } - - .menuicon { - display: inline; - } - - .sidebaritemsconainer { - display: inline; - } - - .sidebarheader { - position: absolute; - left: 50%; - top: 50%; - padding-top: 20px; - transform: translateX(-50%) translateY(-50%); - } - - .codecontainer { - margin-left: 0px; - margin-right: 0px; - } - - .sitedescription { - width: 100%; - margin: 0 auto; - } - - .rtfmImage { - text-align: center; - display: flex; - justify-content: center; - border: 2px solid white; - width: 100%; - } - - .manualUsage { - display: flex; - flex-direction: column; - } -} - -.endofpage { - padding-bottom: 20px; -} - .questionContainer { margin: 6px; padding: 10px; @@ -225,10 +118,6 @@ input:focus { font-size: 30px; } -.link { - margin: 10px; -} - .subjectSelector { overflow: auto; height: auto; @@ -260,12 +149,6 @@ input:focus { color: white; } -.rtfmImage { - text-align: center; - justify-content: center; - margin: 0px 10px; -} - .warning { color: red; font-weight: 100; @@ -299,55 +182,15 @@ input:focus { margin: 0px; } -.manualUsage { - margin-top: 5px; - display: flex; -} - .manualBody { text-align: justify; } -.userStatus { - display: flex; - margin-top: auto; - margin-bottom: 20px; - background-color: #373737; - align-items: center; - text-align: center; - justify-content: space-between; -} - -.msgs { - font-size: 15px; -} - .uid { font-size: 14px; margin-right: 10px; } -.logout { - padding: 6px; - margin-right: 7px; - cursor: pointer; - font-size: 15.5px; -} - -.logout:hover { - color: #fff; -} - -.msgs :first-child { - font-size: 27px; - margin-left: 4px; -} - -.msgs > div { - padding: 2px 6px; - font-size: 13.5px; -} - .actions { display: flex; align-items: center; @@ -372,7 +215,7 @@ input:focus { display: flex; align-items: stretch; justify-content: center; - margin: 10px 0px; + margin: 5px 0px; flex-wrap: wrap; } @@ -387,13 +230,13 @@ input:focus { display: flex; justify-content: center; align-items: center; + width: 200px; height: 30px; + padding: 5px 15px; + margin: 2px 5px; font-size: 15px; - padding: 5px 15px; - margin: 8px 5px 2px 5px; - color: var(--text-color); border: none; background-color: var(--hoover-color); @@ -494,3 +337,7 @@ select:hover { justify-content: center; margin-top: 8px; } + +.seperator { + flex: 1 0; +} diff --git a/src/pages/_app.js b/src/pages/_app.js index 3098e4f..6d2d98f 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,5 +1,3 @@ -// import App from 'next/app' - import React, { useState, useEffect } from 'react' import Layout from '../components/layout' @@ -10,7 +8,7 @@ import constants from '../constants.json' function MyApp({ Component, pageProps, router }) { const [userId, setUserId] = useState() const [motd, setMotd] = useState() - const [userSpecificMotd, setUserSpecificMotd] = useState() + const [unreads, setUnreads] = useState() const getGlobalProps = () => { fetch(`${constants.apiUrl}infos?motd=true`, { @@ -22,9 +20,21 @@ function MyApp({ Component, pageProps, router }) { return resp.json() }) .then((data) => { - setUserId(data.uid) - setMotd(data.motd) - setUserSpecificMotd(data.userSpecificMotd) + fetch(`${constants.apiUrl}hasNewMsg?userid=${data.uid}`, { + credentials: 'include', + Accept: 'application/json', + 'Content-Type': 'application/json', + }) + .then((resp) => { + return resp.json() + }) + .then((hasNewMsg) => { + const res = { ...data, ...hasNewMsg } + + setUserId(res.uid) + setMotd(res.motd) + setUnreads(res.unreads) + }) }) } @@ -33,9 +43,9 @@ function MyApp({ Component, pageProps, router }) { }, []) const globalData = { - userId, - motd, - userSpecificMotd, + userId: userId, + motd: motd, + unreads: unreads, } return ( diff --git a/src/pages/_document.js b/src/pages/_document.js index d730a08..fad2cc0 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -1,4 +1,5 @@ import Document, { Html, Head, Main, NextScript } from 'next/document' +import React from 'react' class MyDocument extends Document { static async getInitialProps(ctx) { @@ -9,7 +10,12 @@ class MyDocument extends Document { render() { return ( - + + +
diff --git a/src/pages/index.js b/src/pages/index.js index 268a176..c40d722 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -301,13 +301,10 @@ export default function Index({ globalData }) { const renderMotd = () => { if (motd) { return ( -
+
MOTD
{motd ? ( -
+
) : (
...
)} @@ -324,7 +321,6 @@ export default function Index({ globalData }) { Qmining | Frylabs.net {renderMotd()} - {/*{userSpecificMotd && renderUserSpecificMotd()} */} {renderNews()}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 41ebf2d..af24549 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -5,7 +5,16 @@ .motd { text-align: center; font-size: 20px; - margin: 5px; + + border: 2px dashed var(--text-color); + padding-top: 13px; + padding-bottom: 15px; + padding-left: 5px; + padding-right: 5px; + margin-top: 18px; + margin-bottom: 30px; + margin-left: 5px; + margin-right: 5px; } .itemContainer { @@ -22,19 +31,6 @@ text-align: justify; } -.motd_body { - border: 2px dashed var(--text-color); - padding-top: 13px; - padding-bottom: 15px; - padding-left: 5px; - padding-right: 5px; - margin-top: 18px; - margin-bottom: 30px; - margin-left: 5px; - margin-right: 5px; - font-size: 8px; -} - .title { color: var(--text-color); font-size: 32px;