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 +4 -2
3 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f35c192eea - Show all commits

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

@ -1,6 +1,7 @@
/* Theme-system mixins to make dynamic location colours contrast work with dark
* and light themes. */
=theme-dark-schedule
--event-detail-location-color-l: 65%
--schedule-container-location-color-l: 65%
--schedule-filters-container-location-bg-color-l: 20%
--schedule-filters-container-location-color-l: 60%
@ -15,6 +16,7 @@
=theme-light-schedule
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.
--event-detail-location-color-l: 35%
--schedule-container-location-color-l: 35%
--schedule-filters-container-location-bg-color-l: 10%
--schedule-filters-container-location-color-l: 50%

2
conference_main/templates/conference_main/components/review_header_details.pug
View File

@ -7,7 +7,7 @@
| {% if object.status == 'accepted' %}
div.ml-4
small.text-muted.d-block Location
span(style="color: hsl(var(--location-hue-{{ object.location.slug }}), 50%, 50%);")
span(style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, var(--event-detail-location-color-l));")
| {% if object.location.slug %}
| {{ object.location.slug | title }}
| {% else %}

2
conference_main/templates/conference_main/presentations/detail.pug
View File

@ -78,7 +78,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
ul.event-description
| {% if object.location.slug %}
li.event-location(
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, 35%);")
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, var(--event-detail-location-color-l));")
| {{ object.location.slug | upper }}
| {% endif %}