From 23b8ac0eab33e469487b4f35783ec0acf89bd595 Mon Sep 17 00:00:00 2001 From: evykassirer Date: Tue, 18 Mar 2025 11:33:45 -0700 Subject: [PATCH] settings: Replace two pane container classnames with a generic one. --- web/src/resize.ts | 2 +- web/src/stream_settings_components.ts | 4 ++- web/src/user_group_edit.ts | 6 ++-- web/styles/subscriptions.css | 31 +++++++------------ .../stream_settings_overlay.hbs | 2 +- .../user_group_settings_overlay.hbs | 2 +- 6 files changed, 22 insertions(+), 25 deletions(-) diff --git a/web/src/resize.ts b/web/src/resize.ts index ac59afd479..c5541e124f 100644 --- a/web/src/resize.ts +++ b/web/src/resize.ts @@ -139,7 +139,7 @@ export function resize_stream_subscribers_list(): void { return; } - const $subscriptions_info = $("#subscription_overlay .subscriptions-container .right"); + const $subscriptions_info = $("#subscription_overlay .two-pane-settings-container .right"); const classes_above_subscribers_list = [ ".display-type", // = stream_settings_title ".subscriber_list_settings_container .stream_settings_header", diff --git a/web/src/stream_settings_components.ts b/web/src/stream_settings_components.ts index eb0d00205d..88691a1ecd 100644 --- a/web/src/stream_settings_components.ts +++ b/web/src/stream_settings_components.ts @@ -99,7 +99,9 @@ export function get_active_data(): { } { const $active_row = $("div.stream-row.active"); const valid_active_id = Number.parseInt($active_row.attr("data-stream-id")!, 10); - const $active_tabs = $(".subscriptions-container").find("div.ind-tab.selected"); + const $active_tabs = $("#subscription_overlay .two-pane-settings-container").find( + "div.ind-tab.selected", + ); return { $row: $active_row, id: valid_active_id, diff --git a/web/src/user_group_edit.ts b/web/src/user_group_edit.ts index a590be0a20..d5e9f998ea 100644 --- a/web/src/user_group_edit.ts +++ b/web/src/user_group_edit.ts @@ -1216,7 +1216,7 @@ function empty_right_panel(): void { function open_right_panel_empty(): void { empty_right_panel(); - const tab_key = $(".user-groups-container") + const tab_key = $("#groups_overlay .two-pane-settings-container") .find("div.ind-tab.selected") .first() .attr("data-tab-key"); @@ -1302,7 +1302,9 @@ export function is_group_already_present(group: UserGroup): boolean { } export function get_active_data(): ActiveData { - const $active_tabs = $(".user-groups-container").find("div.ind-tab.selected"); + const $active_tabs = $("#groups_overlay .two-pane-settings-container").find( + "div.ind-tab.selected", + ); const active_group_id = user_group_components.active_group_id; let $row; if (active_group_id !== undefined) { diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 4cf04b2674..dcf0d5d7cd 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -280,8 +280,8 @@ h4.user_group_setting_subsection_title { display: inline; } -.subscriptions-container .subscriptions-header .fa-chevron-left, -.user-groups-container .user-groups-header .fa-chevron-left { +.two-pane-settings-container .subscriptions-header .fa-chevron-left, +.two-pane-settings-container .user-groups-header .fa-chevron-left { position: relative; transform: translate(-50px, 0); opacity: 0; @@ -291,13 +291,14 @@ h4.user_group_setting_subsection_title { padding: 2px 10px; cursor: pointer; + visibility: hidden; transition: 0.3s ease; transition-property: opacity, transform; } -.user-groups-container .user-groups-header.slide-left .fa-chevron-left, -.subscriptions-container .subscriptions-header.slide-left .fa-chevron-left, +.two-pane-settings-container .user-groups-header.slide-left .fa-chevron-left, +.two-pane-settings-container .subscriptions-header.slide-left .fa-chevron-left, #settings_overlay_container .settings-header.mobile.slide-left .fa-chevron-left { @@ -342,7 +343,7 @@ h4.user_group_setting_subsection_title { } } -.subscriptions-container { +#subscription_overlay .two-pane-settings-container { container: subscriptions / inline-size; } @@ -359,7 +360,7 @@ h4.user_group_setting_subsection_title { ((width >= $settings_overlay_sidebar_collapse_breakpoint) and (width < calc(80em + 80px))) or ((width < $settings_overlay_sidebar_collapse_breakpoint) and (width <= 36em)) ) { - #subscription_overlay .subscriptions-container { + #subscription_overlay .two-pane-settings-container { .left { .list-toggler-container { height: 5em; @@ -399,8 +400,7 @@ h4.user_group_setting_subsection_title { } } -.user-groups-container, -.subscriptions-container { +.two-pane-settings-container { position: relative; height: 95%; border-radius: 4px; @@ -431,10 +431,6 @@ h4.user_group_setting_subsection_title { background-color: var(--color-background-modal-bar); border-bottom: 1px solid var(--color-border-modal-bar); - .fa-chevron-left { - visibility: hidden; - } - .exit { font-weight: 600; color: hsl(0deg 0% 67%); @@ -1420,12 +1416,11 @@ div.settings-radio-input-parent { } @media (width < $lg_min) { - .user-groups-container, - .subscriptions-container { + .two-pane-settings-container { max-width: 95%; } - .subscriptions-container .left .list-toggler-container { + .two-pane-settings-container .left .list-toggler-container { flex-wrap: wrap; } @@ -1445,8 +1440,7 @@ div.settings-radio-input-parent { Longer-term we should extract this logic two-column-overlay class to read more naturally. */ @container settings-overlay (width < $settings_overlay_sidebar_collapse_breakpoint) { - .user-groups-container, - .subscriptions-container { + .two-pane-settings-container { position: relative; overflow: hidden; @@ -1494,8 +1488,7 @@ div.settings-radio-input-parent { #subscription_overlay, #groups_overlay { - .user-groups-container, - .subscriptions-container { + .two-pane-settings-container { height: 95%; } diff --git a/web/templates/stream_settings/stream_settings_overlay.hbs b/web/templates/stream_settings/stream_settings_overlay.hbs index 08c27bda73..c80e3aaf5a 100644 --- a/web/templates/stream_settings/stream_settings_overlay.hbs +++ b/web/templates/stream_settings/stream_settings_overlay.hbs @@ -1,6 +1,6 @@
-
+
{{t 'Channels' }} diff --git a/web/templates/user_group_settings/user_group_settings_overlay.hbs b/web/templates/user_group_settings/user_group_settings_overlay.hbs index 5ddd692299..0ed899db3e 100644 --- a/web/templates/user_group_settings/user_group_settings_overlay.hbs +++ b/web/templates/user_group_settings/user_group_settings_overlay.hbs @@ -1,6 +1,6 @@
-
+
{{t 'User groups' }}