From 23865a68cda6160ab936703b190804377793d325 Mon Sep 17 00:00:00 2001
From: ndaniel1102 <ndani2276@gmail.com>
Date: Mon, 12 Apr 2021 01:02:40 +0200
Subject: [PATCH] Rework of page "allQuestions", minor style and layout fixes
 and modifications for other pages

---
 src/components/QuestionSearchResult.js | 16 +++---
 src/components/Questions.js            |  3 +-
 src/components/Questions.module.css    |  9 +++-
 src/components/composer.js             | 18 ++++---
 src/components/composer.module.css     | 27 +++++++---
 src/components/layout.module.css       |  4 --
 src/defaultStyles.css                  | 56 ++++++++++++++-------
 src/pages/allQuestions.js              | 68 ++++++++++++++------------
 src/pages/allQuestions.module.css      | 19 ++++---
 src/pages/contact.js                   |  3 ++
 src/pages/contribute.js                |  4 +-
 src/pages/contribute.module.css        |  9 ----
 src/pages/faq.js                       |  3 +-
 src/pages/pwRequest.js                 |  2 +
 14 files changed, 147 insertions(+), 94 deletions(-)

diff --git a/src/components/QuestionSearchResult.js b/src/components/QuestionSearchResult.js
index b661d3d..b1eac5b 100644
--- a/src/components/QuestionSearchResult.js
+++ b/src/components/QuestionSearchResult.js
@@ -45,16 +45,14 @@ export default function QuestionSearchResult({ data, searchTerm }) {
 
   const renderCount = () => {
     return (
-      <div>
-        <div>
-          {searchTerm ? '' : 'Kezdj el írni kereséshez! '}
-          {`${results} találat, ${subjs.length || data.length} tárgyból`}
-        </div>
+      <div className="resultContainer">
         {results === 0 && (
           <div>
-            {'Pontos egyezést keres a kereső, próbálj kisebb részletre keresni'}
+            {`${results} találat. Az általad keresett kifejezés nem található, 
+          próbáld bővíteni a keresési feltételt!`}
           </div>
         )}
+        {results > 0 && <div>{`${results} találat.`}</div>}
       </div>
     )
   }
@@ -62,10 +60,12 @@ export default function QuestionSearchResult({ data, searchTerm }) {
   if (results > constants.maxQuestionsToRender) {
     return (
       <div>
-        {renderCount()}
         {searchTerm ? (
-          <div>Szűkítsd a keresést találatok megjelenítéséhez!</div>
+          <div className="resultContainer">
+            Szűkítsd a keresési feltételeket a találatok megjelenítéséhez!
+          </div>
         ) : null}
+        <hr />
       </div>
     )
   } else {
diff --git a/src/components/Questions.js b/src/components/Questions.js
index d1c0555..a82563f 100644
--- a/src/components/Questions.js
+++ b/src/components/Questions.js
@@ -10,9 +10,10 @@ class Questions extends PureComponent {
 
     return (
       <div>
+        <hr />
         {subjs.map((subj, i) => {
           return (
-            <div key={i}>
+            <div className={styles.questionBg} key={i}>
               <div className={styles.subjName}>{subj.Name}</div>
               {subj.Questions.map((question, i) => {
                 return <Question key={i} question={question} />
diff --git a/src/components/Questions.module.css b/src/components/Questions.module.css
index 3c0472d..78254f8 100644
--- a/src/components/Questions.module.css
+++ b/src/components/Questions.module.css
@@ -1,7 +1,14 @@
 .subjName {
   font-size: 24px;
-  background-color: #9999ff;
+  font-weight: 600;
+  background-color: var(--text-color);
   color: black;
+  margin-top: 25px;
   padding: 10px;
   word-wrap: break-word;
 }
+
+.questionBg {
+  background-color: #1b1b1c;
+  padding-bottom: 5px;
+}
\ No newline at end of file
diff --git a/src/components/composer.js b/src/components/composer.js
index 909a5fc..2e5a376 100644
--- a/src/components/composer.js
+++ b/src/components/composer.js
@@ -27,14 +27,16 @@ export default function Composer({ onSubmit }) {
 
   return (
     <>
-      <div
-        onClick={() => {
-          setEditorShowing(true)
-        }}
-        className={styles.new}
-      >
-        Bejegyzés írása...
-      </div>
+      <center>
+        <div
+          onClick={() => {
+            setEditorShowing(true)
+          }}
+          className={styles.new}
+        >
+          Bejegyzés írása...
+        </div>
+      </center>
       {editorShowing && (
         <Modal
           closeClick={() => {
diff --git a/src/components/composer.module.css b/src/components/composer.module.css
index 012e515..19a0b86 100644
--- a/src/components/composer.module.css
+++ b/src/components/composer.module.css
@@ -39,16 +39,31 @@
 }
 
 .new {
-  text-align: center;
-  background-color: #191919;
-  border-radius: 3px;
-  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  margin: 10px 0px;
+  height: 19px;
+  width: 30%;
+  display: flex;
+  background-color: var(--hoover-color);
+  border: none;
+  color: var(--text-color);
+  padding: 10px;
+  font-size: 15px;
   margin: 8px;
-  padding: 8px;
+  cursor: pointer;
+  text-shadow: 1px 1px 8px black;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  text-align: center;
+  text-decoration: none;
 }
 
 .new:hover {
-  background-color: var(--hoover-color);
+  text-shadow: 2px 2px 8px black;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  background-color: var(--text-color);
+  font-weight: bold;
+  color: black;
 }
 
 .composerAction {
diff --git a/src/components/layout.module.css b/src/components/layout.module.css
index 9cc9759..c87400b 100644
--- a/src/components/layout.module.css
+++ b/src/components/layout.module.css
@@ -23,10 +23,6 @@
   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;
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 6bb2434..600af5c 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -12,7 +12,7 @@ body {
   font-family: 'Kameron', serif;
   font-family: 'Overpass Mono', monospace;
   color: #999999;
-  /* cursor: default; */
+  cursor: default;
 }
 
 li {
@@ -40,12 +40,10 @@ textarea {
 input {
   color: var(--text-color);
   background-color: var(--background-color);
-  border: 0px solid #444;
-  width: 100%;
-}
-
-input:focus {
-  border: 0px solid #444;
+  border: 1px solid #666;
+  border-radius: 5px;
+  width: 80%;
+  font-family: inherit;
 }
 
 .link {
@@ -175,18 +173,20 @@ input:focus {
 }
 
 .questionContainer {
-  margin: 10px;
+  margin: 6px;
+  padding: 10px;
 }
 
 .questionContainer:hover {
-  background-color: var(--hoover-color);
+  background-color: #141414;
+  color: var(--text-color);
 }
 
 .question {
   word-wrap: break-word;
   font-weight: bold;
   font-size: 17px;
-  color: #ffffff;
+  color: gainsboro;
 }
 
 .answer {
@@ -212,16 +212,22 @@ input:focus {
 }
 
 .subjectSelector {
-  overflow: scroll;
-  height: 350px;
+  overflow: auto;
+  height: auto;
+  max-height: 250px;
   margin: 10px;
+  padding: 5px;
+  padding-right: 10px;
+  padding-left: 8px;
+  background-color: #141414;
 }
 
 .subjItem {
   font-size: 18px;
   padding: 3px;
+  padding-top: 5px;
+  margin-top: 4px;
   cursor: pointer;
-  float: 1;
   display: flex;
   justify-content: space-between;
 }
@@ -376,10 +382,6 @@ input:focus {
   text-decoration: none;
 }
 
-.buttonContainer > *:active {
-  transform: translateY(2.5px);
-}
-
 .buttonContainer > *:hover {
   text-shadow: 2px 2px 8px black;
   transition: width 0.5s, height 0.5s, ease-out 0.5s;
@@ -410,7 +412,7 @@ select:hover {
 }
 
 .selectContainer > select {
-  width: 21%;
+  width: 20%;
   border-radius: 5px;
   border: 1.5px solid white;
   background-color: #9c9c98;
@@ -428,3 +430,21 @@ select:hover {
   padding: 0px 5px;
   margin-right: 8px;
 }
+
+.description {
+  padding-top: 1px;
+  padding-bottom: 10px;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+  margin: 10px;
+}
+
+.resultContainer {
+  color: gainsboro;
+  font-size: 18px;
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+
+}
diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js
index f1b2c43..cb3b98b 100644
--- a/src/pages/allQuestions.js
+++ b/src/pages/allQuestions.js
@@ -103,8 +103,16 @@ export default function AllQuestions({ router }) {
           <div className={'pageHeader'}>
             <h1>Kérdések és tárgyak</h1>
           </div>
-          <br />
-          <div className={`selectContainer ${styles.content}`}>
+          <Sleep />
+          <div className={'description'}>
+            <p>
+              Ezen az oldalon tudsz manuálisan keresni a kérdések és a tárgyak
+              között, vagy ellenőrizni, hogy egy adott tárgy szerepel-e a
+              kérdés- és tárgyadatbázisban. Ezen kívül a kérdéseket le is
+              töltheted offline használatra. (txt formátumban)
+            </p>
+          </div>
+          <div className={'selectContainer'}>
             <select
               defaultValue={-1}
               onChange={(event) => {
@@ -127,7 +135,7 @@ export default function AllQuestions({ router }) {
               }}
             >
               <option disabled value={-1}>
-                {' - Válassz egy adatbázist! - '}
+                {' Válassz egy adatbázist!'}
               </option>
               {dbs.map((db, i) => {
                 return (
@@ -137,7 +145,7 @@ export default function AllQuestions({ router }) {
                 )
               })}
               <option value={'all'} key={'all'}>
-                {'All'}
+                {'Összes kérdés'}
               </option>
             </select>
           </div>
@@ -159,25 +167,26 @@ export default function AllQuestions({ router }) {
       <div>
         {data ? (
           <>
-            <div className={styles.searchContainer}>
-              <input
-                autoFocus
-                placeholder="Keresés..."
-                type="text"
-                value={searchTerm}
-                onChange={(event) => {
-                  setSearchTerm(event.target.value)
-                }}
-              />
-              <button
-                onClick={() => {
-                  setSearchTerm('')
-                }}
-                className={styles.clearButton}
-              >
-                X
-              </button>
-            </div>
+            <center>
+              <div className={styles.searchContainer}>
+                <input
+                  placeholder="Kezdj el írni a kereséshez..."
+                  type="text"
+                  value={searchTerm}
+                  onChange={(event) => {
+                    setSearchTerm(event.target.value)
+                  }}
+                />
+                <button
+                  onClick={() => {
+                    setSearchTerm('')
+                  }}
+                  className={styles.clearButton}
+                >
+                  X
+                </button>
+              </div>
+            </center>
             <hr />
             <SubjectSelector
               data={data}
@@ -187,10 +196,9 @@ export default function AllQuestions({ router }) {
                 setActiveSubjName(subjName)
               }}
             />
-            <hr />
-            <div>{/*{qCount} kérdés, {sCount} tárgy */}</div>
-            <Sleep />
+
             <div>
+              <hr />
               <Subject subj={currSubj} />
             </div>
           </>
@@ -206,8 +214,7 @@ export default function AllQuestions({ router }) {
           <>
             <div className={styles.searchContainer}>
               <input
-                autoFocus
-                placeholder="Keresés..."
+                placeholder="Kezdj el írni a kereséshez..."
                 type="text"
                 value={searchTerm}
                 onChange={(event) => {
@@ -229,7 +236,6 @@ export default function AllQuestions({ router }) {
                 X
               </button>
             </div>
-            <hr />
             <div>
               <QuestionSearchResult data={data} searchTerm={searchTerm} />
             </div>
@@ -247,7 +253,9 @@ export default function AllQuestions({ router }) {
       {dbs ? <>{renderDbSelector()}</> : <LoadingIndicator />}
       {dbs && data ? (
         <>
-          {`${questionCount} kérdés, ${subjectCount} tárgy`}
+          <div className={styles.info}>
+            {`Összesen ${questionCount} kérdés, ${subjectCount} tárgyból`}
+          </div>
           <div className={'buttonContainer'}>
             <div
               className={!subjectsShowing ? 'activeButton' : ''}
diff --git a/src/pages/allQuestions.module.css b/src/pages/allQuestions.module.css
index 17caef2..f3afcbc 100644
--- a/src/pages/allQuestions.module.css
+++ b/src/pages/allQuestions.module.css
@@ -1,17 +1,24 @@
-.content {
-    padding-top: 50px;
-}
-
 .searchContainer {
   width: 100%;
   display: flex;
+  justify-content: center;
+  margin-left: 10px;
+  padding-top: 10px;
+  padding-bottom: 2px;
 }
 
 .clearButton {
-  width: 80px;
+  width: 50px;
   background-color: var(--background-color);
   color: white;
-  font-size: 23px;
+  font-size: 18px;
   cursor: pointer;
   border: none;
+  margin-left: 10px;
+}
+
+.info {
+  text-align: center;
+  font-style: italic;
+  padding-top: 25px;
 }
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 2a3dc07..8ef24ff 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -5,6 +5,8 @@ import FeedbackArea from '../components/feedbackArea'
 import constants from '../constants.json'
 import LoadingIndicator from '../components/LoadingIndicator'
 
+import Sleep from '../components/sleep'
+
 import styles from './contact.module.css'
 
 export default function Contact() {
@@ -36,6 +38,7 @@ export default function Contact() {
         <h1>Kapcsolat</h1>
       </div>
       <br />
+      <Sleep />
       <br />
       <div className={styles.text}>
         <div>Üzenet küldése</div>
diff --git a/src/pages/contribute.js b/src/pages/contribute.js
index a40d5fe..06f9c61 100644
--- a/src/pages/contribute.js
+++ b/src/pages/contribute.js
@@ -21,7 +21,8 @@ export default function contribute() {
       <div className={'pageHeader'}>
         <h1>Teendők</h1>
       </div>
-      <div className={styles.description}>
+      <Sleep />
+      <div className={'description'}>
         <p>
           Ezen az oldalon új ötleteket adhatsz hozzá megvalósításra a teendők
           listájához.
@@ -66,7 +67,6 @@ export default function contribute() {
       </center>
       <hr />
       <Todos />
-      <Sleep />
       <hr />
       <div className={styles.title}>Git repos</div>
       <hr />
diff --git a/src/pages/contribute.module.css b/src/pages/contribute.module.css
index 99345f9..0cbe79e 100644
--- a/src/pages/contribute.module.css
+++ b/src/pages/contribute.module.css
@@ -1,12 +1,3 @@
-.description {
-  padding-top: 1px;
-  padding-bottom: 10px;
-  font-size: inherit;
-  color: inherit;
-  text-align: center;
-  margin: 10px;
-}
-
 .warning {
   color: white;
   padding: 10px;
diff --git a/src/pages/faq.js b/src/pages/faq.js
index d7814a9..eca2c99 100644
--- a/src/pages/faq.js
+++ b/src/pages/faq.js
@@ -255,6 +255,7 @@ export default function FAQ() {
         <h1>Gyakran Ismételt Kérdések</h1>
       </div>
       <br />
+      <Sleep />
       <br />
       <div className={'buttonContainer'}>
         {Object.keys(pages).map((key) => {
@@ -273,7 +274,7 @@ export default function FAQ() {
         })}
       </div>
       {renderCurrPage(currPage)}
-      <Sleep />
+
       <p className={'endofpage'} />
     </div>
   )
diff --git a/src/pages/pwRequest.js b/src/pages/pwRequest.js
index a9e497f..b52705a 100644
--- a/src/pages/pwRequest.js
+++ b/src/pages/pwRequest.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
 import Head from 'next/head'
 import Link from 'next/link'
+import Sleep from '../components/sleep'
 
 import styles from './pwRequest.module.css'
 import constants from '../constants.json'
@@ -88,6 +89,7 @@ export default function PwRequest() {
       <div className={'pageHeader'}>
         <h1>Jelszó generálás</h1>
       </div>
+      <Sleep />
       <div id="form">
         <div className={styles.text}>
           <p className={styles.descrip}>