The progressively rendered table extends too far down, causing the page
to scroll needlessly, which then causes there to be two scrollbars — a
scrollbar for the table and a view scrollbar outside that.
Fixes: #6391.
This fixes the issue on subdomain.zulipchat.com/login/ where the
organization name will have characters such as the lowercase "g"
cut off near the bottom due to the line-height being too small and
the overflow being hidden.
This re-arranges the properties to fix that issue.
This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.
Fixes: #6291.
This commit is a bit complicated, because we do full redraws of
the topic list frequently, and we don't want to randomly obliterate
our "No more topics found" message, so we need to keep a bit of
extra state around.
This fixes the characters like “g” and “l” from overflowing the input
bounds while maintaining the previous height of the input box itself.
Fixes: #6665.
This removes the `box-sizing` attribute on the spectrum input that was
causing the characters to overflow the bounds of the padding, which
would cut off things like the bottom of a “g” or the top of an “f”.
Fixes: #6361.
The home icon was too far to the right and did not have equal
padding within the <li> tab so this makes the padding an equal
10px on the left and right and none on the top and bottom.
This adds perfectScrollbar to the default streams table
because it currently is inside another perfectScrollbar which
actually makes it impossible to scroll the table normally without
enabling the perfectScrollbar library on this.
Fixes: #6391.
If a reactions picker is open then don't auto-hide the element over
which it is based off. Earlier we were inconsistently auto-hiding
some elements while keeping others visible.
Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
This now shows `blueslip.error` and other JS exceptions in development
in the alert box at the top of the page. Hopefully this will make it
a lot easier to notice newly introduced JS exceptions when working on
Zulip.
Tweaked by tabbott to handle all JS errors, not just blueslip.error.
Fixes: #6155.
This makes the JavaScript tooltips more legible by increasing
the font size and decreasing the line-height, while also increasing
the opacity of the tooltip from 0.8 => 1.
Until we get search bubbles, the search text is kind of a
distracting detail for most users. This just makes the
height 2px smaller for now. This will also make more text
show up on mobile web.
This responsively hides the last row of testimonials that only has a
single one it the row at certain widths in which the grid is a [4, 4,
1] layout, making it simply [4, 4].
This removes the scaling feature where a plan that a user
hovers over would increase in size and have a box shadow.
This used to be here because there was a clickable region that
would pop open an overlay that would have more plan information,
but that feature no longer exists.
This changes the second plans block label to dark grey responsively
when the width is less than 1390px because the white text does not
appear on that portion of the white background when the block collapses
down a line.
The moving label is acting like a placeholder here, and should be positioned
as such for consistency with the rest of the site. The two forms with a
moving label are /accounts/find/ and /accounts/password/reset.
This restructures organization settings and permissions to be
more accurately grouped and for the permissions page to not be too
long.
CHANGES:
PROFILE:
(this was split out)
organization-profile-admin.handlebars:
form #1:
name
description
(SUBMIT)
avatar:
(UPLOAD)
(DELETE)
SETTINGS:
organization-settings-admin.handlebars:
language (mostly untouched)
message editing:
time limit/history/retention
message feed:
mandatory-topics
preview images
preview websites
PERMISSIONS:
organization-permissions-admin.handlebars
(mostly stuff was removed)
Joining:
restrict domains
require invite
User Identity:
name changes
email changes
Streams/Emoji:
creating streams:
waiting period (ADDED)
adding emojis
(SUBMIT) for whole panel
The profile group (name, description, avatar) were split into a new
page that did not previously exist, and the permissions was stripped
of message settings (message editing, message feed), but keeping the
"waiting period" input and putting it in the "Streams & custom emoji"
section.
Fixes: #5844.
That's what the font is actually called, and should help future Zulip
developers save time trying to figure out what's up and why our font
is unrelated to the "Humbug" font on the Internet.
Previously, the font-weight for 500 did not exist in our set, so
all of those examples defaulted to 400. This fixes them to stay
as they previously were by migrating them to a font weight of 400.
The sidebar height was set to shorter than what the sidebar actually
was and so it would overflow the parent. By resetting it, it now
will not overflow.
Fixes: #6315.
This cleans up the styling of the page by adding the white box
around the text content, and by making the header the same
`.get-started` class as other headers in the portico-signup group.
This removes some of the min-height constraint on .flex that would
push the footer down futher than it should have been and would
introduce scrolling to the page.
This removes the old flex model for the footer to stay at the bottom
of short pages and instead always just positions the footer below
the portico content and makes the content generally tall enough that
issues don't occur.
This replaces the old footer that has one section with a small list of
items. This expands the footer to have multiple sections.
Actual content tweaked and tagged for i18n by tabbott.
This fixes the padding above the –– OR –– line on the register form.
This also fixes the left-alignment of the form starting at 795px
wide.
Fixes: #6265.
This adds perfectScrollbar to the `.subscriber_list_container` to
allow for the table to scroll naturally again. This was broken
because when perfectScrollbar is put on the parent element, any
naturally scrolling element within it will not scroll naturally
anymore.
Tweaked by tabbott to update the scrollbar on rerender.
Fixes: #6215.
The hack used to make the placeholders in the ::after element
work correctly is no longer needed, so we can revert the width
of 200% back to 100%.
The hack is no longer required because Vaida split these into
two tables, of which in the second table there are no columns,
which means that 100% represents the table width rather than
the width of the first column.
Fixes: #6271.
This refactor will facilitate making it possible to set CSS properties
on this controls span; in particular, we're hoping to disable user
selection of the whitespace in this region.
The main side effect of this refactor is that we need to add JS code
to also hide the icon-vector-pencil element, since it's now in a new
span.
This makes the /help/ sidebar more discoverable at windows less
than 1000px in width because it makes it stick out a bit when it
is closed with the hamburger menu at the top.
Fixes: #6038.
The bot API key when selected in the "Your bots" panel would have
some whitespace due to the fact that the HTML markup would make
some space between the span and button.
Fixes: #6189.
This refactors and fixes unicode issues where entities don't display
properly due to being a special character that seems to be rendered
incorrectly in a non-deterministic way every time.
Use perfectScrollbar on settings sidebar, since the default scrollbar
makes settings menu break when not enough vertical space available.
Add perfectScrollbar to main settings section, and reset the scrollbar
position when switching between tabs.
Also delete the z-index on `.settings-list` since it makes the
perfectScrollbar covered.
Fixes#5216.
This adds the authors to the Zulip repository on GitHub from
/authors/ along with re-styling the page to fit the same
aesthetic as /for/open-source/ and other product-pages.
In the case of no subdomains, the input is too large because the JS
calculated size does not account for padding. The correct solution is
to do this in JS.
A large portion of the diff for landing-page.js is due to refactoring the
contents of integrations_search into top level UI update functions.
State flows as follows: dispatch(action) -> render(state) -> update UI
Routes now use pushState instead of hashes.
On transition between categories scrolling position is fixed,
and on transition between catalog and integration sub-pages the page
scrolls to the top.
On some monitors it appears as though there's a slight gap between
the bottom of the wave and the top of the section below. This moves
the wave down a pixel to ensure the gap disappears.
Fixes: #6064.
This fixes the registration padding to not be really large. It was an
issue of margin + padding instead of using margin for both where the
result would be max(margin1, margin2).
This keeps hotspot icons positioned at the front of the message
viewport but behind sidebars (i.e. the left sidebar has a z-index
of 103). Hotspots associated with elements outside of the message
viewport should be individually adjusted at the bottom of hotspots.css.
This is a redesign of the features landing page from the current style
that includes the new sections in a grid format as well as some new
high-quality sections.
The overflow was set to "hidden". I'm unsure of how this was even
working on desktop, but the #user-presences div certainly would
not scroll on mobile. This enables mobile scrolling.
Before the user profile bounding box width was not set so it
would overflow the 240px and there would be grey space next to
the avatar. Now the width is always maintained and long text
is cut into multiple lines.
While demoing Zulip at PyCon, I learned that it is hard to
distinguish topics from streams in our left sidebar.
Indenting them by a few pixel seems to make it more clear
that topics belong to a stream.
There is a "user-select: none" (cross-browser) that was put on
the #bottom_whitespace div, but the div doesn't actually have any
content that can be selected, and it also makes it difficult to
deselect selected text because when clicked over it will save the
current selection.
This makes the avatar portion more responsive and efficient on many
screen settings and also fixes some of the design incongruences present
on the page.
This changes the markdown section and sidebar to be the correct
height on mobile along with correcting the broken footer to always
appear below the content.
Fixes: #5798.
This redesigns the /help/ page sets to be a single page app that uses
history.pushState to work the same as the old app.
The big new feature is that now we have the index in a nicely designed
left sidebar.
Our current workflow for creating a new stream allows the user to
invite as many other users as they like but since there can be
mistakes in doing so, we now open a modal with a warning if the
number of invites are more than 100 just to confirm that user indeed
wanted to do this.
Fixes: #1663.
This system hasn't been in active use for several years, and had some
problems with it's design. So it makes sense to just remove it to declutter
the codebase.
Fixes#5655.
- Move the chevron and the message count a bit towards
left.
- Make changes in the position of message count in
global_filters to align it with of message count in
stream_filters.
This fixes the overlapping of stream popover with the
scrollbar in the stream list.
Fixes: #5552.
For bots and users who have not logged in for a long time the presence information is not known. For the these users make the presence indicator hidden.
Added a dropdown in the organization settings page with a search-box and
required styles. Also added an element to disable it. Added a method to
populate the dropdown using list_rendering.js. Also altered response to
the event of deletion of the notifications stream on the frontend. On
selection of a new stream or on clicking 'Disable', a patch request is
made with stream-id to /json/realm.
Fixes: #3708.
This fixes the faulty spacing around the various icons in
stream accessibility option under the create new stream modal. This
regression was introduced in 7e71bf.
This removes the old base button style which was a blue button and
kills the unnecessary .white class which was essentially just acting as
the new button base.
This then removes all references throughout the settings/subscriptions
pages to those button styles.
This also fixes the strange button styles that changed the :hover and
:active opacity to 0.05 which led to unpredictable results on various
backgrounds.
* change emoji-container to 'flex' display inorder to support ordering
of the contents (emojis).
* order emojis after each filter. The ordering is based on search string
and is similar to the ordering in emoji typeahead.
Fixes#4806.
Rationale: For the more off-to-the-side edit history view, changes
are easier to digest by highlighting deleted content in red followed
immediately by added and changed content in green.
TODO: Toggle for showing the edited messages without highlighting;
deleted content would not be shown in this view.
Force display of the top-most recipient_bar's recipient_row_date
when the floating_recipient_bar is just about to overlap and
becomes hidden while user is scrolling.
Fixes#4844.
The realm avatar icon on the login and registration pages was
being set as a background image, which could vanish in high
contrast mode in many browsers. Converted it to an img tag and
verified that it is still styled correctly. I think the empty
alt attribute (to remove it from the audio description) is
appropriate in this context, since the realm name and description
are already provided immediately afterwards in the page content.
Fixes#4889.
24cbd6113 changed the line height of katex HTML to avoid overlapping
lines in wrapped math displays. But the change also applied to inline
math, resulting in large vertical gaps in a multi-line paragraph
containing inline math elements.
This fixes the reactions to not break a new line by changing them from
a weird combination of “float: left” and “display: block” (inlined), to
just “display: inline-block”.
With fixes from Harshit Bansal for an issue with using the hotkeys in
a filtered popover.
Fixes: #4818.
This cleans up the styling of the organization and the user settings
components to be more responsive and have more consistent styling with
the rest of the overlays.
Previously, the sum (capital sigma) operator would become
misaligned so that the lower and upper bounds are placed in
the wrong location. Changing the line height fixes this alignment.
Also, previously, wrapping long lines of TeX did not work, as often,
the different lines of math would overlap with each other.
Fixes#4657.
This is system unfortunately has a rather complicated calculation to
compute the offsets correctly, but the net effect here is that the top
section of the Zulip window is much more space-efficient.
Shrinking the tab bar underpadding, part of this change, fixes#4444.
We only need the underpadding to be as tall as the space above the
floating recipient bar, which is definitely less than 10px, so I don't
anticipate regressions caused by this.
This commit addresses to issues with the left sidebar:
The cursor flickering when hovering over topics, and
the cursor not becoming a pointer when resting just right
of a topic's name (in a clickable area).
This is a follow-up to #4675.
Can be added to the landing pages via:
+ {% include 'zerver/compare.html' %}
+
I'm avoiding adding that include into the landing pages until we have
time to do a bit of tweaking of the styling to integrate better into
/hello/ (primarily color-wise).
Most of the work for this was done by Brock, huge thanks to him!
This enforces a max-width of 1024px on the #settings overlay.
This commit also cleans up the "Your Account" tab to display
correctly without the avatar bleeding over to the next line.
This changes the styling of the user profile popup to be responsive
to mobile devices. In this case it is converted to a modal form using
flex to center it on devices with screen sizes under 768px in width.
Fixes#4669.
This doesn't completely fix settings responsiveness, but it's a big
step along the way. Outstanding issues include:
1. When switching tabs from settings to organization, it will launch
the first item which is more annoying in this view since it brings you
into that tab. Haven’t decided on an elegant solution to this yet.
2. Sidebar scrolling doesn’t work. I have to restructure how the top
section and bottom sections of content are displayed to fix this.
Likely by enforcing min-height of 100% - bottom height on the top piece.
3. Most of it is actually reasonably responsive but some isn’t, and
should be fixed on a case-by-case.
The avatars were previously their natural width, however the avatars
should always be 100% width since the height and width of the images
are known to always be equal.
Before this commit, hovering over the blank area of a stream
would not reflect its "clickability". This behavior is
inconsistent with other clickable lists, such as the user sidebar.
This commit changes the cursor to a pointer when hovering over a
stream and removes annoying pointer-default-pointer changes when
hovering with the mouse over multiple users in the user sidebar.
This removes scaling from the emojis by changing the background size to
a lower value and then allowing for the widths and heights of the
emojis to be proportionally smaller.
The transform: scale property would cause many more repaints in Chrome
and other browsers than should have been necessary which would render
messages above and below the feed light grey boxes that would
momentarily flash as blank before filling with content.
Modified by tabbott to use a percentage in the background-size.
Fixes#4660.
Without changing how we render emoji in messages or changing the data
set used for emoji names, this switches us to the superior
percentage-based system for choosing which emoji from the spritesheet
to select and the iamcal sprite sheets.
It requires some small changes to CSS to ensure emoji are centered
properly in the new design.
Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
Tables were previously improperly using the <tbody> to show the headers
so it was not obvious that the styling for <thead> did not represent
the styling of the rest of the tables anymore, so this normalizes
the styling to be consistent with how it looked when the first row
was in the <tbody>.
This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.
Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.
Fixes#4122.
It's technically the number of users yesterday. Also, "number of active
users today" suggests something like daily actives today, whereas this graph
currently shows 2-week actives.
I changed the watch_manual_resize function to return the listener
functions it creates, and then these are used to remove the event
listeners before the edit box is hidden.
Reusing code from the main compose_message component so that resizing now
behaves correctly. This means that when the user tries to resize vertically,
the autoresize code is disabled, and the textbox reverts to manual resizing.
Fixes#4573
This restructures the <a> tag to be clickable essentially anywhere
within the <li> tags, unlike before where due to it being “inline”, you
had to hover over the text in particular.
This completes a major redesign of the Zulip login and registration
pages, making them look much more slick and modern.
Major features include:
* Display of the realm name, description and icon on the login page
and registration pages in the subdomains case.
* Much slicker looking buttons and input fields.
* A new overall style for the exterior of these portico pages.
This makes the height of the list-items all 24px and changes
the home icon to be a slightly larger 16px instead of 14px which
looked visually smaller than the other icons.
This fixes an issue with topic names overlapping in the left sidebar.
While we're doing that, it makes sense to shrink the maximum size of
the topic input box, to discourage sending with topics that will be
cut off.
This changes the right sidebar unread count styling to match the left
sidebar styling — in that they all now should have a 4px border radius
on the edges of the unread count blocks.
Note that this code is disabled until the infrastructure for the
feature can be finished.
Tweaked by tabbott to use slightly cleaner names for the various sets.
This fixes the /me elements to be display inline-block and inline
rather than display block with top and left properties.
This also fixes an unrelated issue with emoji reactions not being
able to be clicked on with /me messages.
Fixes: #4218.
When a message update comes back from the server and replaces an
old message, it should fade in. There are two components to the fade:
1. The message fades in from opacity: 0 => 1.
2. The "edited" text will transform from X: -10 => X: 0.
This fixed the fact that the scrollbar for this popover was super ugly
on Linux, while also ensuring that we have a consistent 6 emoji per
row in the popover (an important detail for the arrow hotkeys).
Transfer css from right-sidebar.css to components.css to make it reusable.
The 'margin-bottom' property is removed from 'input-append' class as
it does not affect the styling of the element.
The height of the settings page content is not quite as tall as the
settings page could allow which makes for an empty white space at the
bottom of the settings content container.
The tabs can have text inside them that is wider than 90px, especially
in some unexpected cases (e.g. a translation longer than the original
English string).
This type of tabs can be seen in the following popover menus:
- Stream subscriptions
- Help (with hotkeys, formatting info, etc.)
- Settings
Now text wider than the tab is ellipsized so it doesn't cause any
problem with the rest of the layout, except in the help popover (where
it gets wrapped).
This changes the font size and weight of the popver at the bottom
of the screen (hover over "?" to see) to be a larger font size
(increased to 0.75rem from 11px) and to a bolder font weight
(500 from 300) which improves the readability of it.
In this commit we just adjust the position of user profile popover
opened when we click upon buddy from buddy list to view user profile.
The new position ensures that the little blue border visible from back
due to pointed to message is completely hidden by the popover.
In this commit we remove the extra padding appearing around the
user profile images. This can be only reproduced when opening
user profile from buddy list.
This better sets expectatations for the fact that in Zulip, the
Organization settings UI is available read-only to non-administrator
users.
Tweaked by tabbott to update some additional references.
In this we fix the positioning of the loading spinner on the home page
when its loaded for the first time. First time here does not mean first
time use but means first time of a new session.
This fixes the height of the content body to be 100% - 45px instead
of 100% - 60px which is a fix necessary due to the previous change
in height of the settings navbar.
* Change the classes and ids of different widgets and modals
and make suitable changes in `admin.js`.
* Remove any other occurrences of `alias` or `realm_alias`
from admin.js.
This `overflow: hidden` constraint would make it so that modals
embedded in the sections would have their edges cut off. This fixes
that and doesn’t seem to cause any other regressions.
Fixes#4208.
The default is too tight for easily distinguishing paragraphs. This
change increases it slightly, while keeping the last paragraph's
margin at the original value.
Brock Whittaker
Steve Howell
Rishi Gupta
Harshit Bansal
Tommy Ip
Cynthia Lin
Shubham Dhama
Tim Abbott
Vaida Plankyte
Rafid Aslam
Jack Zhang
Steve Howell
Sawant Shah
Vaida
Srimukh
Vaida Plankyte
tejaskasetty
Sampriti Panda
Cory Lynch
Vishnu Ks
vaibhav
Yago González
Abhijeet Kaur
Akhil
Aditya Bansal
David Coleman
Jeremy Bowman
Reid Barton
derAnfaenger
Rohitt Vashishtha
Jack Zhang
digi0ps
Italo Batista
Raghav Jajodia
Kamal Marhubi