Multiple style fixes, added top bar to layout

src/components/layout.js

@@ -55,65 +55,62 @@ function Donate() {
   )
 }
 
-function MessageButton({
+function UserStatus({ userId, unreads }) {
-  userSpecificMotd,
-  setShowMotdModal,
-  refetchGlobalData,
-}) {
   return (
-    <div className="msgs">
+    <div className={styles.userStatus}>
+      <div className={'uid'} title="User ID">
+        UID: {userId || '...'}
+      </div>
+      <Link href="/chat">
+        <a className={styles.unreadNotification}>
+          <span>💬</span>
+          {unreads && unreads.length > 0 ? <div>{unreads.length}</div> : null}
+        </a>
+      </Link>
+
       <div
+        className={styles.logout}
+        title="Kijelentkezés"
         onClick={() => {
-          if (!userSpecificMotd) {
+          fetch(constants.apiUrl + 'logout', {
-            return
+            method: 'GET',
-          }
-          setShowMotdModal(true)
-          if (userSpecificMotd.seen) {
-            return
-          }
-          fetch(constants.apiUrl + 'infos', {
-            method: 'POST',
             credentials: 'include',
             headers: {
               Accept: 'application/json',
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({
-              userSpecificMotdSeen: true,
-            }),
           })
-            .then((resp) => {
+          location.reload()
-              return resp.json()
-            })
-            .then(() => {
-              refetchGlobalData()
-            })
         }}
-        style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
-        title={
-          userSpecificMotd && !userSpecificMotd.seen ? 'Új üzeneted van!' : ''
-        }
       >
-        {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
+        Logout
       </div>
     </div>
   )
 }
 
-export default function Layout({
+function MenuIcon({ setSidebarOpen, sidebarOpen }) {
-  children,
+  return (
-  router,
+    <div
-  globalData,
+      onClick={() => {
-  refetchGlobalData,
+        setSidebarOpen(!sidebarOpen)
-}) {
+      }}
+      className={styles.menuicon}
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+  )
+}
+
+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 (
-    <div>
+    <>
       {renderSnow() && (
         <div
           style={{
@@ -157,34 +154,31 @@ export default function Layout({
           <Snowfall snowflakeCount={snowflakeCount} />
         </div>
       )}
-      <div className="sidebar">
+      <div className={styles.topBar}>
-        <div className="headercontainer">
+        <MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
-          <span
+        <Link href="/">
-            onClick={() => {
+          <a>
-              setSidebarOpen(!sidebarOpen)
+            <img
-            }}
+              src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
-            className="menuicon"
+              alt="FryLabs"
-          >
+            />
-            <div />
+          </a>
-            <div />
+        </Link>
-            <div />
+        <div className={styles.topBarLinks}>
-          </span>
+          <Link href="/contribute">
-          <div className="sidebarheader">
+            <a>Teendők</a>
-            <Link href="/">
+          </Link>
-              <a>
+          <Link href="/pwRequest">
-                <img
+            <a>Jelszó kérés</a>
-                  style={{
+          </Link>
-                    maxWidth: '100%',
+          <Link href="/ranklist">
-                    border: 'none',
+            <a>Ranklista</a>
-                    margin: '1px',
+          </Link>
-                  }}
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
-                  alt="FryLabs"
-                />
-              </a>
-            </Link>
-          </div>
         </div>
+        <div className={'seperator'} />
+        <UserStatus unreads={unreads} userId={userId} />
+      </div>
+      <div className={styles.sidebar}>
         {sidebarOpen ? (
           <>
             <div id="sideBarLinks" className={styles.sidebarLinks}>
@@ -215,33 +209,6 @@ export default function Layout({
                 Donate
               </a>
             </div>
-            <div className={'userStatus'}>
-              <MessageButton
-                userSpecificMotd={userSpecificMotd}
-                setShowMotdModal={setShowMotdModal}
-                refetchGlobalData={refetchGlobalData}
-              />
-              <div className={'uid'} title="User ID">
-                UID: {userId || '...'}
-              </div>
-              <div
-                className={'logout'}
-                title="Kijelentkezés"
-                onClick={() => {
-                  fetch(constants.apiUrl + 'logout', {
-                    method: 'GET',
-                    credentials: 'include',
-                    headers: {
-                      Accept: 'application/json',
-                      'Content-Type': 'application/json',
-                    },
-                  })
-                  location.reload()
-                }}
-              >
-                Logout
-              </div>
-            </div>
           </>
         ) : null}
       </div>
@@ -254,27 +221,8 @@ export default function Layout({
           <Donate />
         </Modal>
       ) : null}
-      {showMotdModal ? (
+      <div className={styles.content}>{children}</div>
-        <Modal
-          closeClick={() => {
-            setShowMotdModal(false)
-          }}
-        >
-          <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
-          <div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
-        </Modal>
-      ) : null}
-      {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
-        <Modal
-          closeClick={() => {
-            setShowNewMsgModal(false)
-          }}
-        >
-          Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez!
-        </Modal>
-      ) : null}
-      <div className="content">{children}</div>
       <BB />
-    </div>
+    </>
   )
 }

src/components/layout.module.css

@@ -1,24 +1,83 @@
-.modalHead {
+.topBar {
-  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;
+  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 {
+.topBar img {
-  max-width: 100px;
+  display: block;
-  margin: 5px;
+  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;
+  }
+}

src/components/searchBar.module.css

@@ -1,5 +1,5 @@
 .searchContainer {
-  width: 100%;
+  width: 97%;
   display: flex;
   justify-content: center;
   margin-left: 10px;

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
 }

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"

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;
+}

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)
+        fetch(`${constants.apiUrl}hasNewMsg?userid=${data.uid}`, {
-        setMotd(data.motd)
+          credentials: 'include',
-        setUserSpecificMotd(data.userSpecificMotd)
+          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,
+    userId: userId,
-    motd,
+    motd: motd,
-    userSpecificMotd,
+    unreads: unreads,
   }
 
   return (

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 (
       <Html>
-        <Head />
+        <Head>
+          <meta
+            name="viewport"
+            content="initial-scale=0.6, width=device-width"
+          />
+        </Head>
         <body bgcolor="#222426">
           <Main />
           <NextScript />

src/pages/index.js

@@ -301,13 +301,10 @@ export default function Index({ globalData }) {
   const renderMotd = () => {
     if (motd) {
       return (
-        <div className={styles.motd_body}>
+        <div className={styles.motd}>
           <div className={styles.title}>MOTD</div>
           {motd ? (
-            <div
+            <div dangerouslySetInnerHTML={{ __html: motd }} />
-              className={styles.motd}
-              dangerouslySetInnerHTML={{ __html: motd }}
-            />
           ) : (
             <div>...</div>
           )}
@@ -324,7 +321,6 @@ export default function Index({ globalData }) {
         <title>Qmining | Frylabs.net</title>
       </Head>
       {renderMotd()}
-      {/*{userSpecificMotd && renderUserSpecificMotd()} */}
       <Sleep />
       {renderNews()}
     </div>

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;