From cc3def0e6f10efd9a8506e9a65849ca27c17207f Mon Sep 17 00:00:00 2001 From: mrfry Date: Sat, 28 Nov 2020 16:46:56 +0100 Subject: [PATCH] Contribute page imporvements, minor site imporvements --- src/components/todoStuff/todoCard.js | 3 +- src/components/todoStuff/todoTable.js | 101 ++++-------------- src/components/todoStuff/todoTable.module.css | 36 +++---- src/data/links.json | 8 ++ src/data/tabs.json | 2 +- src/pages/contribute.js | 45 +++----- src/pages/contribute.module.css | 12 +-- src/pages/index.js | 1 + src/pages/index.module.css | 8 +- 9 files changed, 78 insertions(+), 138 deletions(-) diff --git a/src/components/todoStuff/todoCard.js b/src/components/todoStuff/todoCard.js index 2b5ea7b..eaf0ea2 100644 --- a/src/components/todoStuff/todoCard.js +++ b/src/components/todoStuff/todoCard.js @@ -3,9 +3,8 @@ import React from 'react' import styles from './todoCard.module.css' export default function TodoCard(props) { - const { categories, type, onClick, userId, clickableTypes } = props + const { categories, onClick, userId, clickable } = props const { name, description, category, points, votes, id } = props.cardData - const clickable = clickableTypes.includes(type) const voted = votes.includes(userId) return ( diff --git a/src/components/todoStuff/todoTable.js b/src/components/todoStuff/todoTable.js index 9068edc..be909fa 100644 --- a/src/components/todoStuff/todoTable.js +++ b/src/components/todoStuff/todoTable.js @@ -1,90 +1,35 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' -import LoadingIndicator from '../LoadingIndicator.js' -import TodoCard from './todoCard.js' +import TodoRow from './todoRow.js' -import constants from '../../constants.json' import styles from './todoTable.module.css' -export default function TodoTable() { - const [cards, setCards] = useState(null) - const [columns, setColumns] = useState(null) - const [categories, setCategories] = useState(null) - const [userId, setUserId] = useState(null) - - useEffect(() => { - console.info('Fetching todos') - fetch(`${constants.apiUrl}todos`, { - credentials: 'include', - }) - .then((resp) => { - return resp.json() - }) - .then((data) => { - setTodos(data) - }) - }, []) - - const setTodos = (data) => { - setCards( - data.todos.cards.sort((a, b) => { - return b.votes.length - a.votes.length - }) - ) - setColumns(data.todos.columns) - setCategories(data.todos.categories) - setUserId(data.userId) - } - - const onCardClick = (id) => { - fetch(`${constants.apiUrl}todos?id=${id}`, { - credentials: 'include', - }) - .then((resp) => { - return resp.json() - }) - .then((data) => { - setTodos(data) - }) - } - - if (!cards || !columns || !categories) { - return - } +export default function TodoBoard(props) { + const { tables, cards, userId, categories } = props return (
- {Object.keys(columns).map((key) => { - const category = columns[key] + {Object.keys(tables).map((key) => { + const table = tables[key] + + const tableCards = cards.filter((card) => { + return card.state === key + }) + return ( -
-
{category.name}
- {cards.map((card, i) => { - if (card.state === key) { - return ( - { - const col = columns[key] - if (col.clickable) { - acc.push(key) - } - return acc - }, - [] - )} - /> - ) - } else { - return null - } +
+
{table.name}
+ {tableCards.map((card, i) => { + return ( + + ) })}
) diff --git a/src/components/todoStuff/todoTable.module.css b/src/components/todoStuff/todoTable.module.css index 72c421b..eecc804 100644 --- a/src/components/todoStuff/todoTable.module.css +++ b/src/components/todoStuff/todoTable.module.css @@ -1,23 +1,17 @@ -.table { - display: flex; - min-width: 800px; - max-height: 600px; -} - -.categoryName { - text-align: center; - margin: 5px 0px; - font-size: 16px; - font-weight: bold; - color: white; - white-space: nowrap; -} - -.tableCol { - flex: 1; -} - .tableContainer { - overflow-x: scroll; - overflow-y: scroll; + margin: 5px 0px; +} + +.table { + justify-content: center; +} + +.container { + flex-direction: column; +} + +.title { + text-align: center; + font-size: 20px; + font-weight: bold; } diff --git a/src/data/links.json b/src/data/links.json index 2f5c064..d5e8e08 100644 --- a/src/data/links.json +++ b/src/data/links.json @@ -10,5 +10,13 @@ "data": { "href": "/data.json", "text": "Összes kérdés JSON" + }, + "irc": { + "href": "/irc", + "text": "IRC chat" + }, + "dataeditor": { + "href": "/dataeditor", + "text": "Dataeditor" } } diff --git a/src/data/tabs.json b/src/data/tabs.json index 468bd44..54e1af5 100644 --- a/src/data/tabs.json +++ b/src/data/tabs.json @@ -25,7 +25,7 @@ }, "contribute": { "href": "/contribute", - "text": "Contribute / Todos" + "text": "Todos, contribute" }, "ranklist": { "href": "/ranklist", diff --git a/src/pages/contribute.js b/src/pages/contribute.js index 2b6b8e6..8bea662 100644 --- a/src/pages/contribute.js +++ b/src/pages/contribute.js @@ -1,8 +1,8 @@ import React, { useState } from 'react' -import Button from '../components/Button.js' import Sleep from '../components/sleep' -import TodoTable from '../components/todoStuff/todoTable' +import Todos from '../components/todoStuff/todos' +import Button from '../components/Button.js' import constants from '../constants.json' import styles from './contribute.module.css' @@ -68,39 +68,26 @@ export default function contribute() { annál nehezebb a feladat. Tartsd egeret kártyán részletesebb leírásért (ha van hozzá)
- +
Itt írhatsz todo-ra ötleteket
{renderNewTaskArea()}
-
- Csak álnévvel commitolj git repókhoz! -
+
Git repos
+
+
-
Git repo links
- {Object.keys(repos.repos).map((key) => { - let repo = repos.repos[key] - return ( - - ) - })} +
    + {Object.keys(repos.repos).map((key) => { + let repo = repos.repos[key] + return ( +
  • + {repo.description} +
    • + ) + })} +
-
-
- IRC chat: egy IRC chatszoba van létrehozva egy random szerveren, ahol - tudsz azonnal üzenni, és ha épp fent vagyok akkor azonnal válaszolok -
-
) } diff --git a/src/pages/contribute.module.css b/src/pages/contribute.module.css index 1c90498..081839f 100644 --- a/src/pages/contribute.module.css +++ b/src/pages/contribute.module.css @@ -1,9 +1,3 @@ -.repos { - display: flex; - flex-direction: column; - align-items: center; -} - .description { font-size: 15px; color: white; @@ -39,3 +33,9 @@ .inputArea { display: flex; } + +.title { + color: #9999ff; + font-size: 30px; + text-align: center; +} diff --git a/src/pages/index.js b/src/pages/index.js index 6228cf3..128da42 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -163,6 +163,7 @@ export default function Index({ router }) { {renderMotd()} {userSpecificMotd && renderUserSpecificMotd()}
+
{renderNews()}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css index c8902cb..fdfd0e0 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -7,10 +7,11 @@ color: white; background-color: #303030; margin: 2px; - padding: 15px 32px; + padding: 10px 5px; text-align: center; font-size: 16px; cursor: pointer; + word-wrap: break-word; display: flex; flex-direction: column; @@ -69,3 +70,8 @@ margin: 0px 5px; font-size: 24px; } + +.repos { + display: flex; + flex-direction: column; +}