Zulip's select widgets have a 30px height; this comes from Bootstrap
but is also generally nice for visual consistency.
In modals, we use a 15px font-size, instead of the 14px used in the
rest of the app, and in that context, the 4px vertical padding plus
30px fixed height resulted in the text not being vertically aligned.
Fix this by removing that vertical padding; all of our select elements
with these classes appear to position the text in the center of the
dropdown through other CSS mechanisms.
Modal that were used as dialog boxes for editing info
had issues with long heading text int .modal__title,
This commit add word-break to break words and avoid
abrupt ui in such cases.
The flex-direction property for modal__content should
be set to column as we want to display the elements.
This does not affect most of the modals since they
do not have multiple direct child elements that are
visible at same time and the data-simplebar attribute
already sets the "flex-direction: column" property to
the elements where it is used.
But in the email address visibility modal on user
registration page, there are multiple direct child
elements for the "modal__content" element and we need
to set "flex-direction: column" property for them to
work correctly. We also change the width of select
element in the modal to "fit-content" to avoid it
taking the whole width even when not required.
This commit also fixes the bug in login_to_access
modal, since the `modal__content` for it also
has two direct child elements.
This commit adds modal_text_input class to text inputs
in modals to set width of them as set by bootstrap.
This class is used to set the width of inputs to 206px,
as we will be removing the boostrap rule which sets width
of the input in further commits.
postcss-preset-env transpiles this back as necessary. (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
The "display: flex" property was added to ".modal__title"
element in 9e4aa19ac in #24194 to fix overlay of long
name in user profile modal (#23781).
Due to this change, the space between words in heading of
"Archive stream" modal is being removed.
This commit fixes it by adding "display: flex" only to the
title of user profile modal and not all the modals. The
heading in "Archive stream" modal is not perfect but there
is ongoing work to fix it and till then this commit changes
it to be the same as it was before adding flex property.
There is no major change in other modals, except that the
space between heading and help-link widget has increased
which was anyways the case before adding the flex property
and that can be modified later if we want to.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).
Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules. This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack. It also shrinks the release tarball by 3%.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
evykassirer
Lakshay Mittal
Aman Agrawal
m-e-l-u-h-a-n
Sahil Batra
Anders Kaseorg
Hardik Dharmani
Ganesh Pawar