yisroelbaum/Attainly
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

refine today deck layers

Browse source
This commit is contained in:
Yisroel Baum 2026-08-18 21:24:11 +03:00
parent 0ea1f7a21c
commit c91a7b2793
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
1 changed files with 55 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

83
frontend/website/src/views/DashboardView.vue
View file

@ -67,6 +67,10 @@ function overdueLabel(scheduledDate: string): string {
return `Overdue · Due ${formatDate(scheduledDate)}` return `Overdue · Due ${formatDate(scheduledDate)}`
} }
function stackLayerCount(dueCount: number): number {
return Math.min(dueCount - 1, 3)
}
async function completeAssignment(assignmentId: number): Promise<void> { async function completeAssignment(assignmentId: number): Promise<void> {
await schedulesStore.setAssignmentCompleted(assignmentId, true) await schedulesStore.setAssignmentCompleted(assignmentId, true)
} }
@ -115,11 +119,22 @@ async function completeAssignment(assignmentId: number): Promise<void> {
v-for="queue in todayAssignmentQueues" v-for="queue in todayAssignmentQueues"
:key="queue.assignment.schedule.id" :key="queue.assignment.schedule.id"
class="today-assignment-stack" class="today-assignment-stack"
:class="{ 'today-assignment-stack--queued': queue.dueCount > 1 }" :class="[
`today-assignment-stack--layers-${stackLayerCount(queue.dueCount)}`,
{ 'today-assignment-stack--queued': queue.dueCount > 1 },
]"
:data-due-count="queue.dueCount" :data-due-count="queue.dueCount"
:data-today-assignment="queue.assignment.id" :data-today-assignment="queue.assignment.id"
:data-today-schedule="queue.assignment.schedule.id" :data-today-schedule="queue.assignment.schedule.id"
> >
<span
v-for="layerIndex in stackLayerCount(queue.dueCount)"
:key="layerIndex"
aria-hidden="true"
class="today-assignment-stack__layer"
:class="`today-assignment-stack__layer--${layerIndex}`"
data-stack-layer
></span>
<article class="today-assignment"> <article class="today-assignment">
<RouterLink <RouterLink
class="today-assignment-link" class="today-assignment-link"
@ -403,31 +418,43 @@ async function completeAssignment(assignmentId: number): Promise<void> {
} }
.today-assignment-stack--queued { .today-assignment-stack--queued {
padding: 0 0.55rem 0.55rem 0; padding-left: 0.18rem;
} }
.today-assignment-stack--queued::before, .today-assignment-stack--layers-2 {
.today-assignment-stack--queued::after { padding-left: 0.36rem;
}
.today-assignment-stack--layers-3 {
padding-left: 0.54rem;
}
.today-assignment-stack__layer {
position: absolute; position: absolute;
pointer-events: none; top: 0.3rem;
content: ''; right: 0;
} bottom: 0.3rem;
border: 1px solid rgb(24 48 41 / 9%);
.today-assignment-stack--queued::before { border-radius: 0.85rem;
z-index: 1;
inset: 0.28rem 0.28rem 0.28rem 0.28rem;
border: 1px solid rgb(24 48 41 / 10%);
border-radius: 1rem;
background: #eee9dc; background: #eee9dc;
transform: translate(0.28rem, 0.28rem); pointer-events: none;
} }
.today-assignment-stack--queued::after { .today-assignment-stack__layer--1 {
z-index: 0; z-index: 1;
inset: 0.55rem 0 0 0.55rem; left: 0;
border: 1px solid rgb(24 48 41 / 8%); }
border-radius: 1rem;
background: #e5dfd1; .today-assignment-stack__layer--2 {
z-index: 2;
left: 0.18rem;
background: #e9e3d5;
}
.today-assignment-stack__layer--3 {
z-index: 3;
left: 0.36rem;
background: #e4ddce;
} }
.today-assignment-link { .today-assignment-link {
@ -438,12 +465,12 @@ async function completeAssignment(assignmentId: number): Promise<void> {
.today-assignment { .today-assignment {
position: relative; position: relative;
z-index: 2; z-index: 4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 1.4rem; padding: 1.15rem;
border: 1px solid rgb(24 48 41 / 12%); border: 1px solid rgb(24 48 41 / 12%);
border-radius: 1rem; border-radius: 1rem;
background: linear-gradient(135deg, rgb(255 253 247 / 98%), rgb(244 238 225 / 86%)); background: linear-gradient(135deg, rgb(255 253 247 / 98%), rgb(244 238 225 / 86%));
@ -487,7 +514,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.85rem; margin-top: 0.65rem;
} }
.today-assignment__overdue, .today-assignment__overdue,
@ -512,7 +539,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
} }
.today-assignment__path { .today-assignment__path {
margin: 1.75rem 0 0; margin: 1.15rem 0 0;
color: #183029; color: #183029;
font-family: Georgia, 'Times New Roman', serif; font-family: Georgia, 'Times New Roman', serif;
font-size: 1.45rem; font-size: 1.45rem;
@ -523,7 +550,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
margin-top: 1.25rem; margin-top: 0.85rem;
color: #567064; color: #567064;
font-size: 0.76rem; font-size: 0.76rem;
font-weight: 750; font-weight: 750;
@ -534,13 +561,13 @@ async function completeAssignment(assignmentId: number): Promise<void> {
justify-items: start; justify-items: start;
gap: 0.65rem; gap: 0.65rem;
margin-top: auto; margin-top: auto;
padding-top: 1.15rem; padding-top: 0.85rem;
border-top: 1px solid rgb(24 48 41 / 10%); border-top: 1px solid rgb(24 48 41 / 10%);
} }
.assignment-completion-button { .assignment-completion-button {
min-height: 2.5rem; min-height: 2.35rem;
padding: 0.6rem 0.9rem; padding: 0.5rem 0.8rem;
border: 1px solid rgb(24 58 49 / 28%); border: 1px solid rgb(24 58 49 / 28%);
border-radius: 0.7rem; border-radius: 0.7rem;
color: #fffdf7; color: #fffdf7;