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,7 +66,6 @@ export default function FeedbackArea({ from, allowFile }) {

  return (
    <div className={styles.inputArea}>
-      <center>
      <textarea
        placeholder={'Ide kezdhetsz el írni...'}
        onChange={(event) => setFeedback(event.target.value)}
@ -82,8 +81,6 @@ export default function FeedbackArea({ from, allowFile }) {
          />
        </div>
      )}
-      </center>
-      <center>
      <div className={`${styles.send} buttonContainer`}>
        <div
          onClick={() => {
@ -100,7 +97,6 @@ export default function FeedbackArea({ from, allowFile }) {
          Küldés
        </div>
      </div>
-      </center>
    </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,10 +27,7 @@ export default function TodoBoard(props) {
      <div className={styles.table}>
        {Object.keys(columns).map((key) => {
          const category = columns[key]
-          return (
-            <div className={styles.tableCol} key={key}>
-              <div className={styles.categoryName}>{category.name}</div>
-              {cards.map((card, i) => {
+          const cardsToShow = cards.filter((card) => {
            const shouldHide =
              card.state !== key ||
              (selectedGroup !== null &&
@ -38,10 +35,16 @@ export default function TodoBoard(props) {
                card.group !== selectedGroup) ||
              (selectedGroup === 'uncat' && card.group !== undefined)

-                if (shouldHide) {
-                  return null
-                }
+            return !shouldHide
+          })
+          return (
+            <div className={styles.tableCol} key={key}>
+              <div className={styles.categoryName}>{category.name}</div>

+              {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,11 +17,7 @@ export default function TodoBoard(props) {
            return card.state === key
          })

-          return (
-            <div className={styles.container} key={key}>
-              <div className={styles.title}>{table.name}</div>
-              <div className={styles.scroll}>
-                {tableCards.map((card, i) => {
+          const tableCardsToShow = tableCards.filter((card) => {
            const shouldHide =
              card.state !== key ||
              (selectedGroup !== null &&
@ -29,10 +25,17 @@ export default function TodoBoard(props) {
                card.group !== selectedGroup) ||
              (selectedGroup === 'uncat' && card.group !== undefined)

-                  if (shouldHide) {
-                    return null
-                  }
+            return !shouldHide
+          })

+          return (
+            <div className={styles.container} key={key}>
+              <div className={styles.title}>{table.name}</div>
+              <div className={styles.scroll}>
+                {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;
+}