From 7dda5bce563f3685a8bc0a1af0c1dd124f526e6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 24 Sep 2024 12:55:15 +0200 Subject: [PATCH 01/19] Feat: Init web-assets v2 theme system Initialize Web Assets v2 theme systems scripts and styles, and set theme defaults. --- conference/settings.py | 2 +- conference_main/static/conference_main/styles/main.sass | 1 + conference_main/templates/conference_main/_navbar.pug | 4 ++++ conference_main/templates/conference_main/head.pug | 2 +- 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/conference/settings.py b/conference/settings.py index e60b128..adf0fa7 100644 --- a/conference/settings.py +++ b/conference/settings.py @@ -269,7 +269,7 @@ PIPELINE = { 'output_filename': 'js/festival-finals.js', }, 'web-assets': { - 'source_filenames': ('tutti/10_navbar.js',), + 'source_filenames': ('tutti/10_navbar.js', 'tutti/20_theme.js',), 'output_filename': 'js/web-assets.js', 'extra_context': {'async': True, 'defer': True}, }, diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index f1698ba..9c48fc7 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -2,6 +2,7 @@ $font-path: '/static/assets/fonts' // Import Web Assets. @import "../../../../assets_shared/src/styles/main.sass" +@import "../../../../assets_shared/src/styles/_theme_system.sass" @import "_albums.sass" @import "_attendee.sass" diff --git a/conference_main/templates/conference_main/_navbar.pug b/conference_main/templates/conference_main/_navbar.pug index e1f87df..e330ada 100644 --- a/conference_main/templates/conference_main/_navbar.pug +++ b/conference_main/templates/conference_main/_navbar.pug @@ -37,6 +37,10 @@ nav.nav-global(role='navigation') | {% endif %} | {% endif %} + li + button.js-toggle-theme-btn + i.i-adjust.js-toggle-theme-btn-icon + | {% include "conference_main/_navbar_menu_user.pug" %} li diff --git a/conference_main/templates/conference_main/head.pug b/conference_main/templates/conference_main/head.pug index 947d333..3f56c15 100644 --- a/conference_main/templates/conference_main/head.pug +++ b/conference_main/templates/conference_main/head.pug @@ -1,7 +1,7 @@ | {% load static %} | {% load pipeline %} !!! 5 -html(lang="en") +html(data-theme="light", lang="en") head meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1.0') -- 2.30.2 From 5b902e4822debf0693b314ccf5419b58a366c510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 24 Sep 2024 14:32:36 +0200 Subject: [PATCH 02/19] Fix: Variables colour theme specificity --- conference_main/static/conference_main/styles/main.sass | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index 9c48fc7..fbc0553 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -18,11 +18,13 @@ $font-path: '/static/assets/fonts' @import "_sponsors.sass" @import "_utils.sass" -\:root +\:root, +html[data-theme="light"] --body-color-bg: #e9ecef --color-bg: var(--body-color-bg) - --navbar-bg: #1e1e1e +\:root + // TODO: check if component variables table colours are needed --table-border-color: var(--color-bg-tertiary) --table-row-bg-color: var(--color-bg-secondary) -- 2.30.2 From 47cfb2bcaa5b6f89d5423ffdde5190e87acc1ca8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 24 Sep 2024 14:46:54 +0200 Subject: [PATCH 03/19] UI: Change colours static to dynamic Change static colours to dynamic colour variables to enable the theme system base. --- .../static/conference_main/styles/_schedule.sass | 6 +++--- .../templates/conference_main/2023/flatpages/location.pug | 2 +- .../conference_main/2023/presentations/speakers.pug | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index cca3904..ffadb0e 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -218,18 +218,18 @@ body.is-scrolled @include media-breakpoint-down(md) padding-top: 0.5 * $spacer padding-bottom: 0.5 * $spacer - border-bottom: var(--border-width) solid rgba(black, .05) + border-bottom: var(--border-width) solid var(--border-color) .row-rulers-lg @include media-breakpoint-up(lg) - border-top: var(--border-width) solid rgba(black, .05) + border-top: var(--border-width) solid var(--border-color) +padding(3, y) .col-rulers +padding(3, x) @include media-breakpoint-up(lg) - border-left: var(--border-width) solid rgba(black, .05) + border-left: var(--border-width) solid var(--border-color) .col-time @include media-breakpoint-up(lg) diff --git a/conference_main/templates/conference_main/2023/flatpages/location.pug b/conference_main/templates/conference_main/2023/flatpages/location.pug index 32945db..0e9f42b 100644 --- a/conference_main/templates/conference_main/2023/flatpages/location.pug +++ b/conference_main/templates/conference_main/2023/flatpages/location.pug @@ -3,7 +3,7 @@ | {% block head_extra %} style. :root { - --bg-color-container: hsla(0, 0%, 100%, 0.9); + --bg-color-container: var(--box-bg-color); --bg-stripes-color-1: #5F1BED; --bg-stripes-color-2: #84BBDC; --bg-stripes-width: 75px; diff --git a/conference_main/templates/conference_main/2023/presentations/speakers.pug b/conference_main/templates/conference_main/2023/presentations/speakers.pug index 1e5e85d..705fff8 100644 --- a/conference_main/templates/conference_main/2023/presentations/speakers.pug +++ b/conference_main/templates/conference_main/2023/presentations/speakers.pug @@ -3,7 +3,7 @@ | {% block head_extra %} style. :root { - --bg-color-container: hsla(0, 0%, 100%, 0.9); + --bg-color-container: var(--box-bg-color); --bg-color: #5F1BED; --bg-dots-color: #EFAA2A; --bg-dots-width: 300px; -- 2.30.2 From cfd832b503ccc1450f24028d97b82449926dc4f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 24 Sep 2024 16:10:00 +0200 Subject: [PATCH 04/19] UI: Add component event box colour styles for theme system Make component event box colours work with dark and light themes, by removing explicit colour settings and adding backdrop-filter rules. --- .../conference_main/styles/_schedule.sass | 20 ++++++++++++++++++- .../static/conference_main/styles/main.sass | 5 +++++ .../presentations/schedule_horizontal.pug | 1 - 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index ffadb0e..2c04e4e 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -407,6 +407,7 @@ body.is-scrolled .event +box-card + display: flex flex-direction: column +margin(3, bottom) @@ -414,7 +415,7 @@ body.is-scrolled transition: background-color var(--transition-speed) ease-in-out, opacity 250ms ease-in-out &:hover - background-color: white !important + background-color: var(--box-bg-color-hover) text-decoration: none &[data-filtered] @@ -631,9 +632,26 @@ body.is-scrolled position: absolute right: 0 + .event + backdrop-filter: brightness(110%) + background-color: transparent + transition: backdrop-filter var(--transition-speed) + + &:hover + backdrop-filter: brightness(115%) + .schedule-filters-container +padding(2, y) +[data-theme="dark"] + .schedule-container + &.horizontal + .event + backdrop-filter: brightness(90%) + + &:hover + backdrop-filter: brightness(85%) + .scroll-horizontal padding-top: var(--time-slots-height) overflow-x: auto diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index fbc0553..7a47ad9 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -23,6 +23,8 @@ html[data-theme="light"] --body-color-bg: #e9ecef --color-bg: var(--body-color-bg) + --box-bg-color-hover: white + \:root // TODO: check if component variables table colours are needed --table-border-color: var(--color-bg-tertiary) @@ -41,6 +43,9 @@ html[data-theme="light"] +media-sm --page-with-header-content-offset: calc(var(--spacer) * 8) +html[data-theme="dark"] + --box-bg-color-hover: var(--color-bg-secondary) + body.is-scrolled .navbar box-shadow: none diff --git a/conference_main/templates/conference_main/presentations/schedule_horizontal.pug b/conference_main/templates/conference_main/presentations/schedule_horizontal.pug index 2253a7f..49976f5 100644 --- a/conference_main/templates/conference_main/presentations/schedule_horizontal.pug +++ b/conference_main/templates/conference_main/presentations/schedule_horizontal.pug @@ -63,7 +63,6 @@ | {% for event in events %} a.event.js-time-slot( style=" - background-color: hsl(var(--location-hue-{{ location }}), 60%, 97%); left: calc(calc({{ event.start_time_in_minutes}} - {{ events_per_day_per_location_with_range.range_minutes.start }}) * 10px); width: calc({{ event.duration_minutes}}px * {{ events_per_day_per_location_with_range.minute_to_pixel_multiplier }})" id="#event-{{ event.id }}", -- 2.30.2 From 22c47ffaf6d0836a4dbd5cb9499f6c50ee38772f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 24 Sep 2024 16:15:50 +0200 Subject: [PATCH 05/19] UI: Improve style variable box-bg-color-hover contrast --- conference_main/static/conference_main/styles/main.sass | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index 7a47ad9..dc83aa2 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -23,6 +23,7 @@ html[data-theme="light"] --body-color-bg: #e9ecef --color-bg: var(--body-color-bg) + // --box-bg-color-hover: var(--btn-color-bg-hover) --box-bg-color-hover: white \:root @@ -44,7 +45,7 @@ html[data-theme="light"] --page-with-header-content-offset: calc(var(--spacer) * 8) html[data-theme="dark"] - --box-bg-color-hover: var(--color-bg-secondary) + --box-bg-color-hover: var(--btn-color-bg-hover) body.is-scrolled .navbar -- 2.30.2 From a55f2d57e1bbed3c36f0e1c8d348397b97838e42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Wed, 25 Sep 2024 17:04:34 +0200 Subject: [PATCH 06/19] UI: Add style partial schedule mixins for theme system Add schedule style mixins to introduce dynamic contrast for dark and light themes by adjusting location colour luminance values based on active theme. --- .../conference_main/styles/_schedule.sass | 54 ++++++++++++++----- .../presentations/schedule_vertical.pug | 6 +-- 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index 2c04e4e..84cc680 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -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%) + + &: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% + + .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% .schedule-container @@ -633,25 +674,12 @@ body.is-scrolled right: 0 .event - backdrop-filter: brightness(110%) background-color: transparent transition: backdrop-filter var(--transition-speed) - &:hover - backdrop-filter: brightness(115%) - .schedule-filters-container +padding(2, y) -[data-theme="dark"] - .schedule-container - &.horizontal - .event - backdrop-filter: brightness(90%) - - &:hover - backdrop-filter: brightness(85%) - .scroll-horizontal padding-top: var(--time-slots-height) overflow-x: auto diff --git a/conference_main/templates/conference_main/presentations/schedule_vertical.pug b/conference_main/templates/conference_main/presentations/schedule_vertical.pug index 1acc487..909f3da 100644 --- a/conference_main/templates/conference_main/presentations/schedule_vertical.pug +++ b/conference_main/templates/conference_main/presentations/schedule_vertical.pug @@ -54,9 +54,9 @@ } .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%); - 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 { @@ -195,7 +195,7 @@ | {% if event.location.slug %} 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 }} | {% endif %} -- 2.30.2 From eb964dd0ffe1be1ad46903e7c42e45a829399086 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 11:07:47 +0200 Subject: [PATCH 07/19] UI: Add style override list-group-item bg colour Add list-group-item background-colour style override for theme system compatibility. --- conference_main/static/conference_main/styles/main.sass | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index 4eb98a1..9baa1e8 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -270,6 +270,10 @@ button.going-star .form-check-input transform: scale(1.5) translateX(calc(var(--spacer) * -1)) +// TODO: remove rule after Web Assets v2 component nav-pills has been implemented +.list-group-item + background-color: var(--box-bg-color) + // TODO: check and cleanup style definition in Web Assets .table-no-box tr -- 2.30.2 From c342615ef841099ab1fe96b93c2d989949fbba42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 11:13:53 +0200 Subject: [PATCH 08/19] Chore: Add style partial schedule comment theme-system mixins --- conference_main/static/conference_main/styles/_schedule.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index 84cc680..3faa0bb 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -1,3 +1,5 @@ +/* Theme-system mixins to make dynamic location colours contrast work with dark + * and light themes. */ =theme-dark-schedule --schedule-container-location-color-l: 65% --schedule-filters-container-location-bg-color-l: 20% -- 2.30.2 From 492423e787d1a5c77440a644a1109f6e18a1073b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 13:02:21 +0200 Subject: [PATCH 09/19] Cleanup: Remove redundant comment Part of #103972 --- conference_main/static/conference_main/styles/main.sass | 1 - 1 file changed, 1 deletion(-) diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index 9baa1e8..2d3a4e0 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -23,7 +23,6 @@ html[data-theme="light"] --body-color-bg: #e9ecef --color-bg: var(--body-color-bg) - // --box-bg-color-hover: var(--btn-color-bg-hover) --box-bg-color-hover: white \:root -- 2.30.2 From 69b230eaa7799558b287d746691a82cb51871b29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 13:05:30 +0200 Subject: [PATCH 10/19] Cleanup: Remove redundant style override list-group-item Remove redundant style override after component nav-pills has been implemented on main. Part of #103972 --- conference_main/static/conference_main/styles/main.sass | 4 ---- 1 file changed, 4 deletions(-) diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index 2d3a4e0..f3b9148 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -269,10 +269,6 @@ button.going-star .form-check-input transform: scale(1.5) translateX(calc(var(--spacer) * -1)) -// TODO: remove rule after Web Assets v2 component nav-pills has been implemented -.list-group-item - background-color: var(--box-bg-color) - // TODO: check and cleanup style definition in Web Assets .table-no-box tr -- 2.30.2 From 9a06ed64cee1474c5fb74c8391bcb568688221b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 15:08:52 +0200 Subject: [PATCH 11/19] Fix: Update web-assets to v2.0.0-alpha.41 Fixes theme system JS and theme toggle button issues as reported in the pull request description. See the PR for details. Part of #103972 --- assets_shared | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets_shared b/assets_shared index 52a05c4..0435966 160000 --- a/assets_shared +++ b/assets_shared @@ -1 +1 @@ -Subproject commit 52a05c428631d617fee9f50ced9adfeef19ce3d9 +Subproject commit 04359665df0b77048363689e961684d04b18e975 -- 2.30.2 From b34d3f535769afb0163d4490acbcd4e6f0d4c325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 16:22:49 +0200 Subject: [PATCH 12/19] UI: Make style schedule toggle sockets colours theme agnostic Part of #103972 --- conference_main/static/conference_main/styles/_schedule.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index 3faa0bb..370f400 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -106,7 +106,7 @@ $col-time-width: 8% &.toggle i border-radius: var(--spacer) - background-color: white + background-color: currentColor color: currentColor height: var(--spacer) +margin(1, right) -- 2.30.2 From f35c192eeae9a8d86900c97e1a1c3eb6142fc786 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 16:31:22 +0200 Subject: [PATCH 13/19] Fix: Event detail location colour contrast issues in theme dark Part of #103972 --- conference_main/static/conference_main/styles/_schedule.sass | 2 ++ .../conference_main/components/review_header_details.pug | 2 +- .../templates/conference_main/presentations/detail.pug | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index 370f400..c921509 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -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 + --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% diff --git a/conference_main/templates/conference_main/components/review_header_details.pug b/conference_main/templates/conference_main/components/review_header_details.pug index 98b1d7b..fdfe95a 100644 --- a/conference_main/templates/conference_main/components/review_header_details.pug +++ b/conference_main/templates/conference_main/components/review_header_details.pug @@ -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 %} diff --git a/conference_main/templates/conference_main/presentations/detail.pug b/conference_main/templates/conference_main/presentations/detail.pug index a4760f1..c1923d4 100644 --- a/conference_main/templates/conference_main/presentations/detail.pug +++ b/conference_main/templates/conference_main/presentations/detail.pug @@ -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 %} -- 2.30.2 From 956b2eaae2722c8a6df8d9a40eedb43c8453393e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 16:44:37 +0200 Subject: [PATCH 14/19] UI: Add style override form-control disabled and readonly Part of #103972 --- conference_main/static/conference_main/styles/main.sass | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index f3b9148..d60edb3 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -260,6 +260,13 @@ button.going-star /* Web Assets overrides. */ // TODO: check component forms in Web Assets v2 +.form-control + &:disabled, + &[readonly] + background-color: var(--input-color-bg) + color: var(--color-text-secondary) + pointer-events: none + .form-group display: block -- 2.30.2 From 4088f32c867b8f8d03ab389b62a3ce058c8ebdd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 16:51:43 +0200 Subject: [PATCH 15/19] UI: Improve style schedule event items colour contrast in theme dark Increase schedule event items' colour contrasts in theme dark, and make background colours lighter on hover instead of darker to follow existing hover behaviour better. Part of #103972 --- conference_main/static/conference_main/styles/_schedule.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index c921509..09fa46f 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -9,10 +9,10 @@ .schedule-container &.horizontal .event - backdrop-filter: brightness(90%) + backdrop-filter: brightness(75%) &:hover - backdrop-filter: brightness(85%) + backdrop-filter: brightness(80%) =theme-light-schedule -- 2.30.2 From 7bac1d5191a67480166a835d853cab2441ef6d23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 26 Sep 2024 19:00:51 +0200 Subject: [PATCH 16/19] UI: Add style horizontal schedule event favourited styles Add styles to make favourited events colour contrast stronger in horizontal schedule layout. Part of #103972 --- .../conference_main/styles/_schedule.sass | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index 09fa46f..54048cb 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -14,6 +14,18 @@ &:hover backdrop-filter: brightness(80%) + /* Event favourited styles */ + &:has(button[data-is-checked="data-is-checked"]) + backdrop-filter: brightness(125%) saturate(200%) + color: var(--color-text-primary) + + &:hover + backdrop-filter: brightness(130%) saturate(200%) + + .event-header, + .event-speakers + // TODO: @web-assets consider adding variables colours grey shades + color: hsl(0, 0%, 75%) =theme-light-schedule --event-detail-location-color-l: 35% @@ -29,6 +41,17 @@ &:hover backdrop-filter: brightness(115%) + &:has(button[data-is-checked="data-is-checked"]) + backdrop-filter: brightness(90%) saturate(400%) + color: var(--color-text-primary) + + &:hover + backdrop-filter: brightness(95%) saturate(400%) + + .event-header, + .event-speakers + color: hsl(0, 0%, 50%) + \:root, [data-theme="light"] +theme-light-schedule -- 2.30.2 From 2c727af59e1a1cec17f3254f590b8fa1375fdaf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 27 Sep 2024 15:10:10 +0200 Subject: [PATCH 17/19] Chore: Update web-assets to v2.0.0-alpha.42 See the release notes for details. Part of #103972 --- assets_shared | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets_shared b/assets_shared index 0435966..0cdfbd5 160000 --- a/assets_shared +++ b/assets_shared @@ -1 +1 @@ -Subproject commit 04359665df0b77048363689e961684d04b18e975 +Subproject commit 0cdfbd54f695493a549f87162a6a43f29b7f053f -- 2.30.2 From 42cf6d703aacbc83f675d663af368904f5059f3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 27 Sep 2024 15:24:40 +0200 Subject: [PATCH 18/19] UI: Implement web-assets dev-util js init-theme to prevent flickering Implement Web Assets utility JavaScript snippet init-theme introduced in v2.0.0-alpha.42 to initialize the theme system before page load and prevent flickering. Part of #103972 --- conference_main/templates/conference_main/base.pug | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/conference_main/templates/conference_main/base.pug b/conference_main/templates/conference_main/base.pug index 945bc8b..87027c5 100644 --- a/conference_main/templates/conference_main/base.pug +++ b/conference_main/templates/conference_main/base.pug @@ -2,6 +2,13 @@ | {% load pipeline %} | {% load static %} +| {% block head_extra %} +| {% verbatim %} +script. + !function(){{const rootElement=document.documentElement;let themeValue;function getThemeValue(){themeValue=localStorage.getItem("dataTheme")}var data;getThemeValue(),themeValue&&(data=themeValue,getThemeValue(),rootElement.setAttribute("data-theme",data))}}(); +| {% endverbatim %} +| {% endblock head_extra %} + | {% block header %} | {% block jumbotron %} | {% include "conference_main/components/hero.pug" with show_logo=True show_date=True show_location=True show_gradient=True show_overlay=True %} -- 2.30.2 From 766b9d99c7fff314f5b83989bc378fc9c7b3d578 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Mon, 30 Sep 2024 14:53:18 +0200 Subject: [PATCH 19/19] UI: Remove style event favourited selector specificity Remove favourited event style selector's attribute specificity to let style prevail without page reload, when marking an item as favourited. Part of #103972 --- conference_main/static/conference_main/styles/_schedule.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/conference_main/static/conference_main/styles/_schedule.sass b/conference_main/static/conference_main/styles/_schedule.sass index 54048cb..d309c2b 100644 --- a/conference_main/static/conference_main/styles/_schedule.sass +++ b/conference_main/static/conference_main/styles/_schedule.sass @@ -15,7 +15,7 @@ backdrop-filter: brightness(80%) /* Event favourited styles */ - &:has(button[data-is-checked="data-is-checked"]) + &:has(button[data-is-checked]) backdrop-filter: brightness(125%) saturate(200%) color: var(--color-text-primary) -- 2.30.2