Finishing up style fixes across pages

2025-04-01 20:23:44 +02:00 · 2021-04-19 22:33:24 +02:00 · 2021-04-19 22:33:24 +02:00 · b88a4d9c9e
commit b88a4d9c9e
parent db347e14ec
10 changed files with 200 additions and 123 deletions
--- a/src/components/feedbackArea.js
+++ b/src/components/feedbackArea.js
@ -24,11 +24,11 @@ function submitFeedback(msg, from) {
        if (resp.success) {
          resolve()
        } else {
-          alert('Hiba küldés közben')
+          alert('Hiba küldés közben!')
        }
      })
      .catch((err) => {
-        alert('Hiba küldés közben')
+        alert('Hiba küldés közben!')
        console.error(err)
      })
  })
@ -39,27 +39,32 @@ export default function FeedbackArea({ from }) {

  return (
    <div className={styles.inputArea}>
-      <textarea
-        onChange={(event) => setFeedback(event.target.value)}
-        value={feedback}
-        className={styles.feedback}
-      />
-      <div className={'buttonContainer'}>
-        <div
-          onClick={() => {
-            if (feedback) {
-              submitFeedback(feedback, from).then(() => {
-                alert('Elküldve')
-                setFeedback('')
-              })
-            } else {
-              alert('Adj meg valami üzenetet ...')
-            }
-          }}
-        >
-          Küldés
+      <center>
+        <textarea
+          placeholder={'Ide kezdhetsz el írni...'}
+          onChange={(event) => setFeedback(event.target.value)}
+          value={feedback}
+          className={styles.feedback}
+        />
+      </center>
+      <center>
+        <div className={`${styles.send} buttonContainer`}>
+          <div
+            onClick={() => {
+              if (feedback) {
+                submitFeedback(feedback, from).then(() => {
+                  alert('Üzenet elküldve!')
+                  setFeedback('')
+                })
+              } else {
+                alert('Üresen hagytad az üzenet szövegének helyét!')
+              }
+            }}
+          >
+            Küldés
+          </div>
        </div>
-      </div>
+      </center>
    </div>
  )
 }
--- a/src/components/feedbackArea.module.css
+++ b/src/components/feedbackArea.module.css
@ -2,12 +2,19 @@
  color: var(--text-color);
  background-color: var(--background-color);
  font-size: 14px;
-  width: 100%;
+  width: 60% !important;
  box-sizing: border-box;
