mirror of
https://github.com/CarGDev/pomodoro.git
synced 2025-09-18 22:08:29 +00:00
feat: implement comprehensive task management system with SCSS modules
- Add complete task management functionality with atomic design - Create TaskCard component with checkbox and delete functionality - Implement TaskForm with drawer interface for task editing - Add Tasks organism with right-side drawer and completion states - Move TodayProgress and QuickActions to Sidebar for better UX - Implement SCSS modules for all components with proper styling - Add task statistics to progress tracking - Update store with task management actions and persistence - Improve layout with 30/70 column split for tasks and timer - Add SASS dependency for SCSS compilation - Ensure completed tasks are non-editable with proper visual states
This commit is contained in:
Carlos Gutierrez
38
client/src/styles/Home.module.scss
Normal file
38
client/src/styles/Home.module.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
.container {
|
||||
padding: 1.5rem;
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 35% 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.grid {
|
||||
grid-template-columns: 30% 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
61
client/src/styles/QuickActions.module.scss
Normal file
61
client/src/styles/QuickActions.module.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
.card {
|
||||
// Card container styles
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
height: auto;
|
||||
padding: 0.75rem;
|
||||
min-height: 5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.soundButton {
|
||||
&:hover {
|
||||
border-color: hsl(var(--accent));
|
||||
background-color: hsl(var(--accent) / 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.exportButton {
|
||||
&:hover {
|
||||
border-color: hsl(var(--chart-2));
|
||||
background-color: hsl(var(--chart-2) / 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.buttonContent {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.buttonTitle {
|
||||
font-weight: 500;
|
||||
word-break: break-words;
|
||||
}
|
||||
|
||||
.buttonDescription {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
word-break: break-words;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.soundIcon {
|
||||
color: hsl(var(--accent));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.exportIcon {
|
||||
color: hsl(var(--chart-2));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
123
client/src/styles/TaskCard.module.scss
Normal file
123
client/src/styles/TaskCard.module.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
.card {
|
||||
cursor: pointer !important;
|
||||
transition: all 0.2s ease !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: flex-start !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
|
||||
transform: scale(1.02) !important;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
opacity: 0.6 !important;
|
||||
background-color: hsl(var(--muted) / 0.5) !important;
|
||||
cursor: default !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
padding: 1rem !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 0.75rem !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
flex: 1 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500 !important;
|
||||
font-size: 0.875rem !important;
|
||||
line-height: 1.25 !important;
|
||||
margin-bottom: 0.25rem !important;
|
||||
|
||||
&.completed {
|
||||
text-decoration: line-through !important;
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.75rem !important;
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.metaInfo {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.metaItem {
|
||||
font-size: 0.75rem !important;
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-end !important;
|
||||
gap: 0.5rem !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.deleteButton {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
cursor: pointer !important;
|
||||
padding: 0.25rem !important;
|
||||
border-radius: 0.25rem !important;
|
||||
transition: all 0.2s ease !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(var(--destructive) / 0.1) !important;
|
||||
color: hsl(var(--destructive)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
color: hsl(var(--destructive)) !important;
|
||||
transition: color 0.2s ease !important;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
flex-shrink: 0 !important;
|
||||
margin: 0 !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.completionIndicator {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #22c55e !important;
|
||||
flex-shrink: 0 !important;
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
41
client/src/styles/TaskForm.module.scss
Normal file
41
client/src/styles/TaskForm.module.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.form {
|
||||
// Form container styles
|
||||
}
|
||||
|
||||
.formContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
// Individual field container
|
||||
}
|
||||
|
||||
.fieldGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cancelButton {
|
||||
// Cancel button styles
|
||||
}
|
||||
56
client/src/styles/Tasks.module.scss
Normal file
56
client/src/styles/Tasks.module.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.taskList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.emptyState {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.completedSection {
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.completedTitle {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.completedList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.sheetContent {
|
||||
padding: 1rem;
|
||||
}
|
||||
54
client/src/styles/TodayProgress.module.scss
Normal file
54
client/src/styles/TodayProgress.module.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.card {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.statRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
word-break: break-words;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.completionValue {
|
||||
color: hsl(var(--chart-2));
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
width: 100%;
|
||||
background-color: hsl(var(--muted));
|
||||
border-radius: 9999px;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.progressFill {
|
||||
background-color: hsl(var(--chart-2));
|
||||
height: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.taskStats {
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.taskStatsTitle {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
Reference in New Issue
Block a user