Lotsa style fixes, and mobile view fix

src/components/composer.js

@@ -44,7 +44,7 @@ export default function Composer({ onSubmit }) {
                 setVal(e.target.value)
               }}
             />
-            <div className={styles.composerAction}>
+            <div className={`actions ${styles.composerAction}`}>
               <span
                 onClick={() => {
                   if (!title) {

src/components/composer.module.css

@@ -1,8 +1,6 @@
 .container {
   display: flex;
   flex-flow: column;
-  max-width: 400px;
-  width: 900px;
 }
 
 .container > input,
@@ -68,25 +66,7 @@
 }
 
 .composerAction {
-  display: flex;
-  align-items: center;
   justify-content: center;
-  width: 36%;
-  height: 100%;
-}
-
-.composerAction > span {
-  margin: 2px 2px;
-  padding: 0px 10px;
-  border: 1px solid #444;
-  border-radius: 5px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 15px;
-  margin-top: 14.5px !important;
-  padding-top: 4px !important;
-  transform: translate(109%, 10%);
-  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
 .composerAction > span:hover {

src/components/feedbackArea.module.css

@@ -2,7 +2,6 @@
   color: var(--text-color);
   background-color: var(--background-color);
   font-size: 14px;
-  width: 600px;
   box-sizing: border-box;
   height: 150px;
   resize: none;

src/components/layout.module.css

@@ -20,6 +20,7 @@
 }
 
 .sidebarLinks > a {
+  border: 0.5px solid transparent;
   display: block;
   text-align: center;
   color: black;

src/components/modal.module.css

@@ -10,11 +10,9 @@
 
 .modalContent {
   display: flex;
-  align-items: stretch;
+
   max-height: 80%;
-  width: 50%;
-  max-width: 52%;
-  width: auto;
+  width: 70%;
   position: fixed;
   background: var(--background-color);
   height: auto;

src/components/newsEntry.js

@@ -19,16 +19,16 @@ export default function NewsEntry({
   return (
     <div className={styles.newsRoot}>
       <div
-        className={`${styles.newsContainer} ${admin &&
-          styles.adminPost}  ${!admin && styles.userPost}  ${uid == user &&
-          styles.ownPost} ${uid == user && admin && styles.adminPost}`}
+        className={`${styles.newsContainer} ${admin && styles.adminPost}  ${
+          !admin && styles.userPost
+        }  ${uid === user && styles.ownPost} ${
+          uid === user && admin && styles.adminPost
+        }`}
       >
         <div className={styles.newsHeader}>
           <div className={styles.newsTitle}>{title}</div>
-          <div className={styles.userinfo}>
-            <div>User #{user}</div>
-            <div className={styles.newsDate}> @ {date}</div>
-          </div>
+          <div>User #{user}</div>
+          <div className={styles.newsDate}> @ {date}</div>
         </div>
         {admin ? (
           <div

src/components/newsEntry.module.css

@@ -54,6 +54,12 @@
   align-items: center;
 }
 
+@media screen and (max-width: 700px) {
+  .newsHeader {
+    flex-direction: column;
+  }
+}
+
 .userinfo {
   display: flex;
   align-items: center;

src/components/todoStuff/todo.module.css

@@ -4,6 +4,4 @@
 }
 
 .todoButtons {
-  height: 38px;
-  text-wrap: normal; 
 }

src/components/todoStuff/todoTable.module.css

@@ -5,7 +5,6 @@
 }
 
 .table {
-  min-width: 500px;
   justify-content: center;
 }
 

src/defaultStyles.css

@@ -285,9 +285,8 @@ input:focus {
 
 .pageHeader {
   background-color: var(--text-color);
-  height: 45px;
   max-width: 100%;
-  color: black !important;
+  color: black;
   margin: 5px 0px 0px 0px;
 }
 
@@ -367,31 +366,46 @@ input:focus {
 
 .buttonContainer {
   display: flex;
-  align-content: center;
+  align-items: stretch;
   justify-content: center;
   margin: 10px 0px;
-  height: 50px;
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: 700px) {
+  .buttonContainer {
+    flex-flow: column;
+    align-items: center;
+  }
 }
 
 .buttonContainer > * {
   display: flex;
-  align-items: center;
   justify-content: center;
-  flex: 1;
-  background-color: var(--hoover-color);
-  border: none;
-  color: var(--text-color);
-  padding: 5px 15px;
-  font-weight: bold;
+  align-items: center;
+  width: 200px;
+  height: 30px;
+
   font-size: 15px;
+  padding: 5px 15px;
   margin: 8px 5px 2px 5px;
-  cursor: pointer;
-  text-shadow: 1px 1px 8px black;
-  transition: width 0.5s, height 0.5s, ease-in 0.5s;
-  user-select: none;
+
+  color: var(--text-color);
+  border: none;
+  background-color: var(--hoover-color);
+  font-weight: bold;
   cursor: pointer;
   text-align: center;
+  user-select: none;
   text-decoration: none;
+  text-shadow: 1px 1px 8px black;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+}
+
+@media screen and (max-width: 700px) {
+  .buttonContainer > * {
+    width: 100%;
+  }
 }
 
 .buttonContainer > *:hover {

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