paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

banners: Improve responsiveness in normal banners.

Browse Source 
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.
This commit is contained in:
Sayam Samal
2025-07-19 10:23:49 +05:30
committed by Tim Abbott
parent b26e54b724
commit d00cf1a0e8
3 changed files with 81 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/styles/app_variables.css
View File

@@ -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;

94
web/styles/banners.css
View File

@@ -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 {

24
web/templates/components/banner.hbs
View File

@@ -1,15 +1,17 @@
<div {{#if process}}data-process="{{process}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}banner banner-{{intent}}">
<span class="banner-label">
{{label}}
</span>
<span class="banner-action-buttons">
{{#each buttons}}
{{#if this.intent}}
{{> action_button .}}
{{else}}
{{> action_button . intent=../intent}}
{{/if}}
{{/each}}
<span class="banner-content">
<span class="banner-label">
{{label}}
</span>
<span class="banner-action-buttons">
{{#each buttons}}
{{#if this.intent}}
{{> action_button .}}
{{else}}
{{> action_button . intent=../intent}}
{{/if}}
{{/each}}
</span>
</span>
{{#if close_button}}
{{> icon_button custom_classes="banner-close-action banner-close-button" icon="close" intent=intent}}