Multiple style fixes, todos page improvements

2025-04-01 20:23:44 +02:00 · 2021-05-18 13:01:35 +02:00 · 2021-05-18 13:01:35 +02:00 · ef97239c5f
commit ef97239c5f
parent e928ef87de
13 changed files with 121 additions and 76 deletions
--- 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>
  )
 }
--- a/src/components/feedbackArea.module.css
+++ b/src/components/feedbackArea.module.css
@ -11,7 +11,6 @@

 .send {
  width: 20%;
-  margin-bottom: 60px;
 }

 .inputArea {
--- 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}
--- 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;
+}
--- 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)
--- 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}
--- 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;
+}
--- 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)
            }}
--- 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;
--- 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>
--- 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
--- 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>
          </>
        )}
--- a/src/pages/script.module.css
+++ b/src/pages/script.module.css
@ -1,3 +1,7 @@
 .content b {
  color: #fff;
 }
+
+.content {
+  text-align: justify;
+}