Multiple style fixes, todos page improvements

src/components/feedbackArea.js

@@ -66,41 +66,37 @@ export default function FeedbackArea({ from, allowFile }) {
 
   return (
     <div className={styles.inputArea}>
-      <center>
+      <textarea
-        <textarea
+        placeholder={'Ide kezdhetsz el írni...'}
-          placeholder={'Ide kezdhetsz el írni...'}
+        onChange={(event) => setFeedback(event.target.value)}
-          onChange={(event) => setFeedback(event.target.value)}
+        value={feedback}
-          value={feedback}
+        className={styles.contactFeedback}
-          className={styles.contactFeedback}
+      />
-        />
+      {allowFile && (
-        {allowFile && (
+        <div className={styles.fileContainer}>
-          <div className={styles.fileContainer}>
+          <FileUploader
-            <FileUploader
+            onChange={(e) => {
-              onChange={(e) => {
+              setFile(e.target.files[0])
-                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!')
-              }
             }}
-          >
+          />
-            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>
   )
 }

src/components/feedbackArea.module.css

@@ -11,7 +11,6 @@
 
 .send {
   width: 20%;
-  margin-bottom: 60px;
 }
 
 .inputArea {

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}

src/components/todoStuff/todoBoard.module.css

@@ -22,3 +22,9 @@
 .tableCol {
   flex: 1;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0px;
+}

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)

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) => {
+                {tableCardsToShow.length === 0 && (
-                  const shouldHide =
+                  <div className={styles.empty}>Üres</div>
-                    card.state !== key ||
+                )}
-                    (selectedGroup !== null &&
+                {tableCardsToShow.map((card, i) => {
-                      selectedGroup !== 'uncat' &&
-                      card.group !== selectedGroup) ||
-                    (selectedGroup === 'uncat' && card.group !== undefined)
-
-                  if (shouldHide) {
-                    return null
-                  }
-
                   return (
                     <TodoRow
                       onClick={onClick}

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

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'}, ${
+                className={`${'buttonContainer'}, ${styles.todoButtons} ${
-                  styles.todoButtons
+                  group === selectedGroup && 'activeButton'
-                } ${group === selectedGroup && 'activeButton'}`}
+                }`}
                 key={group}
                 onClick={() => {
                   setSelectedGroup(group)
@@ -111,9 +136,9 @@ export default function Todos() {
             )
           })}
           <div
-            className={`${'buttonContainer'}, ${
+            className={`${'buttonContainer'}, ${styles.todoButtons} ${
-              styles.todoButtons
+              'uncat' === selectedGroup && 'activeButton'
-            } ${'uncat' === selectedGroup && 'activeButton'}`}
+            }`}
             onClick={() => {
               setSelectedGroup('uncat')
             }}
@@ -121,8 +146,9 @@ export default function Todos() {
             {'Kategorizálatlan'}
           </div>
           <div
-            className={`${'buttonContainer'}, ${styles.todoButtons} ${null ===
+            className={`${'buttonContainer'}, ${styles.todoButtons} ${
-              selectedGroup && 'activeButton'}`}
+              null === selectedGroup && 'activeButton'
+            }`}
             onClick={() => {
               setSelectedGroup(null)
             }}

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;

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>

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

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

src/pages/script.module.css

@@ -1,3 +1,7 @@
 .content b {
   color: #fff;
 }
+
+.content {
+  text-align: justify;
+}