From ef97239c5fbe984a4735f0259e4e30b63d342c94 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Tue, 18 May 2021 13:01:35 +0200
Subject: [PATCH] Multiple style fixes, todos page improvements

---
 src/components/feedbackArea.js                | 62 +++++++++----------
 src/components/feedbackArea.module.css        |  1 -
 src/components/todoStuff/todoBoard.js         | 25 ++++----
 src/components/todoStuff/todoBoard.module.css |  6 ++
 src/components/todoStuff/todoCard.js          |  2 +-
 src/components/todoStuff/todoTable.js         | 27 ++++----
 src/components/todoStuff/todoTable.module.css |  6 ++
 src/components/todoStuff/todos.js             | 42 ++++++++++---
 src/components/upDownVote.module.css          |  6 ++
 src/pages/contribute.js                       |  2 +-
 src/pages/ranklist.js                         |  6 --
 src/pages/script.js                           |  8 ++-
 src/pages/script.module.css                   |  4 ++
 13 files changed, 121 insertions(+), 76 deletions(-)

diff --git a/src/components/feedbackArea.js b/src/components/feedbackArea.js
index 5bd9d6b..e2b40b7 100644
--- a/src/components/feedbackArea.js
+++ b/src/components/feedbackArea.js
@@ -66,41 +66,37 @@ export default function FeedbackArea({ from, allowFile }) {
 
   return (
     <div className={styles.inputArea}>
-      <center>
-        <textarea
-          placeholder={'Ide kezdhetsz el írni...'}
-          onChange={(event) => setFeedback(event.target.value)}
-          value={feedback}
-          className={styles.contactFeedback}
-        />
-        {allowFile && (
-          <div className={styles.fileContainer}>
-            <FileUploader
-              onChange={(e) => {
-                setFile(e.target.files[0])
-              }}
-            />
-          </div>
-        )}
-      </center>
-      <center>
-        <div className={`${styles.send} buttonContainer`}>
-          <div
-            onClick={() => {
-              if (feedback) {
-                submitFeedback(from, feedback, file).then(() => {
-                  alert('Üzenet elküldve!')
-                  setFeedback('')
-                })
-              } else {
-                alert('Üresen hagytad az üzenet szövegének helyét!')
-              }
+      <textarea
+        placeholder={'Ide kezdhetsz el írni...'}
+        onChange={(event) => setFeedback(event.target.value)}
+        value={feedback}
+        className={styles.contactFeedback}
+      />
+      {allowFile && (
+        <div className={styles.fileContainer}>
+          <FileUploader
+            onChange={(e) => {
+              setFile(e.target.files[0])
             }}
-          >
-            Küldés
-          </div>
+          />
         </div>
-      </center>
+      )}
+      <div className={`${styles.send} buttonContainer`}>
+        <div
+          onClick={() => {
+            if (feedback) {
+              submitFeedback(from, feedback, file).then(() => {
+                alert('Üzenet elküldve!')
+                setFeedback('')
+              })
+            } else {
+              alert('Üresen hagytad az üzenet szövegének helyét!')
+            }
+          }}
+        >
+          Küldés
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/components/feedbackArea.module.css b/src/components/feedbackArea.module.css
index ad929e3..34fca05 100644
--- a/src/components/feedbackArea.module.css
+++ b/src/components/feedbackArea.module.css
@@ -11,7 +11,6 @@
 
 .send {
   width: 20%;
-  margin-bottom: 60px;
 }
 
 .inputArea {
diff --git a/src/components/todoStuff/todoBoard.js b/src/components/todoStuff/todoBoard.js
index 9e95298..0e2f86c 100644
--- a/src/components/todoStuff/todoBoard.js
+++ b/src/components/todoStuff/todoBoard.js
@@ -27,21 +27,24 @@ export default function TodoBoard(props) {
       <div className={styles.table}>
         {Object.keys(columns).map((key) => {
           const category = columns[key]
+          const cardsToShow = cards.filter((card) => {
+            const shouldHide =
+              card.state !== key ||
+              (selectedGroup !== null &&
+                selectedGroup !== 'uncat' &&
+                card.group !== selectedGroup) ||
+              (selectedGroup === 'uncat' && card.group !== undefined)
+
+            return !shouldHide
+          })
           return (
             <div className={styles.tableCol} key={key}>
               <div className={styles.categoryName}>{category.name}</div>
-              {cards.map((card, i) => {
-                const shouldHide =
-                  card.state !== key ||
-                  (selectedGroup !== null &&
-                    selectedGroup !== 'uncat' &&
-                    card.group !== selectedGroup) ||
-                  (selectedGroup === 'uncat' && card.group !== undefined)
-
-                if (shouldHide) {
-                  return null
-                }
 
+              {cardsToShow.length === 0 && (
+                <div className={styles.empty}>Üres</div>
+              )}
+              {cardsToShow.map((card, i) => {
                 return (
                   <TodoCard
                     key={i}
diff --git a/src/components/todoStuff/todoBoard.module.css b/src/components/todoStuff/todoBoard.module.css
index 5b4d0d4..6bb0906 100644
--- a/src/components/todoStuff/todoBoard.module.css
+++ b/src/components/todoStuff/todoBoard.module.css
@@ -22,3 +22,9 @@
 .tableCol {
   flex: 1;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0px;
+}
diff --git a/src/components/todoStuff/todoCard.js b/src/components/todoStuff/todoCard.js
index 7901bf0..1b02201 100644
--- a/src/components/todoStuff/todoCard.js
+++ b/src/components/todoStuff/todoCard.js
@@ -11,7 +11,7 @@ export default function TodoCard(props) {
     <div
       className={styles.card}
       style={{
-        border: `1px solid ${categories[category].color || '#f2cb05'}`,
+        border: `1px solid ${group || '#f2cb05'}`,
       }}
       onClick={() => {
         onClick(props.cardData)
diff --git a/src/components/todoStuff/todoTable.js b/src/components/todoStuff/todoTable.js
index eafc314..b9b3edc 100644
--- a/src/components/todoStuff/todoTable.js
+++ b/src/components/todoStuff/todoTable.js
@@ -17,22 +17,25 @@ export default function TodoBoard(props) {
             return card.state === key
           })
 
+          const tableCardsToShow = tableCards.filter((card) => {
+            const shouldHide =
+              card.state !== key ||
+              (selectedGroup !== null &&
+                selectedGroup !== 'uncat' &&
+                card.group !== selectedGroup) ||
+              (selectedGroup === 'uncat' && card.group !== undefined)
+
+            return !shouldHide
+          })
+
           return (
             <div className={styles.container} key={key}>
               <div className={styles.title}>{table.name}</div>
               <div className={styles.scroll}>
-                {tableCards.map((card, i) => {
-                  const shouldHide =
-                    card.state !== key ||
-                    (selectedGroup !== null &&
-                      selectedGroup !== 'uncat' &&
-                      card.group !== selectedGroup) ||
-                    (selectedGroup === 'uncat' && card.group !== undefined)
-
-                  if (shouldHide) {
-                    return null
-                  }
-
+                {tableCardsToShow.length === 0 && (
+                  <div className={styles.empty}>Üres</div>
+                )}
+                {tableCardsToShow.map((card, i) => {
                   return (
                     <TodoRow
                       onClick={onClick}
diff --git a/src/components/todoStuff/todoTable.module.css b/src/components/todoStuff/todoTable.module.css
index b195a47..23f933d 100644
--- a/src/components/todoStuff/todoTable.module.css
+++ b/src/components/todoStuff/todoTable.module.css
@@ -25,3 +25,9 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0px;
+}
diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js
index 6f43944..efb716c 100644
--- a/src/components/todoStuff/todos.js
+++ b/src/components/todoStuff/todos.js
@@ -23,6 +23,8 @@ export default function Todos() {
   const [namedGroups, setGroups] = useState(null)
   const [selectedGroup, setSelectedGroup] = useState(null)
 
+  const [activeGroups, setActiveGroups] = useState(null)
+
   useEffect(() => {
     fetch(`${constants.apiUrl}todos`, {
       credentials: 'include',
@@ -43,6 +45,23 @@ export default function Todos() {
     setCards(data.todos.cards)
     setColumns(data.todos.columns)
     setLoaded(true)
+
+    const notTables = Object.keys(data.todos.columns).reduce((acc, key) => {
+      const col = data.todos.columns[key]
+      if (col.type !== 'table') {
+        acc.push(key)
+      }
+      return acc
+    }, [])
+
+    setActiveGroups(
+      data.todos.cards.reduce((acc, card) => {
+        if (card.group && notTables.includes(card.state)) {
+          if (!acc.includes(card.group)) acc.push(card.group)
+        }
+        return acc
+      }, [])
+    )
   }
 
   const onClick = (card) => {
@@ -96,11 +115,17 @@ export default function Todos() {
         <div className={'buttonContainer'}>
           {groups.map((group) => {
             const namedGroup = namedGroups[group]
+            const shouldSkip = activeGroups && !activeGroups.includes(group)
+
+            if (shouldSkip) {
+              return null
+            }
+
             return (
               <div
-                className={`${'buttonContainer'}, ${
-                  styles.todoButtons
-                } ${group === selectedGroup && 'activeButton'}`}
+                className={`${'buttonContainer'}, ${styles.todoButtons} ${
+                  group === selectedGroup && 'activeButton'
+                }`}
                 key={group}
                 onClick={() => {
                   setSelectedGroup(group)
@@ -111,9 +136,9 @@ export default function Todos() {
             )
           })}
           <div
-            className={`${'buttonContainer'}, ${
-              styles.todoButtons
-            } ${'uncat' === selectedGroup && 'activeButton'}`}
+            className={`${'buttonContainer'}, ${styles.todoButtons} ${
+              'uncat' === selectedGroup && 'activeButton'
+            }`}
             onClick={() => {
               setSelectedGroup('uncat')
             }}
@@ -121,8 +146,9 @@ export default function Todos() {
             {'Kategorizálatlan'}
           </div>
           <div
-            className={`${'buttonContainer'}, ${styles.todoButtons} ${null ===
-              selectedGroup && 'activeButton'}`}
+            className={`${'buttonContainer'}, ${styles.todoButtons} ${
+              null === selectedGroup && 'activeButton'
+            }`}
             onClick={() => {
               setSelectedGroup(null)
             }}
diff --git a/src/components/upDownVote.module.css b/src/components/upDownVote.module.css
index b480fe5..67904fa 100644
--- a/src/components/upDownVote.module.css
+++ b/src/components/upDownVote.module.css
@@ -4,6 +4,12 @@
   padding: 3px;
 }
 
+@media screen and (max-width: 700px) {
+  .container {
+    flex-flow: column;
+  }
+}
+
 .container > div {
   display: flex;
   align-items: center;
diff --git a/src/pages/contribute.js b/src/pages/contribute.js
index 7e23ef8..6dfb01c 100644
--- a/src/pages/contribute.js
+++ b/src/pages/contribute.js
@@ -13,7 +13,7 @@ export default function contribute() {
   const [showFeedback, setShowFeedback] = useState(false)
 
   return (
-    <div className={'endofpage'}>
+    <div>
       <Head>
         <title>Todos - Qmining | Frylabs.net</title>
       </Head>
diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js
index 9aef1a5..64a1b1c 100644
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@@ -146,12 +146,6 @@ export default function RankList({ globalData }) {
           <div
             className={styles.infoText}
           >{`A felhasználó ID-d: #${selfUserId}`}</div>
-          <div className={styles.text}>
-            <p>
-              Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
-              frissülnek.
-            </p>
-          </div>
           <div className={'selectContainer'}>
             <div>Megjelenítés: </div>
             <select
diff --git a/src/pages/script.js b/src/pages/script.js
index 422a25e..9840a08 100644
--- a/src/pages/script.js
+++ b/src/pages/script.js
@@ -53,9 +53,6 @@ export default function Script() {
           <ExternalLinkIcon size={15} />
         </a>
       </div>
-      <center>
-        <h2 className={'subtitle'}>A userscript telepítése, és használata</h2>
-      </center>
       <div>
         <p>
           Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
@@ -68,6 +65,11 @@ export default function Script() {
               {supportedSites.map((ss) => {
                 return <li key={ss}>{ss}</li>
               })}
+              <li>
+                <Link href="/faq?tab=addsite">
+                  <a>új oldal hozzáadásának menete itt</a>
+                </Link>
+              </li>
             </ul>
           </>
         )}
diff --git a/src/pages/script.module.css b/src/pages/script.module.css
index 5fc7b04..61506af 100644
--- a/src/pages/script.module.css
+++ b/src/pages/script.module.css
@@ -1,3 +1,7 @@
 .content b {
   color: #fff;
 }
+
+.content {
+  text-align: justify;
+}