public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Colour events to make them visible

Browse source
This commit is contained in:
Hornwitser 2025-02-27 19:18:39 +01:00
parent 093a6816bc
commit 1217104cd2
2 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
ui/timetable.module.css
View file

@ -38,5 +38,9 @@
} }
.break { .break {
background-color: rgb(78, 78, 143); background-color: color-mix(in oklab, var(--background), rgb(50, 50, 255) 60%);
}
.event {
background-color: color-mix(in oklab, var(--background), rgb(255, 125, 50) 60%);
} }

6
ui/timetable.tsx
View file

@ -387,7 +387,11 @@ export default function Timetable() {
<tbody> <tbody>
{locations.map(location => <tr key={location.id}> {locations.map(location => <tr key={location.id}>
<th>{location.name}</th> <th>{location.name}</th>
{locationRows.get(location.id)!.map((row, index) => <td key={index} colSpan={row.span}> {locationRows.get(location.id)!.map((row, index) => <td
key={index}
colSpan={row.span}
className={row.slots.size ? styles.event : undefined}
>
{[...row.slots].map(slot => eventBySlotId.get(slot.id)!.name).join(", ")} {[...row.slots].map(slot => eventBySlotId.get(slot.id)!.name).join(", ")}
</td>)} </td>)}
</tr>)} </tr>)}