From 7acf2dbf8e16d52b1d359d4d246cd94b8ecc6ffe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 22 Oct 2024 18:28:07 +0200 Subject: [PATCH 1/2] UI: Implement toggle-bars to My conference filters Change My conference filter buttons to toggle-bars for Going and Favorited items. --- .../static/conference_main/scripts/main.js | 4 +-- .../static/conference_main/styles/main.sass | 10 ++++++ .../presentations/schedule_vertical.pug | 36 ++++++++++--------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/conference_main/static/conference_main/scripts/main.js b/conference_main/static/conference_main/scripts/main.js index 03c35ec..0b55e09 100644 --- a/conference_main/static/conference_main/scripts/main.js +++ b/conference_main/static/conference_main/scripts/main.js @@ -169,9 +169,9 @@ function scheduleFilterUpdateFilterStatus(event) { } if (($(event).find(".favorite-star[data-is-checked]").length === 0 && - $(".schedule-filter[data-schedule-filter-type=favorites] > input:checkbox:checked").length) || + $(".schedule-filter[data-schedule-filter-type=favorites] input:checkbox:checked").length) || ($(event).find(".going-star[data-is-checked]").length === 0 && - $(".schedule-filter[data-schedule-filter-type=going] > input:checkbox:checked").length)) { + $(".schedule-filter[data-schedule-filter-type=going] input:checkbox:checked").length)) { $(event).attr("data-filtered-personal", "data-filtered-personal"); } else { $(event).attr("data-filtered-personal", null); diff --git a/conference_main/static/conference_main/styles/main.sass b/conference_main/static/conference_main/styles/main.sass index d10e0e8..ab1ef35 100644 --- a/conference_main/static/conference_main/styles/main.sass +++ b/conference_main/static/conference_main/styles/main.sass @@ -294,3 +294,13 @@ button.going-star td padding-left: var(--spacer) !important padding-right: var(--spacer) !important + +// TODO: @web-assets check toggle-bar sizing +.toggle-bar + max-width: 3.2rem + width: 3.2rem !important + +.toggle-bar-container + align-items: center + display: flex + height: calc(var(--spacer) * 2.5) \ No newline at end of file diff --git a/conference_main/templates/conference_main/presentations/schedule_vertical.pug b/conference_main/templates/conference_main/presentations/schedule_vertical.pug index 6b80a73..2e4ece2 100644 --- a/conference_main/templates/conference_main/presentations/schedule_vertical.pug +++ b/conference_main/templates/conference_main/presentations/schedule_vertical.pug @@ -101,26 +101,30 @@ .schedule-filter.filter-going( data-schedule-filter-type="going", data-schedule-filter-value="only-show-going") - input(type="checkbox", - id="filter-going-only-show-going", - checked=false, - onchange="scheduleFilterToggle(event)", - autocomplete="off") - label.btn.filter-going(for="filter-going-only-show-going") - i.i-user-check - span My Agenda + + .toggle-bar-container + label.me-2.toggle-bar(for="filter-going-only-show-going") + input(type="checkbox", + id="filter-going-only-show-going", + checked=false, + onchange="scheduleFilterToggle(event)", + autocomplete="off") + span.slider + div Going | {% else %} .schedule-filter.filter-favorite( data-schedule-filter-type="favorites", data-schedule-filter-value="only-show-favorites") - input(type="checkbox", - id="filter-favorites-only-show-favorites", - checked=false, - onchange="scheduleFilterToggle(event)", - autocomplete="off") - label.btn.filter-favorite(for="filter-favorites-only-show-favorites") - i.i-heart - span Favorites + + .toggle-bar-container + label.me-2.toggle-bar(for="filter-favorites-only-show-favorites") + input(type="checkbox", + id="filter-favorites-only-show-favorites", + checked=false, + onchange="scheduleFilterToggle(event)", + autocomplete="off") + span.slider + div Favorites | {% endif %} | {% else %} .schedule-filters -- 2.30.2 From 1b501f637ff80b5e3501741b45f9d8bb37652266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 29 Oct 2024 15:15:32 +0100 Subject: [PATCH 2/2] UI: Flip template schedule_vertical label and toggle-bar order Part of #103981 --- .../conference_main/presentations/schedule_vertical.pug | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/conference_main/templates/conference_main/presentations/schedule_vertical.pug b/conference_main/templates/conference_main/presentations/schedule_vertical.pug index 5122a55..4ff0e49 100644 --- a/conference_main/templates/conference_main/presentations/schedule_vertical.pug +++ b/conference_main/templates/conference_main/presentations/schedule_vertical.pug @@ -103,28 +103,28 @@ data-schedule-filter-value="only-show-going") .toggle-bar-container - label.me-2.toggle-bar(for="filter-going-only-show-going") + div.me-2 Going + label.toggle-bar(for="filter-going-only-show-going") input(type="checkbox", id="filter-going-only-show-going", checked=false, onchange="scheduleFilterToggle(event)", autocomplete="off") span.slider - div Going | {% else %} .schedule-filter.filter-favorite( data-schedule-filter-type="favorites", data-schedule-filter-value="only-show-favorites") .toggle-bar-container - label.me-2.toggle-bar(for="filter-favorites-only-show-favorites") + div.me-2 Favorites + label.toggle-bar(for="filter-favorites-only-show-favorites") input(type="checkbox", id="filter-favorites-only-show-favorites", checked=false, onchange="scheduleFilterToggle(event)", autocomplete="off") span.slider - div Favorites | {% endif %} | {% else %} .schedule-filters -- 2.30.2