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

css: Use a variable to track bottom_whitespace height. 

Since we want the same space in recent topics to display the
compose box without overlapping with any other topics, it makes
sense to use a common variable.
This commit is contained in:
Aman Agrawal 2023-05-31 00:01:39 +05:30 committed by Tim Abbott
parent 839af9ed8d
commit 086db7621c
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/resize.js
View File

@ -120,7 +120,7 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
export function resize_bottom_whitespace() { export function resize_bottom_whitespace() {
const bottom_whitespace_height = get_bottom_whitespace_height(); const bottom_whitespace_height = get_bottom_whitespace_height();
$("#bottom_whitespace").height(bottom_whitespace_height); $("html").css("--max-unexpanded-compose-height", `${bottom_whitespace_height}px`);
// The height of the compose box is tied to that of // The height of the compose box is tied to that of
// bottom_whitespace, so update it if necessary. // bottom_whitespace, so update it if necessary.
// //

2
web/styles/recent_topics.css
View File

@ -91,7 +91,7 @@
expensive repaint. The downside of not doing so is that the scrollbar is not visible to user when expensive repaint. The downside of not doing so is that the scrollbar is not visible to user when
user is at the bottom of scroll container when the compose box is open. user is at the bottom of scroll container when the compose box is open.
*/ */
margin-bottom: 40vh; margin-bottom: var(--max-unexpanded-compose-height);
} }
#recent_topics_filter_buttons { #recent_topics_filter_buttons {

10
web/styles/zulip.css
View File

@ -118,6 +118,14 @@ body {
We expect `resize.js` to update this once UI is initialized. */ We expect `resize.js` to update this once UI is initialized. */
--recent-topics-filters-height: 50px; --recent-topics-filters-height: 50px;
/*
Maximum height of the compose box when it is not in expanded state. This
is equal to the height of `#bottom_whitespace`. We expect resize.js to
replace it with its pixel calculation since even if `vh` has great support,
it can change depending on browser / OS on mobile devices.
*/
--max-unexpanded-compose-height: 40vh;
/* Colors used across the app */ /* Colors used across the app */
--color-background-private-message-header: hsl(46deg 35% 93%); --color-background-private-message-header: hsl(46deg 35% 93%);
--color-background-private-message-content: hsl(45deg 20% 96%); --color-background-private-message-content: hsl(45deg 20% 96%);
@ -2346,7 +2354,7 @@ nav {
#bottom_whitespace { #bottom_whitespace {
display: block; display: block;
height: 300px; height: var(--max-unexpanded-compose-height);
} }
.operator_value { .operator_value {