paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

container_queries: Add baseline container queries and fallbacks.

Browse Source
This commit is contained in:
Karl Stolley
2025-02-20 14:21:48 -06:00
committed by Tim Abbott
parent c7702ae3ba
commit f27a69be71
1 changed files with 166 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
web/styles/zulip.css
View File

@@ -234,6 +234,12 @@ p.n-margin {
box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
z-index: 110;
@container app (width < $cq_md_min) {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
&.show-feedback-container {
display: block;
animation: feedback-slide-in 0.6s forwards;
@@ -1651,42 +1657,8 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
margin-left: 7px;
}
}
}
body:not(.hide-left-sidebar) {
/* User can clearly see the unread count in the left sidebar. So,
we don't need an indicator here as it will only serve as a disctraction. */
#header-container .column-left .left-sidebar-toggle-unreadcount {
display: none !important;
}
}
@media (width < $xl_min) {
.app-main {
@extend %hide-right-sidebar;
}
.app-main .column-middle {
margin-right: 7px;
}
#navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-right: 7px;
}
.hide-left-sidebar {
#compose-content,
.app-main .column-middle {
margin-left: 7px;
}
@container header-container (width < $cq_xl_min) {
#realm-navbar-icon-logo {
display: inline-block;
}
@@ -1703,31 +1675,66 @@ body:not(.hide-left-sidebar) {
margin-left: var(--left-sidebar-width-with-realm-icon-logo);
}
}
@container app (width < $cq_xl_min) {
#compose-content,
.app-main .column-middle {
margin-left: 7px;
}
}
}
@media (width < $md_min) {
body:not(.hide-left-sidebar) {
/* User can clearly see the unread count in the left sidebar. So,
we don't need an indicator here as it will only serve as a disctraction. */
#header-container .column-left .left-sidebar-toggle-unreadcount {
display: none !important;
}
}
/* We have some regrettable but temporarily necessary code duplication
in the queries that follow.
In browsers that support spec-aligned, em-aware container queries,
we query on the app-main container. That enables breakpoints that
look best at a chose base font size.
However, in browsers that lag the spec, we fall back to the original
media queries. The layout will not look as good as it could, but
essential scrolling behavior will be maintained. */
@container header-container (width < $cq_xl_min) {
#navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
}
}
@container app (width < $cq_xl_min) {
.app-main {
@extend %hide-left-sidebar;
@extend %hide-right-sidebar;
.column-middle {
margin-right: 7px;
}
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-right: 7px;
}
}
@container header-container (width < $cq_md_min) {
.header-main .column-left {
display: none;
}
.app-main .column-middle {
margin-left: 7px;
margin-right: 7px;
}
#navbar-middle {
margin-left: 0;
}
.app-main .column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
#streamlist-toggle {
display: block;
}
@@ -1735,11 +1742,21 @@ body:not(.hide-left-sidebar) {
.top-navbar-container {
margin-left: 40px;
}
}
#feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
@container app (width < $cq_md_min) {
.app-main {
@extend %hide-left-sidebar;
.column-middle {
margin-left: 7px;
margin-right: 7px;
}
.column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
}
#typing_notifications,
@@ -1749,6 +1766,101 @@ body:not(.hide-left-sidebar) {
}
}
/* Begin fallback media queries. */
@media (width < $xl_min) {
.without-container-query-support {
.app-main {
@extend %hide-right-sidebar;
.column-middle {
margin-right: 7px;
}
}
#navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-right: 7px;
}
.hide-left-sidebar {
#compose-content,
.app-main .column-middle {
margin-left: 7px;
}
#realm-navbar-icon-logo {
display: inline-block;
}
#realm-navbar-wide-logo {
display: none;
}
#top_navbar .column-left {
width: auto;
}
#navbar-middle {
margin-left: var(--left-sidebar-width-with-realm-icon-logo);
}
}
}
}
@media (width < $md_min) {
.without-container-query-support {
.app-main {
@extend %hide-left-sidebar;
.column-middle {
margin-left: 7px;
margin-right: 7px;
}
.column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
}
.header-main .column-left {
display: none;
}
#navbar-middle {
margin-left: 0;
}
#streamlist-toggle {
display: block;
}
.top-navbar-container {
margin-left: 40px;
}
#feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-left: 7px;
}
}
}
/* End fallback media queries. */
@media (height < $short_navbar_cutoff_height) {
.app-main .column-right.expanded .right-sidebar,
.app-main .column-left.expanded .left-sidebar {
@@ -1810,6 +1922,9 @@ body:not(.hide-left-sidebar) {
}
}
/* As these adjustments are properly the province of
the viewport, we do not present these mm_min queries
in a corresponding container query block. */
@media (width < $mm_min) {
html {
overflow-x: hidden;