generated from ludops/ludops-skeleton
feat: made the 'whenIHaveTime' section more UX friendly
Build and Deploy / build-and-push (push) Successful in 1m19s
Details
Build and Deploy / build-and-push (push) Successful in 1m19s
Details
This commit is contained in:
Ludo
parent
1ccfeb29fb
commit
3c88a44946
|
|
@ -11,6 +11,12 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: #e8e8e8;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -57,7 +63,6 @@ h1 {
|
|||
color: #111;
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -126,6 +126,7 @@ function App() {
|
|||
tasks={todaysTasks}
|
||||
onComplete={handleCompleteTask}
|
||||
/>
|
||||
<div className="section-divider" />
|
||||
<CreateTaskForm onCreateTask={handleCreateTask} />
|
||||
<Timeline tasks={tasks} onDeleteTask={handleDeleteTask} />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -116,4 +116,77 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* When I have time — drawer */
|
||||
.wiht-drawer {
|
||||
width: 100%;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wiht-drawer:hover {
|
||||
border-color: #de6c90;
|
||||
background: rgba(170, 59, 255, 0.03);
|
||||
}
|
||||
|
||||
.wiht-drawer--open {
|
||||
border-style: solid;
|
||||
border-color: #de6c90;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: none;
|
||||
background: rgba(170, 59, 255, 0.04);
|
||||
}
|
||||
|
||||
.wiht-drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.wiht-drawer-icon {
|
||||
font-size: 13px;
|
||||
color: #de6c90;
|
||||
width: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wiht-drawer-label {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.wiht-drawer:hover .wiht-drawer-label {
|
||||
color: #de6c90;
|
||||
}
|
||||
|
||||
.wiht-drawer--open .wiht-drawer-label {
|
||||
color: #de6c90;
|
||||
}
|
||||
|
||||
.wiht-drawer-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #de6c90;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 2px 9px;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wiht-drawer-body {
|
||||
border: 2px solid #de6c90;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
padding: 16px;
|
||||
margin-bottom: 4px;
|
||||
background: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,31 +35,34 @@ export default function TodaysTasks({ tasks, onComplete }: TodaysTasksProps) {
|
|||
)}
|
||||
</section>
|
||||
|
||||
<section className="task-section">
|
||||
<h2
|
||||
className="section-title section-title--clickable"
|
||||
onClick={() => setShowWhenIHaveTime(!showWhenIHaveTime)}
|
||||
>
|
||||
{t.whenIHaveTime}
|
||||
<span className="count-badge">{whenIHaveTimeTasks.length}</span>
|
||||
<span className="toggle-icon">{showWhenIHaveTime ? '▾' : '▸'}</span>
|
||||
</h2>
|
||||
{showWhenIHaveTime && (
|
||||
whenIHaveTimeTasks.length === 0 ? (
|
||||
{/* When I have time — collapsible drawer */}
|
||||
<div
|
||||
className={`wiht-drawer${showWhenIHaveTime ? ' wiht-drawer--open' : ''}`}
|
||||
onClick={() => setShowWhenIHaveTime(!showWhenIHaveTime)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && setShowWhenIHaveTime(v => !v)}
|
||||
>
|
||||
<div className="wiht-drawer-header">
|
||||
<span className="wiht-drawer-icon">{showWhenIHaveTime ? '▾' : '▸'}</span>
|
||||
<span className="wiht-drawer-label">{t.whenIHaveTime}</span>
|
||||
<span className="wiht-drawer-badge">{whenIHaveTimeTasks.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showWhenIHaveTime && (
|
||||
<div className="wiht-drawer-body">
|
||||
{whenIHaveTimeTasks.length === 0 ? (
|
||||
<p className="no-tasks">{t.nothingHere}</p>
|
||||
) : (
|
||||
<div className="task-grid">
|
||||
{whenIHaveTimeTasks.map(task => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onComplete={onComplete}
|
||||
/>
|
||||
<TaskCard key={task.id} task={task} onComplete={onComplete} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export type Locale = 'en' | 'fr';
|
|||
|
||||
export const translations = {
|
||||
en: {
|
||||
appName: 'TODO',
|
||||
appName: 'Stuff to do',
|
||||
// API status
|
||||
statusLoading: 'Connecting to API…',
|
||||
statusOk: '✓ API & database connected',
|
||||
|
|
@ -52,7 +52,7 @@ export const translations = {
|
|||
switchLang: 'FR',
|
||||
},
|
||||
fr: {
|
||||
appName: 'TODO',
|
||||
appName: 'Y\'a des trucs à faire ?',
|
||||
// API status
|
||||
statusLoading: 'Connexion à l\'API…',
|
||||
statusOk: '✓ API & base de données connectées',
|
||||
|
|
|
|||
Loading…
Reference in New Issue