Rework of page "allQuestions", minor style and layout fixes and modifications for other pages

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 {

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} />

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

src/components/composer.js

@@ -27,6 +27,7 @@ export default function Composer({ onSubmit }) {
 
   return (
     <>
+      <center>
         <div
           onClick={() => {
             setEditorShowing(true)
@@ -35,6 +36,7 @@ export default function Composer({ onSubmit }) {
         >
           Bejegyzés írása...
         </div>
+      </center>
       {editorShowing && (
         <Modal
           closeClick={() => {

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 {

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;

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

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,10 +167,10 @@ export default function AllQuestions({ router }) {
       <div>
         {data ? (
           <>
+            <center>
               <div className={styles.searchContainer}>
                 <input
-                autoFocus
-                placeholder="Keresés..."
+                  placeholder="Kezdj el írni a kereséshez..."
                   type="text"
                   value={searchTerm}
                   onChange={(event) => {
@@ -178,6 +186,7 @@ export default function AllQuestions({ router }) {
                   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' : ''}

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

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>

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 />

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;

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>
   )

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