-  height: 60px;
+  height: 100px;
+  resize: none;
+  margin-top: 15px;
+  padding: 5px;
+}
+
+.send {
+  width: 20%;
+  margin-bottom: 60px;
 }

 .inputArea {
-  display: flex;
-  align-items: center;
+  display: block;
 }
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -20,10 +20,11 @@ const renderSnow = () => {
 function Donate() {
  return (
    <div>
-      <div>
-        Paypalon és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
+      <div className={styles.modalHead}>Donate</div>
+      <div style={{ textAlign: 'justify', margin: '8px' }}>
+        Paypalen é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
+        nickname-re. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
        látja 3. személy.
      </div>
      <div className={styles.donateLogoContainer}>
@ -32,10 +33,22 @@ function Donate() {
          target="_blank"
          rel="noreferrer"
        >
-          <img src={`${constants.siteUrl}img/patreon-logo.png`} />
+          <img
+            style={{
+              border: 'none',
+              margin: '15px',
+            }}
+            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`} />
+          <img
+            style={{
+              border: 'none',
+              margin: '15px',
+            }}
+            src={`${constants.siteUrl}img/paypal-logo.png`}
+          />
        </a>
      </div>
    </div>
@ -102,9 +115,12 @@ export default function Layout({
  const userId = globalData.userId
  const userSpecificMotd = globalData.userSpecificMotd

-  useEffect(() => {
-    setDonateShowing(!!router.query.donate)
-  }, [router.query.donate])
+  useEffect(
+    () => {
+      setDonateShowing(!!router.query.donate)
+    },
+    [router.query.donate]
+  )

  let href = router.route
  if (href === '/' || href === '') {
@ -160,8 +176,14 @@ export default function Layout({
            <Link href="/">
              <a>
                <img
-                  style={{ maxWidth: '100%' }}
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                  style={{
+                    maxWidth: '100%',
+                    border: 'none',
+                    margin: '1px',
+                  }}
+                  src={`${
+                    constants.siteUrl
+                  }img/frylabs-logo_small_transparent.png`}
                  alt="FryLabs"
                />
              </a>
--- a/src/components/layout.module.css
+++ b/src/components/layout.module.css
@ -1,3 +1,13 @@
+.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;
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@ -16,6 +16,11 @@ body {
  cursor: default;
 }

+img {
+  margin: 10px;
+  border: 2px solid white;
+}
+
 li {
  padding: 2px 0px;
 }
@ -412,6 +417,21 @@ select:hover {
  border: 1px solid #f2cb05;
 }

+.checkbContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 0px 0px 0px;
+}
+
+.checkbContainer > input {
+  width: 5%;
+  background-color: #9c9c98;
+  color: azure;
+  font-family: inherit;
+  margin-bottom: 5px;
+}
+
 .selectContainer {
  display: flex;
  justify-content: center;
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@ -40,17 +40,23 @@ export default function Contact() {
      <br />
      <Sleep />
      <br />
-      <div className={styles.text}>
-        <div>Üzenet küldése</div>
-        <div>Weboldalon keresztül üzenet küldése adminnak</div>
+      <div>
+        <div className={'subtitle'}>Üzenet küldése</div>
+        <div className={styles.text}>
+          Weboldalon keresztüli üzenetküldés az adminnak (feedback)
+        </div>
      </div>
      <FeedbackArea from={'contact'} />
      <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={'subtitle'}>Alternatív módok</div>
+              <div className={styles.text}>
+                Az alábbi módokat is nyugodtan használhatod, a nevedet, e-mail
+                címedet, illetve semmilyen egyéb adatot nem adok ki harmadik fél
+                számára. (egyedül én fogom látni)
+              </div>
            </div>
            <div className={styles.contactsContainer}>
              {Object.keys(contacts).map((key) => {
--- a/src/pages/contact.module.css
+++ b/src/pages/contact.module.css
@ -11,6 +11,8 @@

 .contactsContainer > * {
  text-decoration: none;
+  color: gainsboro;
+  padding-top: 10px;
  display: flex;
 }

@ -18,10 +20,6 @@
  padding: 5px;
 }

-.contactsContainer > *:hover {
-  background-color: var(--hoover-color);
-}
-
 .contactsContainer > * > *:nth-child(1) {
  flex: 1;
 }
@ -34,9 +32,17 @@
  display: flex;
  flex-flow: column;
  align-items: center;
+  text-align: center;
+  padding-top: 8px;
+  padding-right: 100px;
+  padding-left: 100px;
 }

 .text > div:nth-child(1) {
  font-size: 20px;
  color: var(--text-color);
 }
+
+.contactTable {
+  border-spacing: 15px;
+}
--- a/src/pages/faq.js
+++ b/src/pages/faq.js
@ -103,6 +103,7 @@ function FAQSection() {
          </li>
        </ul>
      </div>
+      <hr />
    </>
  )
 }
@ -178,6 +179,7 @@ function WebsiteSaveSection() {
        hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
        azt az oldalt amin hibával találkozol.
      </p>
+      <hr />
    </>
  )
 }
@ -220,6 +222,7 @@ function ScriptReinstallSection() {
      </ul>
      Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
      felejtsd azt el)
+      <hr />
    </>
  )
 }
@ -246,11 +249,14 @@ export default function FAQ({ router }) {
    }
  }

-  useEffect(() => {
-    if (router.query.tab) {
-      setCurrPage(pages[router.query.tab])
-    }
-  }, [router.query.tab])
+  useEffect(
+    () => {
+      if (router.query.tab) {
+        setCurrPage(pages[router.query.tab])
+      }
+    },
+    [router.query.tab]
+  )

  return (
    <div>
--- a/src/pages/pwRequest.js
+++ b/src/pages/pwRequest.js
@ -75,9 +75,6 @@ export default function PwRequest({ globalData }) {
  }, [])

  return (
-    // TODO: a generált jelszó modal-on való megjelenítésének kivitelezése.
-    /* TODO: <span>{' ' + createDate}</span>-kor. rész után az oldal összes jelenlegi 
-       felhasználójának darabszámának megjelenítése.*/
    <div>
      <Head>
        <title>Jelszó generálás - Qmining | Frylabs.net</title>
@ -85,58 +82,52 @@ export default function PwRequest({ globalData }) {
      <div className={'pageHeader'}>
        <h1>Jelszó generálás</h1>
      </div>
-      <Sleep />
-      <div id="form">
-        <div className={styles.text}>
-          <p className={styles.descrip}>
-            Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
-            jelszót, mert egy idő után kidob a rendszer. A jelszavakról bővebben
-            a jelszavakról bővebben a{' '}
-            <Link href="/faq">
-              <a>GYIK</a>
-            </Link>
-            -ben olvashatsz.
-          </p>
-        </div>
-        <div className={styles.text}>
-          Jelszó kérési lehetőségeit minden
-          <span>{' ' + addPWPerDay + '. '}</span>
-          nap a következő logika alapján növekednek:
-          <ul>
-            <li>
-              Ha a felhasználói fiókod fiatalabb mint
-              <span>{' ' + daysAfterUserGetsPWs + '. '}</span>
-              nap, akkor nem kapsz új lehetőséget.
-            </li>
-            <li>
-              Ha több mint
-              <span>{' ' + maxPWCount + ' '}</span>
-              jelszó kérési lehetőséged van, akkor nem nő ezek száma.
-            </li>
-            <li>
-              Ha az előző kettő nem zárja ki, akkor jelszó kérési lehetőségeid
-              <span>{' ' + addPWCount + ' '}</span>
-              darabbal növekednek.
-            </li>
-          </ul>
-          Eddig
-          <span>{' ' + requestedPWS + ' '}</span>
-          jelszót kértél. Jelenleg
-          <span>{' ' + (availablePWS - requestedPWS) + ' '}</span>
-          db jelszót kérhetsz.
-          <br />A jelenleg bejelentkezett felhasználó (
-          <span>{' #' + userId + ' '}</span>)<span>{' ' + dayDiff + ' '}</span>
-          napos,{' '}
-          <span>
-            {userCreated ? new Date(userCreated).toLocaleString() : '...'}
-          </span>
-          -kor lett létrehozva.
-          <br />
-          Az oldalnak eddig
-          <span>{' ' + userCount + ' '}</span>
-          felhasználója van
-        </div>
-        <center>
+      <center>
+        <Sleep />
+        <div id="form">
+          <div className={styles.text}>
+            <p className={styles.descrip}>
+              Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
+              jelszót, mert egy idő után -biztonsági okokból- kidob a rendszer,
+              ha ugyan az a felhasználó több helyen is belépve marad. A
+              jelszavakról bővebben a{' '}
+              <Link href="/faq?tab=pw">
+                <a>GYIK</a>
+              </Link>{' '}
+              vonatkozó részében olvashatsz.
+            </p>
+          </div>
+          <div className={styles.text}>
+            Minden <span>{' ' + daysAfterUserGetsPWs + ' '}</span> napnál
+            régebbi felhasználó generálhat magának{' '}
+            <span>{' ' + maxPWCount + 'db '}</span> jelszót. Miután lekértél{' '}
+            <span>{' ' + maxPWCount + 'db'}</span>-ot, a lehetőségeid nem
+            fogytak el, ismét lesz módod további{' '}
+            <span>{' ' + maxPWCount + 'db'}</span>-ot kérni, összességében
+            korlátlan mennyiségben. Az egyszerre rendelkezésre álló lehetőségeid
+            számát lentebb látod, ez maximum egyszerre{' '}
+            <span>{' ' + maxPWCount + 'db '}</span> lehet. Ezt követően{' '}
+            <span>{' ' + addPWPerDay + ' '}</span>
+            naponta kapsz további <span>{' ' + addPWCount + ' '}</span> új
+            lehetőséget generálásra, amíg a lehetőségeid száma ismét el nem éri
+            a <span>{' ' + maxPWCount + 'db'}</span>-ot. Eddig
+            <span>{' ' + requestedPWS + ' '}</span>
+            jelszót kértél le, vagyis jelen pillanatban
+            <span>{' ' + (availablePWS - requestedPWS) + 'db '}</span>
+            jelszót generálhatsz még.
+            <br />
+            <br />A jelenleg bejelentkezett felhasználó{' '}
+            <span>{' ' + dayDiff + ' '}</span>
+            napos,{' '}
+            <span>
+              {userCreated ? new Date(userCreated).toLocaleString() : '...'}
+            </span>
+            -kor lett létrehozva.
+            <br />
+            Az oldalnak jelenleg
+            <span>{' ' + userCount + ' '}</span>
+            felhasználója van.
+          </div>
          <div className={`buttonContainer ${styles.pwButton}`}>
            <div
              onClick={() => {
@ -156,19 +147,20 @@ export default function PwRequest({ globalData }) {
              Jelszó kérése
            </div>
          </div>
-        </center>
-        {result ? (
-          <div className={styles.pwContainer}>
-            {result.map((res, i) => {
-              return (
-                <div key={i} className={styles.pw}>
-                  {i + 1}.: {res}
-                </div>
-              )
-            })}
-          </div>
-        ) : null}
-      </div>
+
+          {result ? (
+            <div className={styles.pwContainer}>
+              {result.map((res, i) => {
+                return (
+                  <div key={i} className={styles.pw}>
+                    {i + 1}.: {res}
+                  </div>
+                )
+              })}
+            </div>
+          ) : null}
+        </div>
+      </center>
    </div>
  )
 }
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@ -114,9 +114,12 @@ export default function RankList({ globalData }) {
    getList()
  }, [])

-  useEffect(() => {
-    getList()
-  }, [since])
+  useEffect(
+    () => {
+      getList()
+    },
+    [since]
+  )

  const list =
    ranklist &&
@ -189,7 +192,7 @@ export default function RankList({ globalData }) {
              })}
            </select>
          </div>
-          <div className={'selectContainer'}>
+          <div className={'checkbContainer'}>
            <div>Saját hely mutatása felül:</div>
            <input
              type="checkbox"