diff --git a/src/components/todoStuff/todoCard.js b/src/components/todoStuff/todoCard.js index 432addf..2b5ea7b 100644 --- a/src/components/todoStuff/todoCard.js +++ b/src/components/todoStuff/todoCard.js @@ -2,10 +2,8 @@ import React from 'react' import styles from './todoCard.module.css' -const clickableTypes = ['todo', 'blocked', 'inprogress', 'testing'] - export default function TodoCard(props) { - const { categories, type, onClick, userId } = props + const { categories, type, onClick, userId, clickableTypes } = props const { name, description, category, points, votes, id } = props.cardData const clickable = clickableTypes.includes(type) const voted = votes.includes(userId) diff --git a/src/components/todoStuff/todoTable.js b/src/components/todoStuff/todoTable.js index 8ef2659..9068edc 100644 --- a/src/components/todoStuff/todoTable.js +++ b/src/components/todoStuff/todoTable.js @@ -53,7 +53,7 @@ export default function TodoTable() { } return ( -
+
{Object.keys(columns).map((key) => { const category = columns[key] @@ -70,6 +70,16 @@ export default function TodoTable() { userId={userId} categories={categories} onClick={onCardClick} + clickableTypes={Object.keys(columns).reduce( + (acc, key) => { + const col = columns[key] + if (col.clickable) { + acc.push(key) + } + return acc + }, + [] + )} /> ) } else { diff --git a/src/components/todoStuff/todoTable.module.css b/src/components/todoStuff/todoTable.module.css index 91625be..72c421b 100644 --- a/src/components/todoStuff/todoTable.module.css +++ b/src/components/todoStuff/todoTable.module.css @@ -1,5 +1,7 @@ .table { display: flex; + min-width: 800px; + max-height: 600px; } .categoryName { @@ -14,3 +16,8 @@ .tableCol { flex: 1; } + +.tableContainer { + overflow-x: scroll; + overflow-y: scroll; +}