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

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>

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;

src/components/todoStuff/todo.module.css

@@ -3,20 +3,7 @@
   padding: 4px;
 }
 
-.groupContainer {
+.todoButtons {
-  display: flex;
+  height: 38px;
-}
+  text-wrap: normal; 
-
-.group {
-  padding: 8px 16px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.group:hover {
-  background-color: #333;
-}
-
-.selectedGroup {
-  background-color: #444;
 }

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;

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

src/components/todoStuff/todoCard.module.css

@@ -1,12 +1,14 @@
 .card {
-  border-radius: 2px;
+  border-radius: 5px;
-  padding: 5px;
+  padding: 7px;
-  margin: 6px 3px;
+  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;
 }

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

src/components/todoStuff/todoRow.module.css

@@ -1,10 +1,9 @@
 .row {
-  display: flex;
+  border-radius: 5px;
-  border: 2px solid #99f;
+  padding: 7px;
-  border-radius: 2px;
+  margin: 8px 4px;
-  padding: 5px;
-  margin: 6px 3px;
   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 {

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',
+            padding: '3px',
-            whiteSpace: 'nowrap',
           }}
         >
           {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}>
+        <center>
-          <a href={gitlink} target={'_blank'} rel={'noreferrer'}>
+          <div>
-            Git link
+            <a
-          </a>
+              href={gitlink}
-        </div>
+              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
+        <center>
-          className={`${styles.button} ${votes.includes(userId) &&
+          <div className={'buttonContainer'} style={{ width: '40%' }}>
-            styles.voted}`}
+            <div
-          onClick={() => {
+              className={`${styles.button} ${votes.includes(userId) &&
-            voteOn(card)
+                styles.voted}`}
-          }}
+              onClick={() => {
-        >
+                voteOn(card)
-          {votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'}
+              }}
-        </div>
+            >
+              {votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'}
+            </div>
+          </div>
+        </center>
       )}
     </div>
   )

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

src/components/todoStuff/todoTable.module.css

@@ -11,6 +11,8 @@
 
 .container {
   flex-direction: column;
+  margin-top: 30px;
+  margin-bottom: 50px;
 }
 
 .title {

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 &&
+                className={`${'buttonContainer'}, ${
-                  styles.selectedGroup}`}
+                  styles.todoButtons
+                } ${group === selectedGroup && 'activeButton'}`}
                 key={group}
                 onClick={() => {
                   setSelectedGroup(group)
@@ -112,8 +113,9 @@ export default function Todos() {
             )
           })}
           <div
-            className={`${styles.group} ${'uncat' === selectedGroup &&
+            className={`${'buttonContainer'}, ${
-              styles.selectedGroup}`}
+              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)
             }}

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
 }

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;

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
+          Weboldalon keresztüli üzenetküldés az adminnak (feedback). A válasz a
-          alsó levelesládába (📬) érkezik majd.
+          bal alsó postaládába (📬 ikon) fog érkezni.
         </div>
       </div>
       <FeedbackArea from={'contact'} />

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)
+          segíthetsz. (lásd: <a href="#gitrepo">lentebb</a>)
-          <br /> Ha egy kártyára kattintasz, a megjelenő abalkban láthatod annak
+          <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>
+      <div className={'subtitle'}>
-      <hr />
+        <b>Git repos</b>
-      <hr />
+      </div>
-      <div className={styles.repos}>
+      <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}>
+            <div>
-              {repo.description}
+              <ul>
-            </a>
+                <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={() => {

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