Rework of page "contribute.js/todos.js" (part2), finishing up style changes across pages, minor fixes

2025-04-01 20:23:44 +02:00 · 2021-04-20 21:35:41 +02:00 · 2021-04-20 21:35:41 +02:00 · 88dd1f0cc6
commit 88dd1f0cc6
parent a91fa4a7fe
17 changed files with 126 additions and 92 deletions
--- a/src/components/feedbackArea.js
+++ b/src/components/feedbackArea.js
@ -44,7 +44,7 @@ export default function FeedbackArea({ from }) {
          placeholder={'Ide kezdhetsz el írni...'}
          onChange={(event) => setFeedback(event.target.value)}
          value={feedback}
-          className={styles.feedback}
+          className={styles.contactFeedback}
        />
      </center>
      <center>
--- a/src/components/feedbackArea.module.css
+++ b/src/components/feedbackArea.module.css
@ -1,10 +1,10 @@
-.feedback {
+.contactFeedback {
  color: var(--text-color);
  background-color: var(--background-color);
  font-size: 14px;
-  width: 60% !important;
+  width: 600px;
  box-sizing: border-box;
-  height: 100px;
+  height: 150px;
  resize: none;
  margin-top: 15px;
  padding: 5px;
--- a/src/components/todoStuff/todo.module.css
+++ b/src/components/todoStuff/todo.module.css
@ -3,20 +3,7 @@
  padding: 4px;
 }

-.groupContainer {
-  display: flex;
-}
-
-.group {
-  padding: 8px 16px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.group:hover {
-  background-color: #333;
-}
-
-.selectedGroup {
-  background-color: #444;
+.todoButtons {
+  height: 38px;
+  text-wrap: normal; 
 }
--- a/src/components/todoStuff/todoBoard.module.css
+++ b/src/components/todoStuff/todoBoard.module.css
@ -11,6 +11,7 @@

 .categoryName {
  text-align: center;
+  margin-top: 85px !important;
  margin: 5px 0px;
  font-size: 16px;
  font-weight: bold;
--- 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: `2px solid ${group || '#99f'}`,
+        border: `1px solid ${categories[category].color || '#f2cb05'}`,
      }}
      onClick={() => {
        onClick(props.cardData)
@ -27,7 +27,7 @@ export default function TodoCard(props) {
            backgroundColor: categories[category].color,
            color: 'white',
            borderRadius: '2px',
-            padding: '2px 4px',
+            padding: '3px',
          }}
        >
          {categories[category].name}
@ -35,9 +35,9 @@ export default function TodoCard(props) {
      </div>
      <div className={styles.numbers}>
        <div className={`${voted && styles.voted}`}>
-          <div>{`Votes: ${votes.length}`}</div>
+          <div>{`Szavazatok: ${votes.length}`}</div>
        </div>
-        <div>{points}</div>
+        <div>{`Neh<EFBFBD>zs<EFBFBD>g: ${points}`}</div>
      </div>
    </div>
  )
--- a/src/components/todoStuff/todoCard.module.css
+++ b/src/components/todoStuff/todoCard.module.css
@ -1,12 +1,14 @@
 .card {
-  border-radius: 2px;
-  padding: 5px;
-  margin: 6px 3px;
+  border-radius: 5px;
+  padding: 7px;
+  margin: 8px 4px;
  cursor: pointer;
+  background-color: #171616;
 }

 .voted {
-  color: #cf9;
+  color: var(--text-color);
+  font-weight: 600;
 }

 .card:hover {
@ -15,7 +17,7 @@
 }

 .card > div {
-  margin: 5px 0px;
+  margin: 6px 4px;
 }

 .description {
@ -25,7 +27,7 @@
 }

 .category {
-  font-size: 10px;
+  font-size: 12px;
  white-space: nowrap;
 }

@ -39,6 +41,6 @@
 }

 .id {
-  margin: 0px 3px;
+  margin: 1px 6px 1px 1px;
  color: #999;
 }
--- a/src/components/todoStuff/todoRow.js
+++ b/src/components/todoStuff/todoRow.js
@ -14,7 +14,7 @@ export default function TodoRow(props) {
      }}
      className={styles.row}
      style={{
-        border: `2px solid ${group || '#99f'}`,
+        border: `2px dashed ${categories[category].color || 'white'}`,
      }}
    >
      <div className={styles.id}>{`#${id}`}</div>
@ -23,11 +23,11 @@ export default function TodoRow(props) {
        <div
          style={{
            wordBreak: 'break-all',
-            fontSize: '10px',
+            fontSize: '12px',
            backgroundColor: categories[category].color,
            color: 'white',
            borderRadius: '2px',
-            padding: '0px 2px',
+            padding: '3px',
          }}
        >
          {categories[category].name}
@ -35,7 +35,7 @@ export default function TodoRow(props) {
      </div>
      <div
        className={`${styles.votes} ${voted && styles.voted}`}
-      >{`Votes: ${votes.length}`}</div>
+      >{`Szavazatok: ${votes.length}`}</div>
    </div>
  )
 }
--- a/src/components/todoStuff/todoRow.module.css
+++ b/src/components/todoStuff/todoRow.module.css
@ -1,10 +1,9 @@
 .row {
-  display: flex;
-  border: 2px solid #99f;
-  border-radius: 2px;
-  padding: 5px;
-  margin: 6px 3px;
+  border-radius: 5px;
+  padding: 7px;
+  margin: 8px 4px;
  cursor: pointer;
+  background-color: #171616;
 }

 .row:hover {
@ -13,12 +12,12 @@
 }

 .row > div {
-  margin: 0px 5px;
+  margin: 6px 4px;
 }

 .id {
  flex: 0 20px;
-  margin: 0px 3px;
+  margin: 1px 6px 1px 1px;
  color: #999;
 }

@ -30,10 +29,14 @@
 }

 .votes {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
 }

 .voted {
-  color: #cf9;
+  color: var(--text-color);
+  font-weight: 600;
 }

 .catName {
--- a/src/components/todoStuff/todoSidebar.js
+++ b/src/components/todoStuff/todoSidebar.js
@ -27,16 +27,16 @@ export default function Todos({
    <div className={styles.container}>
      <div className={styles.title}>
        <span className={styles.id}>#{id}</span>
-        <div className={styles.name}>{name}</div>
+        <div className={'subtitle'} style={{ textAlign: 'left' }}>
+          {name}
+        </div>
        <span
          style={{
-            margin: '0px 5px',
-            fontSize: '10px',
            backgroundColor: categories[category].color,
            color: 'white',
+            fontSize: '12px',
            borderRadius: '2px',
-            padding: '2px 4px',
-            whiteSpace: 'nowrap',
+            padding: '3px',
          }}
        >
          {categories[category].name}
@ -45,7 +45,7 @@ export default function Todos({
      <hr />
      {group && (
        <div className={styles.row}>
-          <div>Csoport:</div>
+          <div style={{ color: group }}>Csoport:</div>
          <div style={{ color: group }}>
            {namedGroups[group] ? namedGroups[group].name : group}
          </div>
@ -64,16 +64,25 @@ export default function Todos({
        <div>{votes.length}</div>
      </div>
      {gitlink && (
-        <div className={styles.row}>
-          <a href={gitlink} target={'_blank'} rel={'noreferrer'}>
-            Git link
-          </a>
-        </div>
+        <center>
+          <div>
+            <a
+              href={gitlink}
+              style={{ textDecoration: 'none' }}
+              target={'_blank'}
+              rel={'noreferrer'}
+            >
+              Git link
+            </a>
+          </div>
+        </center>
      )}
      <hr />
      {description && (
        <>
-          <div className={styles.title}>Leírás</div>
+          <div className={'subtitle'} style={{ textAlign: 'left' }}>
+            Leírás
+          </div>
          <div
            className={styles.description}
            dangerouslySetInnerHTML={{ __html: description }}
@ -81,17 +90,21 @@ export default function Todos({
          <hr />
        </>
      )}
-      <div className={styles.category}></div>
+      <div className={styles.category} />
      {voteable && (
-        <div
-          className={`${styles.button} ${votes.includes(userId) &&
-            styles.voted}`}
-          onClick={() => {
-            voteOn(card)
-          }}
-        >
-          {votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'}
-        </div>
+        <center>
+          <div className={'buttonContainer'} style={{ width: '40%' }}>
+            <div
+              className={`${styles.button} ${votes.includes(userId) &&
+                styles.voted}`}
+              onClick={() => {
+                voteOn(card)
+              }}
+            >
+              {votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'}
+            </div>
+          </div>
+        </center>
      )}
    </div>
  )
--- a/src/components/todoStuff/todoSidebar.module.css
+++ b/src/components/todoStuff/todoSidebar.module.css
@ -28,14 +28,14 @@
 }

 .id {
-  font-size: 16px;
+  font-size: 20px;
  margin: 0px 3px;
  color: #999;
 }

 .description {
-  overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-x: auto;
+  overflow-y: auto;
  max-height: calc(38vh);
  margin: 5px;
 }
@ -43,6 +43,7 @@
 .row {
  display: flex;
  justify-content: space-between;
+  margin: 2px 10px;
 }

 .button {
--- a/src/components/todoStuff/todoTable.module.css
+++ b/src/components/todoStuff/todoTable.module.css
@ -11,6 +11,8 @@

 .container {
  flex-direction: column;
+  margin-top: 30px;
+  margin-bottom: 50px;
 }

 .title {
--- a/src/components/todoStuff/todos.js
+++ b/src/components/todoStuff/todos.js
@ -95,13 +95,14 @@ export default function Todos() {
    const sg = namedGroups[selectedGroup]
    return (
      <>
-        <div className={styles.groupContainer}>
+        <div className={'buttonContainer'}>
          {groups.map((group) => {
            const namedGroup = namedGroups[group]
            return (
              <div
-                className={`${styles.group} ${group === selectedGroup &&
-                  styles.selectedGroup}`}
+                className={`${'buttonContainer'}, ${
+                  styles.todoButtons
+                } ${group === selectedGroup && 'activeButton'}`}
                key={group}
                onClick={() => {
                  setSelectedGroup(group)
@ -112,8 +113,9 @@ export default function Todos() {
            )
          })}
          <div
-            className={`${styles.group} ${'uncat' === selectedGroup &&
-              styles.selectedGroup}`}
+            className={`${'buttonContainer'}, ${
+              styles.todoButtons
+            } ${'uncat' === selectedGroup && 'activeButton'}`}
            onClick={() => {
              setSelectedGroup('uncat')
            }}
@ -121,7 +123,8 @@ export default function Todos() {
            {'Kategorizálatlan'}
          </div>
          <div
-            className={styles.group}
+            className={`${'buttonContainer'}, ${styles.todoButtons} ${null ===
+              selectedGroup && 'activeButton'}`}
            onClick={() => {
              setSelectedGroup(null)
            }}
--- a/src/constants.json
+++ b/src/constants.json
@ -1,6 +1,6 @@
 {
  "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "https://qmining.frylabs.net/",
  "mobileWindowWidth": 700,
  "maxQuestionsToRender": 250
 }
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@ -381,7 +381,7 @@ input:focus {
  background-color: var(--hoover-color);
  border: none;
  color: var(--text-color);
-  padding: 5px 10px;
+  padding: 5px 15px;
  font-weight: bold;
  font-size: 15px;
  margin: 8px 5px 2px 5px;
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@ -43,8 +43,8 @@ export default function Contact() {
      <div>
        <div className={'subtitle'}>Üzenet küldése</div>
        <div className={styles.text}>
-          Weboldalon keresztüli üzenetküldés az adminnak (feedback). Válasz bal
-          alsó levelesládába (📬) érkezik majd.
+          Weboldalon keresztüli üzenetküldés az adminnak (feedback). A válasz a
+          bal alsó postaládába (📬 ikon) fog érkezni.
        </div>
      </div>
      <FeedbackArea from={'contact'} />
--- a/src/pages/contribute.js
+++ b/src/pages/contribute.js
@ -14,7 +14,7 @@ export default function contribute() {
  const [showFeedback, setShowFeedback] = useState(false)

  return (
-    <div>
+    <div className={'endofpage'}>
      <Head>
        <title>Todos - Qmining | Frylabs.net</title>
      </Head>
@ -29,8 +29,8 @@ export default function contribute() {
        </p>
        <p>
          Emellet ha hozzáértő vagy, adott feladatok megvalósításában is
-          segíthetsz. (lásd: lentebb)
-          <br /> Ha egy kártyára kattintasz, a megjelenő abalkban láthatod annak
+          segíthetsz. (lásd: <a href="#gitrepo">lentebb</a>)
+          <br /> Ha egy kártyára kattintasz, a megjelenő ablakban láthatod annak
          részleteit, illetve{' '}
          <b>
            <i>szavazhatsz</i>
@ -54,29 +54,39 @@ export default function contribute() {
          </div>
        </div>
      </center>
+      <br />
      <hr />
      <Todos />
      <hr />
-      <div className={styles.title}>Git repos</div>
-      <hr />
-      <hr />
-      <div className={styles.repos}>
+      <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 (
-            <a key={key} href={repo.href}>
-              {repo.description}
-            </a>
+            <div>
+              <ul>
+                <li>
+                  <a key={key} href={repo.href}>
+                    {repo.description}
+                  </a>
+                </li>
+              </ul>
+            </div>
          )
        })}
-        <hr />
      </div>
-      <div style={{ textAlign: 'center' }}>
+      <div
+        style={{ float: 'left' }}
+        style={{ textAlign: 'right', marginRight: '100px', marginTop: '25px' }}
+      >
        <img
-          style={{ maxWidth: '100%', width: '400px' }}
+          style={{ maxWidth: '100%', width: '320px' }}
          src={`${constants.siteUrl}img/bug.png`}
        />
      </div>
+      <hr />
      {showFeedback && (
        <Modal
          closeClick={() => {
--- a/src/pages/contribute.module.css
+++ b/src/pages/contribute.module.css
@ -11,10 +11,22 @@
  text-align: center;
 }

+.repos {
+  margin-top: 6%;
+  margin-left: 10%;
+}
+
 .repos a {
  margin: 0px 5px;
+  text-decoration: none;
 }

 .newTaskButton {
-  width: 40%;
+  width: 25%;
+}
+
+.imgContainer {
+  float: right;
+  text-align: right;
+  padding-right: 50px;
 }