Added: layout.module.css, donate modal, contribute feedback modal, contacts

src/components/layout.js

@@ -9,12 +9,39 @@ import tabs from '../data/tabs.json'
 import constants from '../constants.json'
 import BB from './b.js'
 
+import styles from './layout.module.css'
+
 const renderSnow = () => {
   const date = new Date()
   // if its december, and date is more than 5
   return date.getMonth() === 11 && date.getDate() > 5
 }
 
+function Donate() {
+  return (
+    <div>
+      <div>
+        Paypalon és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
+        változtatni. Ha név nélkül szeretnél adakozni, akkor írd át egy
+        nickname-ra. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
+        látja 3. személy.
+      </div>
+      <div className={styles.donateLogoContainer}>
+        <a
+          href={`${constants.siteUrl}patreon`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img src={`${constants.siteUrl}img/patreon-logo.png`} />
+        </a>
+        <a href={`${constants.siteUrl}donate`} target="_blank" rel="noreferrer">
+          <img src={`${constants.siteUrl}img/paypal-logo.png`} />
+        </a>
+      </div>
+    </div>
+  )
+}
+
 function MessageButton({
   userSpecificMotd,
   setShowMotdModal,
@@ -62,11 +89,10 @@ function MessageButton({
 
 export default function Layout({
   children,
-  route,
+  router,
   globalData,
   refetchGlobalData,
 }) {
-  let href = route
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [windowSize, setWindowSize] = useState([100, 200])
   const [showMotdModal, setShowMotdModal] = useState(false)
@@ -76,6 +102,11 @@ export default function Layout({
   const userId = globalData.userId
   const userSpecificMotd = globalData.userSpecificMotd
 
+  useEffect(() => {
+    setDonateShowing(!!router.query.donate)
+  }, [router.query.donate])
+
+  let href = router.route
   if (href === '/' || href === '') {
     href = 'index'
   }
@@ -130,9 +161,7 @@ export default function Layout({
               <a>
                 <img
                   style={{ maxWidth: '100%' }}
-                  src={`${
-                    constants.siteUrl
-                  }img/frylabs-logo_small_transparent.png`}
+                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
                   alt="FryLabs"
                 />
               </a>
@@ -141,14 +170,14 @@ export default function Layout({
         </div>
         {sidebarOpen ? (
           <>
-            <div id="sideBarLinks" className="sidebarLinks">
+            <div id="sideBarLinks" className={styles.sidebarLinks}>
               {Object.keys(tabs).map((key) => {
                 const item = tabs[key]
                 return (
                   <Link href={item.href} key={key}>
                     <a
                       onClick={closeSideBar}
-                      className={href.includes(key) ? 'active' : undefined}
+                      className={href.includes(key) ? styles.active : undefined}
                       id={item.id || undefined}
                     >
                       {item.text}
@@ -158,7 +187,6 @@ export default function Layout({
               })}
               <a
                 onClick={() => {
-                  console.log('AAAAAAAAA')
                   closeSideBar()
                   setDonateShowing(true)
                 }}
@@ -202,7 +230,7 @@ export default function Layout({
             setDonateShowing(false)
           }}
         >
-          <div>hi</div>
+          <Donate />
         </Modal>
       ) : null}
       {showMotdModal ? (
@@ -215,7 +243,6 @@ export default function Layout({
           <div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
         </Modal>
       ) : null}
-      <div className="content">{children}</div>
       {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
         <Modal
           closeClick={() => {
@@ -225,6 +252,7 @@ export default function Layout({
           Ú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

@@ -0,0 +1,43 @@
+.donateLogoContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.donateLogoContainer img {
+  max-width: 100px;
+  margin: 5px;
+  border-radius: 5px;
+}
+
+.sidebarLinks > * {
+  display: block;
+  text-align: center;
+  color: black;
+  font-size: 108%;
+  padding: 14px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  text-decoration: none;
+  color: var(--bright-color);
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  cursor: pointer;
+}
+
+.sidebarLinks a:hover {
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+}
+
+.sidebarLinks a.active {
+  border: 0.5px solid var(--text-color);
+  color: white;
+  text-shadow: 2px 2px 8px black;
+  font-weight: bold;
+}
+
+.sidebarLinks a:hover:not(.active) {
+  background-color: var(--text-color);
+  color: black;
+  font-weight: bold;
+  text-shadow: 2px 2px 8px black;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+}

src/defaultStyles.css

@@ -12,7 +12,7 @@ body {
   font-family: 'Kameron', serif;
   font-family: 'Overpass Mono', monospace;
   color: #999999;
-  cursor: default;
+  /* cursor: default; */
 }
 
 li {
@@ -75,38 +75,6 @@ input:focus {
   padding: 1px 15px;
 }
 
-.sidebarLinks a {
-  display: block;
-  text-align: center;
-  color: black;
-  font-size: 108%;
-  padding: 14px;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  text-decoration: none;
-  color: var(--bright-color);
-  transition: width 0.5s, height 0.5s, ease-in 0.5s;
-}
-
-.sidebarLinks a:hover {
-  transition: width 0.5s, height 0.5s, ease-out 0.5s;
-}
-
-.sidebarLinks a.active {
-  border: 0.5px solid var(--text-color);
-  color: white;
-  text-shadow: 2px 2px 8px black;
-  font-weight: bold;
-}
-
-.sidebarLinks a:hover:not(.active) {
-  background-color: var(--text-color);
-  color: black;
-  font-weight: bold;
-  text-shadow: 2px 2px 8px black;
-  transition: width 0.5s, height 0.5s, ease-out 0.5s;
-}
-
 .menuicon div {
   height: 5px;
   background-color: var(--bright-color);
@@ -332,7 +300,7 @@ input:focus {
 }
 
 .msgs {
-    font-size: 15px;
+  font-size: 15px;
 }
 
 .uid {
@@ -451,7 +419,8 @@ select:hover {
   margin: 6px 0px;
 }
 
-.selectContainer > select:hover, .selectContainer > select:active {
+.selectContainer > select:hover,
+.selectContainer > select:active {
   border: 2px solid var(--text-color);
 }
 

src/pages/_app.js

@@ -40,7 +40,7 @@ function MyApp({ Component, pageProps, router }) {
 
   return (
     <Layout
-      route={router.route}
+      router={router}
       globalData={globalData}
       refetchGlobalData={getGlobalProps}
     >

src/pages/contact.js

@@ -1,28 +1,32 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Head from 'next/head'
 
 import FeedbackArea from '../components/feedbackArea'
+import constants from '../constants.json'
+import LoadingIndicator from '../components/LoadingIndicator'
 
 import styles from './contact.module.css'
 
-const contactMethods = {
-  irc: {
-    title: 'IRC chat',
-    description: 'irc real time chat',
-    onClick: () => {
-      console.log('IRC')
-    },
-  },
-  email: {
-    title: 'E-mail',
-    description: 'email',
-    onClick: () => {
-      console.log('email')
-    },
-  },
-}
-
 export default function Contact() {
+  const [contacts, setContacts] = useState()
+
+  useEffect(() => {
+    fetch(constants.apiUrl + 'contacts.json', {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((res) => {
+        return res.json()
+      })
+      .then((res) => {
+        setContacts(res)
+      })
+  }, [])
+
   return (
     <div>
       <Head>
@@ -33,18 +37,40 @@ export default function Contact() {
       </div>
       <br />
       <br />
+      <div className={styles.text}>
+        <div>Üzenet küldése</div>
+        <div>Weboldalon keresztül üzenet küldése adminnak</div>
+      </div>
       <FeedbackArea from={'contact'} />
-      <div className={styles.contactsContainer}>
-        <div>Itt vannak hogy hogy lehet kontaktolni</div>
-        {Object.keys(contactMethods).map((key) => {
-          const { onClick, title, description } = contactMethods[key]
-          return (
-            <div key={key} onClick={onClick}>
-              <div>{title}</div>
-              <div>{description}</div>
+      <div className={styles.container}>
+        {contacts ? (
+          <>
+            <div className={styles.text}>
+              <div>Alternatív módok</div>
+              <div>Valami duma, hogy nem adom ki az adatokat</div>
             </div>
-          )
-        })}
+            <div className={styles.contactsContainer}>
+              {Object.keys(contacts).map((key) => {
+                const { description, value, href } = contacts[key]
+                return (
+                  <div key={key}>
+                    <div>{description}</div>
+                    {href ? (
+                      <a target="blank" rel="noreferrer" href={href}>
+                        {' '}
+                        {value}{' '}
+                      </a>
+                    ) : (
+                      <div>{value}</div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </>
+        ) : (
+          <LoadingIndicator />
+        )}
       </div>
     </div>
   )

src/pages/contact.module.css

@@ -1,25 +1,42 @@
+.container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
 .contactsContainer {
   margin: 5px;
+  max-width: 900px;
 }
 
-.contactsContainer > div:first-child {
-  display: flex;
-  justify-content: center;
-  padding: 5px;
-  /* ide az a menő stílus a headernek mint a ranklistnél van */
-}
-
-.contactsContainer > div {
+.contactsContainer > * {
+  text-decoration: none;
   display: flex;
 }
 
-.contactsContainer > div > div {
+.contactsContainer > * > * {
   padding: 5px;
 }
 
-.contactsContainer > div > div:nth-child(1) {
-  flex: 0 150px;
+.contactsContainer > *:hover {
+  background-color: var(--hoover-color);
 }
-.contactsContainer > div > div:nth-child(2) {
+
+.contactsContainer > * > *:nth-child(1) {
   flex: 1;
 }
+
+.contactsContainer > * > *:nth-child(2) {
+  flex: 0 150px;
+}
+
+.text {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+.text > div:nth-child(1) {
+  font-size: 20px;
+  color: var(--text-color);
+}

src/pages/contribute.js

@@ -1,15 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Head from 'next/head'
 
 import Sleep from '../components/sleep'
 import Todos from '../components/todoStuff/todos'
 import FeedbackArea from '../components/feedbackArea'
+import Modal from '../components/modal'
 
 import constants from '../constants.json'
 import styles from './contribute.module.css'
 import repos from '../data/repos.json'
 
 export default function contribute() {
+  const [showFeedback, setShowFeedback] = useState(false)
+
   return (
     <div>
       <Head>
@@ -25,16 +28,18 @@ export default function contribute() {
         </p>
         <p>
           Emellet ha hozzáértő vagy, adott feladatok megvalósításában is
-          segíthetsz. (lásd: lentebb)<br /> Ha egy kártyára kattintasz, a
-          megjelenő abalkban láthatod annak részleteit, illetve{' '}
+          segíthetsz. (lásd: lentebb)
+          <br /> Ha egy kártyára kattintasz, a megjelenő abalkban láthatod annak
+          részleteit, illetve{' '}
           <b>
             <i>szavazhatsz</i>
           </b>{' '}
           is a feladatra, annak érdekében, hogy minél hamarabb megvalósulhasson.
           Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
           prioritása. (értsd: a legtöbb szavazatot kapó kártya teendője lesz
-          legelőször megvalósítva)<br /> A kurzort az oszlopcímekre mozgatva,
-          további információkat olvashatsz a kategóriák tulajdonságairól.
+          legelőször megvalósítva)
+          <br /> A kurzort az oszlopcímekre mozgatva, további információkat
+          olvashatsz a kategóriák tulajdonságairól.
         </p>
         {
           'Ha olyan teendőt látsz, amiben tudnál és szeretnél is segíteni, akkor írj '
@@ -48,7 +53,17 @@ export default function contribute() {
         </a>
         -n és megbeszéljük.
       </div>
-      <FeedbackArea from={'contribute'} />
+      <center>
+        <div className={`buttonContainer ${styles.newTaskButton}`}>
+          <div
+            onClick={() => {
+              setShowFeedback(true)
+            }}
+          >
+            Új feladat
+          </div>
+        </div>
+      </center>
       <hr />
       <Todos />
       <Sleep />
@@ -73,6 +88,15 @@ export default function contribute() {
           src={`${constants.siteUrl}img/bug.png`}
         />
       </div>
+      {showFeedback && (
+        <Modal
+          closeClick={() => {
+            setShowFeedback(false)
+          }}
+        >
+          <FeedbackArea from={'contribute'} />
+        </Modal>
+      )}
     </div>
   )
 }

src/pages/contribute.module.css

@@ -23,3 +23,7 @@
 .repos a {
   margin: 0px 5px;
 }
+
+.newTaskButton {
+  width: 40%;
+}

src/pages/faq.js

@@ -252,7 +252,7 @@ export default function FAQ() {
         <title>GYIK - Qmining | Frylabs.net</title>
       </Head>
       <div className={'pageHeader'}>
-        <h1>GYakran Ismételt Kérdések</h1>
+        <h1>Gyakran Ismételt Kérdések</h1>
       </div>
       <br />
       <br />