Commit Graph

22 Commits

Author SHA1 Message Date
Cynthia Lin d5a3691561 media: Display stream list filter at full width. 2017-11-14 11:12:13 -08:00
Steve Howell ba51078418 Simplify CSS linter and clean up CSS.
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.
2017-11-13 12:43:43 -08:00
Brock Whittaker 4af9e11115 left-sidebar: Add overflow ellipsis on long stream names.
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.
2017-11-01 13:27:42 -07:00
Brock Whittaker 60e3abddcb media.css: Make compose box not collapse to two lines.
This makes the compose box not collapse to two lines by making input
fields smaller.

Fixes: #6366.
2017-10-03 15:49:16 -07:00
Brock Whittaker 9cc5014ae9 media.css: Make min-width small enough to support iPhone 5.
This makes the min-width go down to the screen width of the iPhone 5
(320px) so that content doesn’t overflow.
2017-10-03 15:49:16 -07:00
Brock Whittaker 3a4abc25a1 media.css: Group two @media queries together.
There were two `@media (max-width: 500px)` queries that should have
been grouped together.
2017-10-03 15:49:16 -07:00
Brock Whittaker 850efdebdd Add equal padding to sides of the right sidebar on mobile.
This adds equal padding to both the left and right side of the mobile
sidebar so that text and divs don’t hit the right side of the screen.
2017-08-01 14:52:16 -07:00
Brock Whittaker bceebb1547 Make right sidebar user search input larger.
This makes the <input> 100% in width, rather than only about 60% of the
width of the sidebar.
2017-08-01 14:48:13 -07:00
Cory Lynch fa73872828 media.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
Steve Howell c0a6038a95 css: Enforce one selector per line.
While it's sometimes nice to put a few selectors on the same line,
it is generally better to have a consistent way of formatting our
selectors, and most of our code up until now lists them vertically.
This change fixes the linter to enforce one selector per line, and
it cleans up the places in the CSS where we had multiple selectors
on the same line.

The advantages of one-per-line are as followers:
    * cleaner diffs
    * easier to see when multiple areas of the app may have the
      same format
    * less likely to go over 80 cols
    * makes it more clear where we have deep nesting in the
      individual selectors
    * makes it easier for our linting tools to enforce
      whitespace violations

This also fixed an old bug where we had ".landing_page h2, h4", which
sets "h4" styles outside of the landing page.
2017-03-26 16:57:33 -07:00
Arpith Siromoney e073220e21 Add typing notifications front end.
Send typing notification events when user types in the compose box.
Listen for these events and display a notification.

Sending notifications: Notifications are throttled, so that start
notifications are sent every 10 seconds of active typing, and stop
notifications are sent 5 seconds after active typing stops or when the
compose box is closed.

Displaying notifications:
When a typing notification is received, if the current narrow is private
messages or is: pm-with and the user is not the sender,
"Othello is typing..." is displayed underneath the last message. This notification is
removed after 15 seconds. If another notification is received during this period, the
expiration is extended. When a stop notification is received the notification is removed.

Internally, a list of users currently typing is maintained for each
conversation (in a dict). When an event is received the list (for the appropriate
conversation) is updated and the notifications template is re-rendered
based on the narrow information. This template is also re-rendered when
the narrow changes.

Significantly modified by tabbott for clarity.

Fixes #150.
2017-03-17 20:45:07 -07:00
adnrs96 c67eb54d05 Clean media.css to use 4 space indents. 2017-03-17 11:00:44 -07:00
Steve Howell 1e5ec689b7 tools/css: Trim whitespace around CSS values. 2017-03-14 09:29:56 -07:00
Tim Abbott 5e39ccd642 js: Rename viewport.js to message_viewport.js.
This fixes the mobile web experience for Chrome on iOS.

Apparently, Chrome-on-iOS silently has a `viewport` module that
overrides and user-defined module by that name, causing all of our
code that accesses the viewport module to not work on that platform.
We fix this by renaming it.
2017-03-10 14:59:59 -08:00
Brock Whittaker f63f251f8f css: Fix styling and padding in mobile sidebars.
Fixup the styling of the mobile sidebars to be a little bit more
stylistically uniform.
2017-03-08 21:23:29 -08:00
Brock Whittaker bb13cad60f compose: Bring back the compose buttons on mobile.
Before they were hidden in favor of icons, but now there’s no need to
hide them, we should just display the original buttons.
2017-03-08 21:07:43 -08:00
Brock Whittaker 4d5aa3ddc9 Restyle and refactor .message_controls for better UX.
This refactors the .message_controls to stop relying on absolute
positioning and strange CSS, and throws them inline.

This also restyles so they hang to the right of the time which is now
always present.

Fixes: #3761.
2017-03-06 22:24:21 -08:00
aakash-cr7 73fb9c6f66 Fix alignment of 'Not Delivered buttons' on smaller devices. 2016-11-26 10:13:48 -08:00
Brock Whittaker d49076d0d4 Add @media query for mobile muting UI.
This adds a media query so that the muting UI on mobile displays
correctly.

Fixes: #2149.
2016-10-31 17:17:17 -07:00
Tim Abbott 3727ea6fb0 subs: rename .subscription_description to .description. 2016-10-28 14:47:23 -07:00
Tim Abbott 66e2632809 subs: Rename .subscription_name to .stream-name. 2016-10-28 14:47:22 -07:00
Steve Howell cdd03dec4d Extract media queries to media.css.
Create `media.css` using media queries that had been at the bottom
of `zulip.css`, then update miscellaneous setttings/docs files.

I also add `.screen-medium-show` and `.screen-narrow-show` to
`media.css`, as they seem to be an important part of our
responsive design.

Fixes #1532.
2016-08-05 10:32:55 -07:00