paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 15:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

popup_banners: Align popup banners to center using transform.

Browse Source 
This commit aligns the popup banners horizontally by using transform,
and removes the need for `pointer-events: none` — which made the
scrolling buggy due to gaps in between the banners.
This commit is contained in:
Sayam Samal
2025-04-30 15:59:46 +05:30
committed by Tim Abbott
parent b90b5f4047
commit 229fd4114a
2 changed files with 7 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/styles/alerts.css
View File

@@ -44,8 +44,10 @@
position: fixed; position: fixed;
/* Offset to account for the top padding + 5px from the top. */ /* Offset to account for the top padding + 5px from the top. */
top: calc(5px + (-1 * var(--popup-banner-translate-y-distance))); top: calc(5px + (-1 * var(--popup-banner-translate-y-distance)));
left: 0; left: 50%;
transform: translateX(-50%);
width: 100%; width: 100%;
max-width: 900px;
z-index: 220; z-index: 220;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
@@ -53,8 +55,10 @@
/* Set top padding to account for the translate-y motion of the /* Set top padding to account for the translate-y motion of the
animation to prevent the vertical scroll bar from appearing. */ animation to prevent the vertical scroll bar from appearing. */
padding-top: var(--popup-banner-translate-y-distance); padding-top: var(--popup-banner-translate-y-distance);
/* Allow click events to passthrough in any area without the alerts. */
pointer-events: none; @media (width < $lg_min) {
max-width: 90%;
}
} }
.alert-box { .alert-box {
@@ -62,7 +66,6 @@
/* Using column-reverse flex direction enables a stack-like /* Using column-reverse flex direction enables a stack-like
behavior where the most recent alert is always on top. */ behavior where the most recent alert is always on top. */
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center;
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
@@ -70,11 +73,9 @@
@extend .alert-animations; @extend .alert-animations;
box-sizing: border-box; box-sizing: border-box;
max-width: 900px;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
background-color: hsl(0deg 0% 100%); background-color: hsl(0deg 0% 100%);
pointer-events: auto;
position: relative; position: relative;
@@ -164,13 +165,6 @@
} }
} }
/* @media queries */
@media (width < $lg_min) {
.alert-box .alert {
max-width: 90%;
}
}
#request-progress-status-banner { #request-progress-status-banner {
display: none; display: none;
align-items: center; align-items: center;

8
web/styles/banners.css
View File

@@ -193,13 +193,5 @@
.popup-banner { .popup-banner {
@extend .popup-banner-animations; @extend .popup-banner-animations;
pointer-events: auto;
max-width: 900px;
width: 100%; width: 100%;
/* Here the container width == viewport width,
so we can work with the media breakpoints. */
@container banner (width < $lg_min) {
max-width: 90%;
}
} }