infrastructure/conference-website
1
1
Fork 1
Code Issues 14 Pull Requests Releases Activity

UI: Implement Web Assets' theme system, and add 'dark' theme #103972

Merged
Márton Lente merged 23 commits from ui/theme-system into main 2024-09-30 15:03:39 +02:00
Conversation 15 Commits 23 Files Changed 13 +44 -16
2 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a55f2d57e1 - Show all commits

54
conference_main/static/conference_main/styles/_schedule.sass
View File

@ -1,3 +1,44 @@
=theme-dark-schedule
--schedule-container-location-color-l: 65%
--schedule-filters-container-location-bg-color-l: 20%
--schedule-filters-container-location-color-l: 60%
.schedule-container
&.horizontal
.event
backdrop-filter: brightness(90%)
Pablo Vazquez commented 2024-09-27 16:01:27 +02:00
Review
Copy Link

Any reason to limit this to the horizontal layout? The same concept could be used in the vertical schedule.

Any reason to limit this to the horizontal layout? The same concept could be used in the vertical schedule.
Márton Lente commented 2024-09-30 14:49:20 +02:00
Review
Copy Link

Sorry for the late reponse, just noticed the new comments.

I like the idea to display followed/assisting items in the vertical schedule more remarkably, but I think here it should look different, as the vertical layout doesn't have the coloured rows by location. Maybe we should just apply a slightly different tone of grey to highlighted items' backgrounds? Or shall we try to go for location-based colouring here as well, possibly with less saturated tones?

Based on this, I think the existing rule is correct, and we could extend vertical layout styles with additional rules.

Sorry for the late reponse, just noticed the new comments. I like the idea to display followed/assisting items in the vertical schedule more remarkably, but I think here it should look different, as the vertical layout doesn't have the coloured rows by location. Maybe we should just apply a slightly different tone of grey to highlighted items' backgrounds? Or shall we try to go for location-based colouring here as well, possibly with less saturated tones? Based on this, I think the existing rule is correct, and we could extend vertical layout styles with additional rules.
&:hover
backdrop-filter: brightness(85%)
=theme-light-schedule
--schedule-container-location-color-l: 35%
--schedule-filters-container-location-bg-color-l: 10%
--schedule-filters-container-location-color-l: 50%
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-09-27 16:00:46 +02:00
Outdated
Review
Copy Link

Seems that when the button is pressed, it only adds the data-is-checked attribute but it doesn't assign any value. So the user has to reload the page for it to update in real time.

Perhaps we could replace the check:

From:
&:has(button[data-is-checked="data-is-checked"])

To:
&:has(button[data-is-checked])

So it updates as it is pressed.

Seems that when the button is pressed, it only adds the `data-is-checked` attribute but it doesn't assign any value. So the user has to reload the page for it to update in real time. Perhaps we could replace the check: From: `&:has(button[data-is-checked="data-is-checked"])` To: `&:has(button[data-is-checked])` So it updates as it is pressed.
Márton Lente commented 2024-09-30 14:56:17 +02:00
Outdated
Review
Copy Link

Thanks, this is indeed much nicer with the less specificity, and works without page reload! 👍 I updated accordingly.

Thanks, this is indeed much nicer with the less specificity, and works without page reload! 👍 I updated accordingly.
.schedule-container
&.horizontal
.event
backdrop-filter: brightness(110%)
&:hover
backdrop-filter: brightness(115%)
\:root,
[data-theme="light"]
+theme-light-schedule
[data-theme="dark"]
+theme-dark-schedule
@media (prefers-color-scheme: dark)
\:root
+theme-dark-schedule
[data-theme="light"]
+theme-light-schedule
$col-time-width: 8% $col-time-width: 8%
.schedule-container .schedule-container
@ -633,25 +674,12 @@ body.is-scrolled
right: 0 right: 0
.event .event
backdrop-filter: brightness(110%)
background-color: transparent background-color: transparent
transition: backdrop-filter var(--transition-speed) transition: backdrop-filter var(--transition-speed)
&:hover
backdrop-filter: brightness(115%)
.schedule-filters-container .schedule-filters-container
+padding(2, y) +padding(2, y)
[data-theme="dark"]
.schedule-container
&.horizontal
.event
backdrop-filter: brightness(90%)
&:hover
backdrop-filter: brightness(85%)
.scroll-horizontal .scroll-horizontal
padding-top: var(--time-slots-height) padding-top: var(--time-slots-height)
overflow-x: auto overflow-x: auto

6
conference_main/templates/conference_main/presentations/schedule_vertical.pug
View File

@ -54,9 +54,9 @@
} }
.event-location-{{ location.slug }} input:checked ~ label { .event-location-{{ location.slug }} input:checked ~ label {
background-color: hsla(var(--location-hue-{{ location.slug }}), 50%, 50%, 10%); background-color: hsla(var(--location-hue-{{ location.slug }}), 50%, 50%, var(--schedule-filters-container-location-bg-color-l));
border-color: hsla(var(--location-hue-{{ location.slug }}), 50%, 50%, 20%); border-color: hsla(var(--location-hue-{{ location.slug }}), 50%, 50%, 20%);
color: hsl(var(--location-hue-{{ location.slug }}), 50%, 50%); color: hsl(var(--location-hue-{{ location.slug }}), 50%, var(--schedule-filters-container-location-color-l));
} }
.event-location-{{ location.slug }} input:checked ~ label:hover { .event-location-{{ location.slug }} input:checked ~ label:hover {
@ -195,7 +195,7 @@
| {% if event.location.slug %} | {% if event.location.slug %}
li.event-location( li.event-location(
style="color: hsl(var(--location-hue-{{ event.location.slug }}), 80%, 35%);") style="color: hsl(var(--location-hue-{{ event.location.slug }}), 80%, var(--schedule-container-location-color-l));")
| {{ event.location.slug | upper }} | {{ event.location.slug | upper }}
| {% endif %} | {% endif %}