Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Move `10px` navbar bottom padding above message header. 

This is a more natural place for this extra padding than below the
navbar. Padding below navbar was primarily needed to hide the
message content above the sticky header while scrolling the message feed.
We are still able to do with this change without partially hiding the
loading message indicator.

Fixes #25159
This commit is contained in:
Aman Agrawal 2023-04-28 16:07:06 +00:00 committed by Tim Abbott
parent 0d51e2d1f9
commit b33438eb55
3 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/message_list_view.js
View File

@ -1468,7 +1468,7 @@ export class MessageListView {
// header has a box-shodow of `1px` at top but since it doesn't impact // header has a box-shodow of `1px` at top but since it doesn't impact
// `y` position of the header, we don't take it into account during calculations. // `y` position of the header, we don't take it into account during calculations.
const header_props = header.getBoundingClientRect(); const header_props = header.getBoundingClientRect();
// This value is dependent upon margin-bottom applied to recipient row. // This value is dependent upon space between two `recipient_row` message groups.
const margin_between_recipient_rows = 10; const margin_between_recipient_rows = 10;
const sticky_or_about_to_be_sticky_header_position = const sticky_or_about_to_be_sticky_header_position =
visible_top + header_props.height + margin_between_recipient_rows; visible_top + header_props.height + margin_between_recipient_rows;

3
web/src/recent_topics_ui.js
View File

@ -888,7 +888,6 @@ export function show() {
$("#message_feed_container").hide(); $("#message_feed_container").hide();
$("#recent_topics_view").show(); $("#recent_topics_view").show();
set_visible(true); set_visible(true);
$(".header").css("padding-bottom", "0px");
unread_ui.hide_unread_banner(); unread_ui.hide_unread_banner();
@ -925,8 +924,6 @@ export function hide() {
$("#recent_topics_view").hide(); $("#recent_topics_view").hide();
set_visible(false); set_visible(false);
$(".header").css("padding-bottom", "10px");
// This solves a bug with message_view_header // This solves a bug with message_view_header
// being broken sometimes when we narrow // being broken sometimes when we narrow
// to a filter and back to recent topics // to a filter and back to recent topics

23
web/styles/zulip.css
View File

@ -195,12 +195,6 @@ p.n-margin {
display: none; display: none;
} }
.top-messages-logo {
/* Since padding under message header is not transparent
we need to position it below the padding. */
padding-top: var(--header-padding-bottom);
}
.scheduled-messages-loading-logo, .scheduled-messages-loading-logo,
.alert-zulip-logo, .alert-zulip-logo,
.top-messages-logo, .top-messages-logo,
@ -222,6 +216,13 @@ p.n-margin {
} }
} }
.top-messages-logo {
/* Since padding under message header is not transparent
we need to position it below the padding. */
padding-top: var(--header-padding-bottom);
margin-bottom: 0;
}
#feedback_container { #feedback_container {
display: none; display: none;
position: absolute; position: absolute;
@ -294,7 +295,6 @@ p.n-margin {
z-index: 102; /* Needs to be higher than .alert-bar-container */ z-index: 102; /* Needs to be higher than .alert-bar-container */
width: 100%; width: 100%;
height: var(--header-height); height: var(--header-height);
padding-bottom: var(--header-padding-bottom);
/* Since the headers are sticky, we need non-transparent background. */ /* Since the headers are sticky, we need non-transparent background. */
background-color: hsl(0deg 0% 100%); background-color: hsl(0deg 0% 100%);
} }
@ -1183,9 +1183,9 @@ td.pointer {
.message_list { .message_list {
.recipient_row { .recipient_row {
/* This value should be in sync with `margin_between_recipient_rows` /* Browser overlaps extra top padding of message header and
in `message_list_view`. */ the bottom border message if this margin is not present. */
margin-bottom: 10px; margin-bottom: 1px;
border-radius: 5px; border-radius: 5px;
.message_row:last-of-type { .message_row:last-of-type {
@ -1212,7 +1212,8 @@ td.pointer {
.message_header { .message_header {
position: sticky; position: sticky;
top: var(--sidebar-top); padding-top: var(--header-padding-bottom);
top: var(--header-height);
z-index: 3; z-index: 3;
box-shadow: 0 -1px 0 0 var(--color-background); box-shadow: 0 -1px 0 0 var(--color-background);