Lotsa style fixes, and mobile view fix

src/pages/allQuestions.js

@@ -141,7 +141,7 @@ export default function AllQuestions({ router }) {
             offline használatra. (txt formátumban)
           </div>
           <center>
-            <div className={`buttonContainer ${styles.dataEditor}`}>
+            <div className={'buttonContainer'}>
               <div
                 onClick={() => {
                   window.open(`${constants.siteUrl}dataeditor`, '_blank')

src/pages/allQuestions.module.css

@@ -3,8 +3,3 @@
   font-style: italic;
   padding-top: 5px;
 }
-
-.dataEditor {
-  margin-bottom: 25px;
-  width: 25%;
-}

src/pages/contribute.js

@@ -43,43 +43,41 @@ export default function contribute() {
           olvashatsz a kategóriák tulajdonságairól.
         </p>
       </div>
-      <center>
-        <div className={`buttonContainer ${styles.newTaskButton}`}>
-          <div
-            onClick={() => {
-              setShowFeedback(true)
-            }}
-          >
-            Új feladat
-          </div>
+      <div className={`buttonContainer`}>
+        <div
+          onClick={() => {
+            setShowFeedback(true)
+          }}
+        >
+          Új feladat
         </div>
-      </center>
+      </div>
       <br />
       <hr />
       <Todos />
       <hr />
-      <div className={'subtitle'}>
-        <b>Git repos</b>
-      </div>
-      <div className={styles.repos} style={{ float: 'left' }} id={'gitrepo'}>
-        {Object.keys(repos.repos).map((key) => {
-          let repo = repos.repos[key]
-          return (
-            <div key={key}>
-              <ul>
-                <li>
-                  <a key={key} href={repo.href}>
-                    {repo.description}
-                  </a>
-                </li>
-              </ul>
-            </div>
-          )
-        })}
-      </div>
-      <div
-        style={{ textAlign: 'right', marginRight: '100px', marginTop: '25px' }}
-      >
+      <div className={styles.gitRepos}>
+        <div>
+          <div className={'subtitle'}>
+            <b>Git repos</b>
+          </div>
+          <div id={'gitrepo'}>
+            {Object.keys(repos.repos).map((key) => {
+              let repo = repos.repos[key]
+              return (
+                <div key={key}>
+                  <ul>
+                    <li>
+                      <a key={key} href={repo.href}>
+                        {repo.description}
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              )
+            })}
+          </div>
+        </div>
         <img
           style={{ maxWidth: '100%', width: '320px' }}
           src={`${constants.siteUrl}img/bug.png`}

src/pages/contribute.module.css

@@ -11,18 +11,13 @@
   text-align: center;
 }
 
-.repos {
-  margin-top: 6%;
-  margin-left: 10%;
+.gitRepos {
+  display: flex;
+  justify-content: space-around;
 }
 
-.repos a {
+.gitRepos a {
   margin: 0px 5px;
-  text-decoration: none;
-}
-
-.newTaskButton {
-  width: 25%;
 }
 
 .imgContainer {

src/pages/faq.js

@@ -343,7 +343,7 @@ export default function FAQ({ router }) {
           const page = pages[key]
           return (
             <div
-              className={`${page === currPage && 'activeButton'}`}
+              className={`${page === currPage ? 'activeButton' : ''}`}
               key={key}
               onClick={() => {
                 setCurrPage(page)

src/pages/index.js

@@ -81,9 +81,12 @@ export default function Index({ globalData }) {
   const motd = globalData.motd
   const [news, setNews] = useState(null)
   const [nextEntryKey, setNextEntryKey] = useState()
+  const [fetchingForum, setFetchingForum] = useState(false)
 
   useEffect(() => {
+    setFetchingForum(true)
     fetchForum().then((res) => {
+      setFetchingForum(false)
       const { entries, nextKey } = res
       setNextEntryKey(nextKey)
       setNews(entries)
@@ -267,15 +270,25 @@ export default function Index({ globalData }) {
             <div
               className={styles.loadMoreButton}
               onClick={() => {
+                if (fetchingForum) {
+                  return
+                }
+
+                setFetchingForum(true)
                 fetchForum(nextEntryKey).then((res) => {
-                  console.log(res)
+                  setFetchingForum(false)
+
                   const { entries, nextKey } = res
                   setNextEntryKey(nextKey)
                   setNews({ ...news, ...entries })
                 })
               }}
             >
-              Több bejegyzés betöltése
+              {fetchingForum ? (
+                <LoadingIndicator />
+              ) : (
+                'Több bejegyzés betöltése'
+              )}
             </div>
           )}
         </div>

src/pages/index.module.css

@@ -80,7 +80,10 @@
 }
 
 .loadMoreButton {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   background-color: var(--dark-color);
   margin-left: 8px;
   margin-right: 8px;
@@ -88,6 +91,8 @@
   margin-top: 16px;
   padding: 10px;
 
+  height: 50px;
+
   cursor: pointer;
 }
 

src/pages/pwRequest.js

@@ -136,7 +136,7 @@ export default function PwRequest({ globalData }) {
             <span>{' ' + userCount + ' '}</span>
             felhasználója van.
           </div>
-          <div className={`buttonContainer ${styles.pwButton}`}>
+          <div className={'buttonContainer'}>
             <div
               onClick={() => {
                 requestPw().then((res) => {

src/pages/pwRequest.module.css

@@ -32,7 +32,3 @@
 .text span {
   color: var(--text-color);
 }
-
-.pwButton {
-  width: 20% !important;
-}

src/pages/userfiles.module.css

@@ -63,6 +63,14 @@
   background-color: var(--hoover-color);
 }
 
+@media screen and (max-width: 700px) {
+  .header > div > div {
+    height: 100px;
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+  }
+}
+
 .uploadContainer > div {
   padding: 5px;
   text-align: center;
@@ -109,6 +117,10 @@
   align-items: center;
 }
 
+.title > div:nth-child(1) {
+  padding: 0px 16px;
+}
+
 .title > div:nth-child(2) {
   flex: 1;
 }