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