Note from tabbott: While this initial version is experimental and
definitely incomplete, we expect to have a solid version done over the
next few weeks (after more refactoring). We're merging this now to
make it easy to test both versions when refactoring our CSS.
Fixes#267.
The CSS linter was pretty hard to reason about. It was
pretty flexible about certain things, but then it would
prevent seemingly innocuous code from getting checked in.
This commit overhauls the pretty-printer to be more composable,
where every object in the AST knows how to render itself. It
also cleans up a little bit of the pre_fluff/post_fluff logic
in the parser itself, so comments are more likely to be "attached"
to the AST node that make sense.
The linter is actually a bit more finicky about newlines, but
this is mostly a good thing, as most of the variations before
this commit were pretty arbitrary.
This restyles and rewords some of the emoji style section to look
better and fit it more with the current style guide.
Tweaked by tabbott to modify the historical migration rather than
adding a new one. This is OK because the emojiset choices text change
doesn't touch the database; it's just a Django Python code thing.
Also removed translation tags, since we don't need them for a set of
brand names.
This now allows all tab switcher components to be used with left
and right arrows, given that a tab is already in focus, which is
the default behavior unless overridden (like on the streams
overlay).
This adds a slide class that specifies that the JS actions for sliding
up and down sections is the desired behavior, along with a bit of CSS
to help display correctly in the case of not being a sliding section.
This removes the leading whitespace that was approximately the width of
a space character that would get underlined when hovering over any one
of the global filters.
Add a spinner for when a stream is being created to show that
an operation is being performed, while also disallowing users to
modify the form in the meanwhile.
Commit modified by Brock Whittaker <brock@zulipchat.com>.
Fixes: #5268.
On stream names that don’t quite fit, we’ll add overflow ellipsis to
them. It appears we already did this on mobile in a sub-optimal way so
we can remove that media query with preference to the new, better
styling.
This allows a user to scroll all the way down on the sidebar and the
main panel in the settings page on narrow height windows by removing
the min-height specification and making the “Log out” line in the
sidebar become statically positioned at shorter heights.
Fixes: #7251.
This commit allows for the /api-new/ page to rendered similarly to our
/help pages. It's based on the old content for /api, but we're not
replacing the old content yet, to give a bit of time to restructure
things reasonably.
Tweaked by eeshangarg and tabbott.
This creates a template for the /team/ page that is currently just
embedded inside the /about/ page. This includes the titles for core
team members with their pictures.
Lets administrators view a list of open(unconfirmed) invitations and
resend or revoke a chosen invitation.
There are a few changes that we can expect for the future:
* It is currently possible to invite an email that you have already
invited, it might make sense to change this behavior.
* Resend currently sends an invite reminder instead of resending the
original invite, this is because 'custom_body' was not stored when
the first invite was sent.
Tweaked in various minor ways, primarily in the backend, by tabbott,
mostly for style consistency with the rest of the codebase.
Fixes: #1180.
All links by default had an underline on hover, including when
<a> tags were wrapping <div> and <img> tags, which made for a small
underline near them on hover. This better focusses the underline
behavior to just paragraphs and lists.
This adds two constraints to the image:
1. The `max-width` can not be more than 500px (which prevents it
from being to vertically tall.
2. The `display` is set to `none` below 1024px because the image is
too small at that point to be legible.
This changes some text that would display gray when on a blue body
text page; we considered changing the opacity instead, but probably we
should just delete this..
This changes the <ul> styling so that when not nested in a <p>
tag it'll have the standard font-weight (400) and be the same
color as the body text (blue/gray).
This removes the old blue styled outline around the PM recipient
box that was part of the older bootstrap styling in favor of the
dark outline on :focus that had been implemented for the rest of
the recipient boxes recently.
This creates a dropdown in place of the normal register/login links
you get when logged out, with an option to go to the app or log out if
that appears you click on the avatar.
A bit more work is needed to make this look really good, but it's a
great start.
This imposes a maximum width constraint on the center block so
that it can maintain readability and keep the content paragraphs
to less than 1000px.
Fixes: #7092.
The arrows were too close to the scrollbars that it would be
difficult to click them sometimes. This moves over the arrows and
unread counts to combat the issue.
This presents multiple states for the subdomain input option
depending on the existence of a root domain.
Commit modified heavily by Brock Whittaker <brock@zulipchat.com>.
Fixes#6863.
This is a two-step notifications process that will ask a user
to enable notifications and if they click exit give them three
options:
1. Enable notifications.
2. Ask later.
3. Never ask on this computer again.
The first two are self-explanatory (ask later = next session it
asks again). The third is captured and stored in localStorage and
a check is done on page load to see whether or not notifications
should be displayed.
Commit modified heavily by Brock Whittaker <brock@zulipchat.com>.
Fixes#1189.
The left and right sidebar are now equidistant from the edges of the
center pane, and the contents within have equal margin from the edges
of their containers (5px).
The group PM unread counts were pushed over toward the edge of the
screen which made them unaligned with the user unread PMs directly
above.
Fixes: #7064.
This lowers the amount of margin in the :before hack that we use
to put padding before anchored elements from 40px to 30px on <h1>
tags and 10px on everything else, which seems to be plenty.
Fixes: #7069.
This allows CSS to discriminate by platform and show particular
content; in this case showing things with the attribute
[if-zulip-desktop] content only on “ZulipElectron”.
This switches the checkboxes to be natively grayscale by
referencing the `checkbox.png` file rather than `checkbox-gree.png`
which means that we no longer need to apply the -webkit-filter
setting for grayscale.
This makes the standard checkboxes 7% darker and makes the disabled
ones about 12% darker + 7% darker than they were before, to
increase visibility.
Fixes: #6331.
This de-duplicates occurances of the `.no-underline` class by
removing it from "portico.css" and ensuring compaitbility by adding
support for the standard and :hover cases.
This fixes the width of the call-to-action button to be auto, as it
previously was set in the #hero to be 150px which forced the words in
the button to wrap to two lines.
The header line-height is too short when it collapses to multiple
lines so this sets the line-height back to "normal" from "30px"
which sets the text further apart.
The min-height for the error pages was not updated to reflect the
height of the new footer, so this updates the value and makes it a
non-scrolling page in most browsers again.
This sets the column width of the upload table actions and size
columns to always be 75 so that the buttons are always in the same
line and take up the least amount of space possible with that
constraint.
This removes the underline on hover and changes the text to get to the
index.
This also changes it to an <h2> tag so that it will be more inline
with the styling of the rest of the sections, but without the
down chevron.
This restyles the headers to make the <h1> more prominent with a line
break below it, and the <h2> to be less prominent with smaller text and
pushed closer to the <p> tags.
This adds a hover state to just the checkmark that makes it darker
than the line hover state that allows a user to know that the
checkmark is allowed to be toggled.
Emoji showcase refers to the space at the bottom of the emoji
picker we use for showing name as well as aliases of the currently
focused emoji.
Fixes: #6110.
This adds a max-width constraint to the hero content so that the images
inside the hero don’t keep expanding forever and eventually outside of
the hero’s bounds.
Fixes: #6713.
This adds the perfectScrollbar to the right side and theoretically
updates it any time a piece of code interacts with the sidebar and
updates the counts of users displayed in it.
The list needs to be set to use perfectScrollbar so that it can
scroll due to the fact that it resides within another instance of
perfectScrollbar.
Fixes: #6351.
The popovers for the message down chevron and left sidebar had
strange side padding and non-uniform padding between the top and
bottom. This changes them to all have the same padding as the
nav `#gear_menu`; none on the sides and 5px on the top and bottom.
This moves the chevron arrow and the "All Streams" text over 10px
so that it will be inline with the hashes below and not be up
against the edge of the screen in some collapsed modes.
The issue before was that the left sidebar would become too tall for
the screen because the standard header that has “STREAMS” and buttons
is 20px tall, and this one is 30px tall. This makes it much shorter,
changes the text to be the same style as the “STREAMS” text (medium
grey, uppercase text).
The markup is then fixed to be significantly less verbose than before —
changing a list to just a simple link.
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.
Tommy Ip
Brock Whittaker
Cynthia Lin
Steve Howell
Harshit Bansal
Umair Khan
Angelika Serwa
Henrik Pettersson
Vishnu Ks
Aastha Gupta
Tim Abbott
amanharitsh123
brockwhittaker
Shubham Dhama
Rishi Gupta