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

fluid_layout: Fix narrow description not aligned with content.

Browse Source 
Fixes #30619

We adjust the left margin of middle column to place the header middle
column next the left sidebar to fix the alignment issue.
This commit is contained in:
Aman Agrawal
2025-02-27 11:06:05 +00:00
committed by Tim Abbott
parent a3d591b337
commit b60ac90714
3 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/realm_logo.ts
View File

@@ -6,6 +6,7 @@ import {current_user, realm} from "./state_data.ts";
import * as ui_util from "./ui_util.ts"; import * as ui_util from "./ui_util.ts";
import * as upload_widget from "./upload_widget.ts"; import * as upload_widget from "./upload_widget.ts";
import type {UploadFunction} from "./upload_widget.ts"; import type {UploadFunction} from "./upload_widget.ts";
import {user_settings} from "./user_settings.ts";
export function build_realm_logo_widget(upload_function: UploadFunction, is_night: boolean): void { export function build_realm_logo_widget(upload_function: UploadFunction, is_night: boolean): void {
let logo_section_id = "#realm-day-logo-upload-widget"; let logo_section_id = "#realm-day-logo-upload-widget";
@@ -87,12 +88,23 @@ export function render(): void {
$("#realm-night-logo-upload-widget .image-block").attr("src", realm.realm_night_logo_url); $("#realm-night-logo-upload-widget .image-block").attr("src", realm.realm_night_logo_url);
} }
const $realm_logo = $<HTMLImageElement>("#realm-navbar-wide-logo");
if (settings_data.using_dark_theme() && realm.realm_night_logo_source !== "D") { if (settings_data.using_dark_theme() && realm.realm_night_logo_source !== "D") {
$("#realm-navbar-wide-logo").attr("src", realm.realm_night_logo_url); $realm_logo.attr("src", realm.realm_night_logo_url);
} else { } else {
$("#realm-navbar-wide-logo").attr("src", realm.realm_logo_url); $realm_logo.attr("src", realm.realm_logo_url);
} }
$realm_logo.on("load", () => {
const logo_width = $realm_logo.width();
if (logo_width) {
$("html").css(
"--realm-logo-current-width",
logo_width / user_settings.web_font_size_px + "em",
);
}
});
change_logo_delete_button( change_logo_delete_button(
realm.realm_logo_source, realm.realm_logo_source,
$("#realm-day-logo-upload-widget .image-delete-button"), $("#realm-day-logo-upload-widget .image-delete-button"),

6
web/styles/app_variables.css
View File

@@ -256,6 +256,12 @@
20.6429em - var(--left-sidebar-right-margin) 20.6429em - var(--left-sidebar-right-margin)
); );
--realm-logo-max-width: 12.5em; /* 200px at 16px em */ --realm-logo-max-width: 12.5em; /* 200px at 16px em */
/* Value updated on realm_logo.render() */
--realm-logo-current-width: var(--realm-logo-max-width);
/* 10px is just extra margin for content separation */
--middle-column-left-margin-fluid-layout: calc(
var(--header-height) + var(--realm-logo-current-width) + 10px
);
/* Sidebar width is 1/3 of the screen at smaller /* Sidebar width is 1/3 of the screen at smaller
sizes, but gets held to the left sidebar's max width. sizes, but gets held to the left sidebar's max width.
This is very useful for areas in the CSS codebase This is very useful for areas in the CSS codebase

6
web/styles/zulip.css
View File

@@ -1599,6 +1599,12 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
.app-main .column-middle { .app-main .column-middle {
margin-left: 7px; margin-left: 7px;
} }
@container header-container (width > $cq_md_min) {
#navbar-middle {
margin-left: var(--middle-column-left-margin-fluid-layout);
}
}
} }
@container header-container (width < $cq_xl_min) { @container header-container (width < $cq_xl_min) {