RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

now hilights the current day in the timetable

Browse source
This commit is contained in:
RezHackXYZ 2025-05-08 16:27:14 +05:30
parent 38538a4b28
commit 19fbdfd1b5
2 changed files with 59 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/IdleScreen/EditTimetable.svelte
View file

@ -16,6 +16,7 @@
onchange={() => { onchange={() => {
newTable(table); newTable(table);
}} }}
bind:value={time} bind:value={time}
/> />
{/each} {/each}

70
src/IdleScreen/timeTable.svelte
View file

@ -81,33 +81,73 @@
{/each} {/each}
</div> </div>
<div class="Row"> <div class="Row">
<span class="DayOfWeek">Monday</span> {#if new Date().getDay() == 1}
<span class="DayOfWeek NavHighlight">Monday</span>
{:else}
<span class="DayOfWeek">Monday</span>
{/if}
{#each table.Monday as time} {#each table.Monday as time}
<span>{time}</span> {#if new Date().getDay() == 1}
<span class="highlight">{time}</span>
{:else}
<span>{time}</span>
{/if}
{/each} {/each}
</div> </div>
<div class="Row"> <div class="Row">
<span class="DayOfWeek">Tuesday</span> {#if new Date().getDay() == 2}
<span class="DayOfWeek NavHighlight">Tuesday</span>
{:else}
<span class="DayOfWeek">Tuesday</span>
{/if}
{#each table.Tuesday as time} {#each table.Tuesday as time}
<span>{time}</span> {#if new Date().getDay() == 2}
<span class="highlight">{time}</span>
{:else}
<span>{time}</span>
{/if}
{/each} {/each}
</div> </div>
<div class="Row"> <div class="Row">
<span class="DayOfWeek">Wednesday</span> {#if new Date().getDay() == 3}
<span class="DayOfWeek NavHighlight">Wednesday</span>
{:else}
<span class="DayOfWeek">Wednesday</span>
{/if}
{#each table.Wednesday as time} {#each table.Wednesday as time}
<span>{time}</span> {#if new Date().getDay() == 3}
<span class="highlight">{time}</span>
{:else}
<span>{time}</span>
{/if}
{/each} {/each}
</div> </div>
<div class="Row"> <div class="Row">
<span class="DayOfWeek">Thursday</span> {#if new Date().getDay() == 4}
<span class="DayOfWeek NavHighlight">Thursday</span>
{:else}
<span class="DayOfWeek">Thursday</span>
{/if}
{#each table.Thursday as time} {#each table.Thursday as time}
<span>{time}</span> {#if new Date().getDay() == 4}
<span class="highlight">{time}</span>
{:else}
<span>{time}</span>
{/if}
{/each} {/each}
</div> </div>
<div class="Row"> <div class="Row">
<span class="DayOfWeek">Friday</span> {#if new Date().getDay() == 5}
<span class="DayOfWeek NavHighlight">Friday</span>
{:else}
<span class="DayOfWeek">Friday</span>
{/if}
{#each table.Friday as time} {#each table.Friday as time}
<span>{time}</span> {#if new Date().getDay() == 5}
<span class="highlight">{time}</span>
{:else}
<span>{time}</span>
{/if}
{/each} {/each}
</div> </div>
</div> </div>
@ -131,7 +171,6 @@
display: flex; display: flex;
gap: 5px; gap: 5px;
} }
span { span {
font-size: 20px; font-size: 20px;
color: white; color: white;
@ -141,7 +180,6 @@
width: 140px; width: 140px;
text-align: center; text-align: center;
} }
.Header > span { .Header > span {
background-color: #30492e; background-color: #30492e;
} }
@ -149,4 +187,12 @@
width: 120px; width: 120px;
background-color: #30492e; background-color: #30492e;
} }
.highlight {
background-color: #707070;
display: block;
}
.NavHighlight {
background-color: #3b8235;
display: block;
}
</style> </style>