From d00cf1a0e85c19a1238ce438fa67909afa9b3325 Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Sat, 19 Jul 2025 10:23:49 +0530 Subject: [PATCH] banners: Improve responsiveness in normal banners. This commit improves the responsiveness of normal banners by adopting a flexbox layout for the label and action buttons. This change better accommodates varying text lengths and button counts in the banners, due to the natural flowy nature of flexboxes. The key logic shift involves using `flex-basis` to manage layout transitions: the label and the group of action buttons now wrap to separate lines when the label's width is less than 60% of the banner query container's width (60cqw). This commit also updates the CSS for navbar banners to align with the new flexbox layout between the label and the group of action buttons, while also ensuring that the layout behavior of these banners remains consistent with the previous implementation. --- web/styles/app_variables.css | 23 ++----- web/styles/banners.css | 94 +++++++++++++++++++---------- web/templates/components/banner.hbs | 24 ++++---- 3 files changed, 81 insertions(+), 60 deletions(-) diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 83be4c82c7..7b32656fca 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -659,23 +659,12 @@ /* Banner grid layout variables */ --banner-horizontal-padding: 0.8125em; /* 13px at 16px/1em */ --banner-vertical-padding: 0.3125em; /* 5px at 16px/1em */ - --banner-grid-template-areas-lg: ". . . . . . banner-close-button banner-close-button" - ". . banner-label . banner-action-buttons . banner-close-button banner-close-button" - ". . . . . . banner-close-button banner-close-button"; - --banner-grid-template-columns-lg: var(--banner-horizontal-padding) 0 auto - minmax(0, 1fr) auto 0 minmax(0, auto) var(--banner-horizontal-padding); - --banner-grid-template-rows-lg: 0.3125em auto 0.3125em; /* 5px at 16px/1em */ - --banner-grid-template-areas-md: ". . . . banner-close-button banner-close-button" - ". . banner-label banner-label banner-close-button banner-close-button" - ". banner-action-buttons banner-action-buttons banner-action-buttons banner-close-button banner-close-button" - ". . . . banner-close-button banner-close-button"; - --banner-grid-template-columns-md: var(--banner-horizontal-padding) 0 - minmax(auto, 1fr) 0 minmax(0, auto) var(--banner-horizontal-padding); - --banner-grid-template-rows-md: 0.3125em auto auto 0.3125em; /* 5px at 16px/1em */ - --banner-grid-template-areas-sm: ". . . . banner-close-button banner-close-button" - ". . banner-label banner-label banner-close-button banner-close-button" - ". banner-action-buttons banner-action-buttons banner-action-buttons banner-close-button banner-close-button" - ". . . . banner-close-button banner-close-button"; + --banner-grid-template-areas: " . . banner-close-button banner-close-button" + ". banner-content banner-close-button banner-close-button" + ". . banner-close-button banner-close-button"; + --banner-grid-template-columns: var(--banner-horizontal-padding) + minmax(0, 1fr) minmax(0, auto) var(--banner-horizontal-padding); + --banner-grid-template-rows: 0.3125em auto 0.3125em; /* 5px at 16px/1em */ /* Popup banner related variables */ --popup-banner-translate-y-distance: 100px; diff --git a/web/styles/banners.css b/web/styles/banners.css index e91a4eba00..f245e6852c 100644 --- a/web/styles/banners.css +++ b/web/styles/banners.css @@ -5,10 +5,10 @@ .banner { box-sizing: border-box; display: grid; - grid-template: var(--banner-grid-template-rows-lg) / var( - --banner-grid-template-columns-lg + grid-template: var(--banner-grid-template-rows) / var( + --banner-grid-template-columns ); - grid-template-areas: var(--banner-grid-template-areas-lg); + grid-template-areas: var(--banner-grid-template-areas); place-items: start; border: 1px solid; border-radius: 6px; @@ -30,8 +30,22 @@ } } +.banner-content { + grid-area: banner-content; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + width: 100%; + gap: 0 0.625em; /* 10px at 16px/1em */ +} + .banner-label { - grid-area: banner-label; + /* We allow the banner label to grow and shrink, and set + the flex basis to 60% of the query container's width. + When the width of the banner label goes below this + flex basis value, the banner action buttons are wrapped + on to the next line. */ + flex: 1 1 60cqw; /* The padding and line-height values for the banner label are identical to those of the action buttons', to match the height of both of these elements. This is required to @@ -44,10 +58,9 @@ } .banner-action-buttons { - grid-area: banner-action-buttons; display: flex; + flex-wrap: wrap; gap: 0.5em; /* 8px at 16px/1em */ - margin-left: 0.625em; /* 10px at 16px/1em */ } .banner-close-button { @@ -62,52 +75,69 @@ } .navbar-alert-banner { - grid-template-columns: - var(--banner-horizontal-padding) minmax(0, 1fr) - auto 0 auto minmax(0, 1fr) minmax(0, auto) var( - --banner-horizontal-padding - ); border: unset; border-bottom: 1px solid; border-radius: 0; place-items: start center; -} -.navbar-alert-banner .banner-action-buttons { - justify-content: center; -} + .banner-content { + justify-content: center; + flex-wrap: nowrap; + } -@container banner (width >= 44em) and (width < 63em) { - .navbar-alert-banner[data-process="desktop-notifications"] { - grid-template: var(--banner-grid-template-rows-md) / var( - --banner-grid-template-columns-md - ); - grid-template-areas: var(--banner-grid-template-areas-md); - text-align: center; + .banner-label { + /* Reset to initial value */ + flex: 0 1 auto; + } + + .banner-action-buttons { + flex-wrap: nowrap; } } -@container banner (width < 44em) { - .banner { - grid-template: var(--banner-grid-template-rows-md) / var( - --banner-grid-template-columns-md - ); - grid-template-areas: var(--banner-grid-template-areas-md); +/* This utility class defines the structure of the medium-type + navbar banners where the banner action buttons are placed + below the banner label. This utility class is required since + unlike the normal banners, the navbar counterparts have + horizontally centered elements, wherein the flex-basis logic + won't apply and we need to manually apply these properties + based on the container size queries below. */ +.navbar-alert-medium-banner { + .banner-content { + flex-direction: column; + align-items: center; + } + + .banner-label { + text-align: center; } .banner-action-buttons { flex-wrap: wrap; - margin-left: 0; + justify-content: center; } +} +@container banner (width >= 44em) and (width < 63em) { + .navbar-alert-banner[data-process="desktop-notifications"] { + @extend .navbar-alert-medium-banner; + } +} + +@container banner (width < 44em) { .navbar-alert-banner { - text-align: center; + @extend .navbar-alert-medium-banner; } } @container banner (width < 25em) { - .banner { - grid-template-areas: var(--banner-grid-template-areas-sm); + .banner-content { + flex-direction: column; + } + + .banner-label { + /* Reset to initial value */ + flex: 0 1 auto; } .banner-action-buttons { diff --git a/web/templates/components/banner.hbs b/web/templates/components/banner.hbs index 38995e459d..7b3a08f32e 100644 --- a/web/templates/components/banner.hbs +++ b/web/templates/components/banner.hbs @@ -1,15 +1,17 @@