We have already re-added the bootstrap CSS rules defined using
"table-bordered" class in the specific files where required and
thus this commit removes them from bootstrap.css.
We do not use classes like "success", "warning", "info"
and "error" for "tr" elements used in tables and thus
we can remove the related CSS from bootstrap.css.
We also do not have selectors of the form ".table .table"
and so we can remove that CSS from bootstrap.css as well.
ALso, the CSS defined using ".table tbody + tbody" to
set the border is not required as we already set borders
on th and td elements.
The browser defaults for font-weight for `th` elements
is "bold" so we can remove the CSS to set font-weight
from bootstrap.css.
The html for tables used by us has a following structure-
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
So, as per the above structure, we do not have th elements
inside tbody and td elements inside thead and thus we can
remove the bootstrap CSS rules for these cases. Also, we
always have a thead before tbody, so tbody:first-child CSS
can also be removed.
We use "tfoot" element only in realm_domains_modal.hbs
template and this table does not have table-bordered class.
The bootstrap CSS rules for "tfoot" elements are only for
the "tfoot" elements inside a table with "table-bordereds"
class so we can safely remove the bootstrap CSS.
We have added the bootstrap CSS rules for blockquote elements
to the specific elements in previous commits and thus we can
safely remove these from bootstrap.css.
The "label" class was only used for the labels shown in
activity support page. This commit adds the required CSS
rules to activity.css and removes them from bootstrap.css.
We use "small" element only to show secondary details in
a typeahead option. This commit re-adds bootstrap CSS
rule to the specific element in compose.css and removes
the CSS from bootstrap.css.
Also, we do not use small elements inside any of h1, h2,
h3, h4 and blockquote elements, so the CSS for those can
be safely removed.
We use input-append class only for some search elements
in the app and the CSS rules applied by bootstrap which
are really used are "white-space" and "margin-bottom"
for a couple of ".input-append" elements and "margin-left"
property on clear button which is re-added to the CSS for
specific elements in this commit.
Others are either redundant or overridden by the other CSS
for the specific elements.
The border-radius property for the clear button was applied
but since we use "x" for it, there is no border for that
button and hence it is redundant.
This commit removes the CSS for "text" type input elements
from bootstrap.css as we have already added the required
CSS rules to the specific elements in their specific files.
This commit re-adds bootstrap CSS for text inputs in realm details
page by using a more specific selector in activity.css. The CSS
added for search input includes bootstrap CSS applied using
".search-query" and "input[type="text"]" selectors.
We remove the CSS for search-query CSS from bootstrap.css
as the search element in app navbar already overrides the
bootstrap CSS.
This is a prep commit for removing bootstrap CSS for text type
inputs.
We use url type inputs in the add and edit custom field modals
and also to show the url type custom fields in "Profile" panel
and "Manage user" modal.
This commit re-adds the bootstrap CSS rules to these specific
input elements using modal_url_input and settings_url_input
class and thus removes the CSS for url type inputs from
bootstrap.css.
We might replace the new class added here with a common class
for all type of inputs in further commits.
We use email type inputs only in portico pages and
the bootstrap CSS is already overridden by CSS
defined in portico_signin.css. Only outline property
was being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css in
the previous commit as password and email type inputs
have common CSS.
Thus, we can remove the bootstrap CSS for email type
inputs safely.
We use password type inputs for API key and password
change modal in the main app and in login, register
and password reset pages.
For the portico pages, i.e. login, register and
password reset pages, the bootstrap CSS is already
overridden by our custom CSS defined in
portico_signin.css and some of the CSS added by
bootstrap is redundant. Only outline property was
being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css
in this commit.
For the inputs used in app, i.e. API key and password
change modal, we have already added the CSS rules of
Bootstrap using "modal_password_input" class.
Thus, we can remove the CSS for password type inputs
from bootstrap.css.
The "pull-left" class was used for hidden file type input
in compose_control_buttons.hbs and in the copy code button
in codeblocks. It was only used to set the float property
in CSS, but we do not need to set it and removing it does
not make any change in the position of these elements.
So, this commit removes the pull-left class and its CSS
from bootstrap.css as well.
For the file type input, it is already hidden and after
removing the float property also, it is positioned at the
same place due to ordering of elements in HTML.
For the copy code button in codeblocks, it is postioned
using "position" and "right" attributes and removing
"float" property has no effect.
We use pull-right class for copy button with the multi-use
invite link only and this commit adds CSS for that specific
element. This commit then removes the bootstrap CSS for
pull-right class and also removes pull-right class from the
copy button since it is no longer required.
This commit adds the required bootstrap CSS rules for fieldset
elements to the specific selector in portico_signin.css and
removes the CSS from bootstrap.css.
We use input-block-level class only for search input
and this commit adds the required bootstrap rules for
it to the specific elements in search.css. So, we can
safely remove the CSS defined for this class in
bootstrap.css.
We use "submit" type inputs in dev login page. Only "cursor"
CSS was applied to those elements from bootstrap and this
commit adds it to those elements in portico_signin.css and
removes the CSS in bootstrap.css and bootstrap-btn.css.
We use "input-xxlarge" class for search box in activity
support page only. This commit adds the width property
in activity.css for the search box and rest of the CSS
applied using this class was redundant and can be removed
safely.
Currently, we are in the process of removing bootstrap out of the current
Zulip codebase. A quick git grep on btn-info shows that the class is only
used in `templates/corporate/billing.html`. But it doesn't take advantage
or use most of the styling rules that are set.
We should get rid of those rules as it's not being used and help simplify
the process in removing bootstrap.
When search bar is empty and we've reached that state
by using the `backspace` key. There are no suggestions
as there are when you select an empty search bar.
The cause of this was an explicit prevention of this
suggestion box in `typeahead.js` so that the
`backspace` key is free to interact with the other
elements.
The fix here is to add an optional `hideOnEmpty` option
so that if we want this suggestion box to appear we can
set this option to `false` and this behavior will be
prevented.
This option is enabled for the search input when pills are not
enabled.
Fixes: #25062.
Previously the typeahead container was being created at the bottom
of `body`, and its width (and `top` and `left`) were being set to
move it to the right position.
Now it sits in the search box container, which gives it the correct
position and width by default. This is better for DOM readability,
and is also better for the new 100% width (which is part of the
search bar redesign) because it can change width more smoothly
with the search bar when the page changes width.
This commit adds custom functionality to the bootstrap typeahead
to allow the typehead to be placed in the search box container
(whereas previously, it could only be appended to `body`).
Until now, the typeahead was hidden on clicking outside only if the last
click was not on the header. This happened because clicking the header would
blur the input, and any other click then would not trigger the blur event
(which is responsible for hiding the typeahead).
Now we refocus the input after clicking the header, so that clicking
elsewhere blurs the input and hides the typeahead.
In this commit, we move the progress bar styling out of the legacy
bootstrap.css and move it to a dedicated CSS file. This is a step
forward towards the ongoing effort to remove the use of Bootstrap
from the Zulip codebase.
The new CSS file, progress_bar.css, is added to common.ts, since it
is used in both the webapp and portico pages.
Fixes#23628.
This commit removes the width property for inputs from
bootstrap.css. We have already set the width for the
specific text inputs in previous commits. For other
type of inputs (like checkbox, radio, file, etc.),
there is no need to set the width as they are hidden
or we already set width for them.
This is a part of bootstrap removal project.
Previously, there is a bug where the position of the typeahead is off
whenever the user switches from stream typeahead to topic typeahead
in the compose box. The typeahead header was not hidden before
calculation of the position based on container height. These changes
will include the header before calculating for the position.
Removed a redundant call to bootstrap typeahead's `lookup` function when
the `automated` function returns true, which was causing the streams
typeahead to show up briefly before the topic typeahead on pressing `>`
immediately after a stream name.
Updates `markdown.css` and `rendered_markdown.css` for the rules
in `bootstrap.css` that were being used to style code elements and
removes the now redundant/ignored rules from `bootstrap.css`.
We use "checkbox" class for label elements. We have already
added the CSS for these elements in components.css and thus
we can remove this CSS from bootstrap.css.
We hide most of the native checkbox type input elements using
"clip: rect(0, 0, 0, 0)", as we instead make our custom checkbox
using span element. Native checkbox is used in emails page in
development environment for which we have already added CSS
in previous commit.
This commit removes the CSS rules set for checkbox type inputs
as part of our bootstrap removal project.
We do not have any checkbox inputs inside any element with
form-inline class, so we can remove the CSS in bootstrap
which is used to set rules for checkbox inputs inside
form-inline element.
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>
Sahil Batra
Aman Agrawal
Joelute
Lakshay Mittal
evykassirer
N-Shar-ma
Ishita Gupta
Anders Kaseorg
Lauryn Menard