From 3d6acca49166730fa5d7a4feeea75fb127309f3e Mon Sep 17 00:00:00 2001 From: Akaswan Date: Mon, 26 May 2025 20:07:22 -0500 Subject: [PATCH] Made it more friendly for smaller screens --- src/main/components/Table.tsx | 28 +++++----- src/main/components/TaskCell.tsx | 9 +-- styles.css | 95 ++++++++++++++++++++------------ 3 files changed, 80 insertions(+), 52 deletions(-) diff --git a/src/main/components/Table.tsx b/src/main/components/Table.tsx index e2891a3..330ac58 100644 --- a/src/main/components/Table.tsx +++ b/src/main/components/Table.tsx @@ -74,17 +74,19 @@ const Table: React.FC = ({ Projects {dates.map((date) => ( - {`${format( - date, - "EEEE" - )} - ${format(date, "yyyy-MM-dd")}`} + +
+
{format(date, "EEEE")}
+
{format(date, "yyyy-MM-dd")}
+
+ ))} {projects.map((project) => ( - + = ({ value={project.name} className="project-input" placeholder="New Project" - onBlur={(e) => {if (e.target.value === "") removeProject(project.id)}} + onBlur={(e) => { if (e.target.value === "") removeProject(project.id) }} onChange={(e) => handleProjectNameChange( project.id, @@ -110,14 +112,14 @@ const Table: React.FC = ({ key={`${project.id}:${date}:${index}`} onClick={(e) => { if (e.target === e.currentTarget) { - addTaskToProject(project, date); - setTimeout(() => { - if (newTaskInputRef.current) { - newTaskInputRef.current.focus(); - } - }, 0); + addTaskToProject(project, date); + setTimeout(() => { + if (newTaskInputRef.current) { + newTaskInputRef.current.focus(); + } + }, 0); } - }} + }} > {project.tasks .filter( diff --git a/src/main/components/TaskCell.tsx b/src/main/components/TaskCell.tsx index 3c0f639..6b0d308 100644 --- a/src/main/components/TaskCell.tsx +++ b/src/main/components/TaskCell.tsx @@ -32,7 +32,7 @@ const hexToRgba = (hex: string, alpha: number) => { const g = (bigint >> 8) & 255; const b = bigint & 255; return `rgba(${r}, ${g}, ${b}, ${alpha})`; - }; +}; interface TaskCellProps { task: Task; @@ -72,7 +72,9 @@ const TaskCell: React.FC = ({ color: lightTaskTextColor, }} > - {projectName} +
+ {projectName} +
editTaskStatus(task.id, value)} @@ -93,8 +95,7 @@ const TaskCell: React.FC = ({ key={s.id} value={s.id} className={({ active }) => - `task-cell-dropdown-option ${ - active ? "active" : "" + `task-cell-dropdown-option ${active ? "active" : "" }` } > diff --git a/styles.css b/styles.css index 1c9e235..9013f7b 100644 --- a/styles.css +++ b/styles.css @@ -67,7 +67,7 @@ /* Task Cell */ .task-cell { - /* opacity: 0.8; */ + /* opacity: 0.8; */ border-radius: 8px; padding: 4px; display: flex; @@ -84,6 +84,10 @@ align-items: center; } +.project-name-repeat { + text-overflow: clip; +} + .task-cell-content input { background: transparent; border: none; @@ -102,8 +106,10 @@ background-color: transparent !important; display: flex; - align-items: center; /* <- vertical center */ - justify-content: center; /* <- horizontal center */ + align-items: center; + /* <- vertical center */ + justify-content: center; + /* <- horizontal center */ } .task-cell-status-indicator:hover { @@ -112,14 +118,15 @@ /* Table */ .table-container { - border: var(--border-width) solid var(--background-modifier-border); - border-top-left-radius: 8px; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - overflow: hidden; - max-width: 100%; - --one-seventh-width: 0px; + border: var(--border-width) solid var(--background-modifier-border); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + overflow: hidden; + max-width: 100%; + --one-seventh-width: 0px; } + .new-project-container { display: flex; align-items: center; @@ -129,46 +136,64 @@ border-bottom: var(--border-width) solid var(--background-modifier-border); border-left: var(--border-width) solid var(--background-modifier-border); border-right: var(--border-width) solid var(--background-modifier-border); - width: 130px; + width: 129.5px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } + +.project-column { + min-width: 128px; +} + .table { - width: 100%; - border-collapse: collapse; - text-align: left; + width: 100%; + border-collapse: collapse; + text-align: left; } + .table-header { - background-color: var(--background-secondary); + background-color: var(--background-secondary); } + .table th { - padding: 12px 16px; - font-size: small; - font-weight: 500; -} -.top-left { - width: 128px; + padding: 12px 16px; + font-size: small; + font-weight: 500; } + .table td { - padding: 8px; - font-size: small; - height: 80px; - border-top: var(--border-width) solid var(--background-modifier-border); + padding: 8px; + font-size: small; + height: 80px; + border-top: var(--border-width) solid var(--background-modifier-border); } + .taskcell-enclosure { - border-left: var(--border-width) solid var(--background-modifier-border); + border-left: var(--border-width) solid var(--background-modifier-border); } + .project-input { - border: none !important; - width: 100%; + border: none !important; + width: 100%; } + .project-input:focus { - outline: none !important; /* Removes the default focus outline */ - border: none !important; /* Ensures no border is applied */ + outline: none !important; + /* Removes the default focus outline */ + border: none !important; + /* Ensures no border is applied */ } + .date { - border-left: var(--border-width) solid var(--background-modifier-border); - width: var(--taskcell-enclosure-width); + border-left: var(--border-width) solid var(--background-modifier-border); + width: var(--taskcell-enclosure-width); +} + +.date-header { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .task-cell-dropdown-options { @@ -193,8 +218,8 @@ /* Required */ .warning-container { - color: var(--text-normal); - background-color: var(--background-modifier-error); + color: var(--text-normal); + background-color: var(--background-modifier-error); } -/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyogRGVmaW5lIGEgY3VzdG9tIGJvcmRlciBjb2xvciAqL1xyXG4udGFibGUtY29udGFpbmVyIHtcclxuICBib3JkZXI6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpOyAvKiBDdXN0b20gYm9yZGVyIGNvbG9yICovXHJcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvKiBSb3VuZGVkIGNvcm5lcnMgKi9cclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIG1heC13aWR0aDogMTAwJTtcclxuICAtLW9uZS1zZXZlbnRoLXdpZHRoOiAwcHg7XHJcbn1cclxuXHJcbi50YWJsZSB7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcclxuICB0ZXh0LWFsaWduOiBsZWZ0O1xyXG59XHJcblxyXG4udGFibGUtaGVhZGVyIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLXNlY29uZGFyeSk7XHJcbn1cclxuXHJcbi50YWJsZSB0aCB7XHJcbiAgcGFkZGluZzogMTJweCAxNnB4O1xyXG4gIGZvbnQtc2l6ZTogc21hbGw7XHJcbiAgZm9udC13ZWlnaHQ6IDUwMDtcclxufSBcclxuXHJcbi50b3AtbGVmdCB7XHJcbiAgd2lkdGg6IDEyOHB4O1xyXG59XHJcblxyXG4udGFibGUgdGQge1xyXG4gIHBhZGRpbmc6IDEycHggMTZweDtcclxuICBmb250LXNpemU6IHNtYWxsO1xyXG4gIGhlaWdodDogNjhweDtcclxuICBib3JkZXItdG9wOiB2YXIoLS1ib3JkZXItd2lkdGgpIHNvbGlkIHZhcigtLWJhY2tncm91bmQtbW9kaWZpZXItYm9yZGVyKTtcclxufVxyXG5cclxuLnRhc2tjZWxsLWVuY2xvc3VyZSB7XHJcbiAgYm9yZGVyLWxlZnQ6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpO1xyXG59XHJcblxyXG4ucHJvamVjdC1pbnB1dCB7XHJcbiAgYm9yZGVyOiBub25lICFpbXBvcnRhbnQ7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbn1cclxuXHJcbi5kYXRlIHtcclxuICBib3JkZXItbGVmdDogdmFyKC0tYm9yZGVyLXdpZHRoKSBzb2xpZCB2YXIoLS1iYWNrZ3JvdW5kLW1vZGlmaWVyLWJvcmRlcik75mdzIjogIjtBQUNBO0FBQ0U7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0Y7QUFDRTtBQUNBO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUFBOyIsCiAgIm5hbWVzIjogW10KfQo= */ +/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyogRGVmaW5lIGEgY3VzdG9tIGJvcmRlciBjb2xvciAqL1xyXG4udGFibGUtY29udGFpbmVyIHtcclxuICBib3JkZXI6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpOyAvKiBDdXN0b20gYm9yZGVyIGNvbG9yICovXHJcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvKiBSb3VuZGVkIGNvcm5lcnMgKi9cclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIG1heC13aWR0aDogMTAwJTtcclxuICAtLW9uZS1zZXZlbnRoLXdpZHRoOiAwcHg7XHJcbn1cclxuXHJcbi50YWJsZSB7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcclxuICB0ZXh0LWFsaWduOiBsZWZ0O1xyXG59XHJcblxyXG4udGFibGUtaGVhZGVyIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLXNlY29uZGFyeSk7XHJcbn1cclxuXHJcbi50YWJsZSB0aCB7XHJcbiAgcGFkZGluZzogMTJweCAxNnB4O1xyXG4gIGZvbnQtc2l6ZTogc21hbGw7XHJcbiAgZm9udC13ZWlnaHQ6IDUwMDtcclxufSBcclxuXHJcbi50b3AtbGVmdCB7XHJcbiAgd2lkdGg6IDEyOHB4O1xyXG59XHJcblxyXG4udGFibGUgdGQge1xyXG4gIHBhZGRpbmc6IDEycHggMTZweDtcclxuICBmb250LXNpemU6IHNtYWxsO1xyXG4gIGhlaWdodDogNjhweDtcclxuICBib3JkZXItdG9wOiB2YXIoLS1ib3JkZXItd2lkdGgpIHNvbGlkIHZhcigtLWJhY2tncm91bmQtbW9kaWZpZXItYm9yZGVyKTtcclxufVxyXG5cclxuLnRhc2tjZWxsLWVuY2xvc3VyZSB7XHJcbiAgYm9yZGVyLWxlZnQ6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpO1xyXG59XHJcblxyXG4ucHJvamVjdC1pbnB1dCB7XHJcbiAgYm9yZGVyOiBub25lICFpbXBvcnRhbnQ7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbn1cclxuXHJcbi5kYXRlIHtcclxuICBib3JkZXItbGVmdDogdmFyKC0tYm9yZGVyLXdpZHRoKSBzb2xpZCB2YXIoLS1iYWNrZ3JvdW5kLW1vZGlmaWVyLWJvcmRlcik75mdzIjogIjtBQUNBO0FBQ0U7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0Y7QUFDRTtBQUNBO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUFBOyIsCiAgIm5hbWVzIjogW10KfQo= */ \ No newline at end of file