Commit Graph

202 Commits

Author SHA1 Message Date
Kris e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
chapoi fca6c1836c
UX: Chat unread indicator refactor (#22040)
* move the chat unread indicator to top to match the profile avatar indicator
* add white border to profile avatar indicator (badge notification) to match chat indicator and userstatus styling
* change `.urgent` to BEM
* congregate all styling into mixin
  * update chat index to use mixin
  * update thread indicator to use mixin
  * update header indicator to use mixin

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-12 14:33:45 +10:00
Kris af58dbeb24
UX: update ring animation to avoid scroll (#21150) 2023-04-19 09:13:50 -04:00
Bianca Nenciu 142d2ab65e
FEATURE: Move bootstrap mode indicator to header (#20663)
The information about bootstrap mode has been moved from the notice to
the README topic for admins.
2023-03-24 15:59:03 +02:00
Kris 7b1eb080ba
UX: ensure header logo has dimensions, style clean-up (#20512) 2023-03-08 12:50:36 -05:00
chapoi 87de3c2319
UX: highlight vars updates (#20346)
* UX: replace highlight vars in popup menu

* UX: replace highlight vars in autcomplete

* UX: replace highlight vars in menu-panel

* UX: update style guide

* UX: bulk replace highlight vars in various small appearances
2023-02-21 10:15:49 +01:00
chapoi f19044af6a
UX: add transparent border for header icon (#20306) 2023-02-15 06:55:13 +01:00
Kris 2dbcea9eee
A11Y: Allow header logo/title to hide, if needed (#20244) 2023-02-14 09:04:48 -05:00
Kris 8bc9acc414
A11Y: Header icons should be buttons, not links (#20242) 2023-02-10 13:55:51 -05:00
Osama Sayegh 23bd993164
FEATURE: Separate notification indicators for new PMs and reviewables (#19201)
This PR adds separate notification indicators for PMs and reviewables that have arrived since the last time the user opened the notifications menu.

The PM indicator is the strongest one of all three indicators followed by the reviewable indicator and then finally the blue indicator. This means that if there's a new PM and a new reviewable, then the PM indicator will be shown.

Meta topic: https://meta.discourse.org/t/no-green-or-red-notification-bubbles/242783?u=osama.

Internal topic: t/82995.
2022-12-01 07:05:32 +08:00
Jarek Radosz 4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Jarek Radosz ea326906e3
DEV: Use css var font sizes (#18518)
For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
Kris a38e44fd5e
UX: truncate site text titles in a cleaner way (#18335) 2022-09-23 10:19:44 +08:00
Kris dc6418bd8f
Revert "UX: Retry "left-align title with content for sidebar (#18202)" (#18242)" (#18278)
This reverts commit 5ee760dc2c.
2022-09-19 11:05:41 -04:00
Jarek Radosz 5ee760dc2c
UX: Retry "left-align title with content for sidebar (#18202)" (#18242)
Reverts #18241 and fixes issues with the original PR:

1. Remove an extraneous `margin-left: auto` from a grid cell (this was causing the buggy behavior in webkit)
2. Add `grid-area` name to `.extra-info-wrapper`
3. Account for `.wrap` padding
4. Remove unused css (`.header-row` and inner styles)
2022-09-13 21:45:31 +02:00
Kris 6c1b6a98ff
Revert header sidebar change 0ef68f5 (#18241) 2022-09-13 13:20:08 -04:00
Kris 5865868c76
remove unused grid-area (#18238) 2022-09-13 10:49:43 -04:00
Kris 0ef68f52d8
UX: left-align title with content for sidebar (#18202) 2022-09-13 09:46:57 +08:00
Kris 424e968538
UX: add left sidebar toggle when sidebar enabled (#17831) 2022-08-10 10:12:35 +08:00
Kris 126266863d
UX: sidebar transition and styling adjustments (#17678) 2022-07-26 23:16:34 -04:00
Kris 235878033e
UX: only transition header on sidebar toggle (#17646) 2022-07-25 13:27:56 -04:00
Alan Guo Xiang Tan 99073338de
FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600)
When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference.

Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-22 13:06:47 +08:00
Kris 4b92175d4e
UX: remove horizontal scoll from narrow screens (#16657) 2022-05-05 11:34:01 -04:00
Alan Guo Xiang Tan b35cf7cc0c
DEV: First desktop design interface pass at experimental sidebar take 2. (#16647) 2022-05-05 14:35:08 +08:00
Alan Guo Xiang Tan aa5d90a554
Revert "DEV: First desktop design interface pass at experimental sidebar (#16590)" (#16646)
This reverts commit 36dcf80aff.
2022-05-05 11:56:24 +08:00
Alan Guo Xiang Tan 36dcf80aff
DEV: First desktop design interface pass at experimental sidebar (#16590)
Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-05-05 11:19:46 +08:00
Jarek Radosz ce2c5ffb29
DEV: Simplify header width css (#15746) 2022-02-01 22:36:34 +01:00
awesomerobot 2110fd2638 UX: Improve tag truncation in scrolled header 2021-06-07 16:44:03 +08:00
Kris f3e021ad45
UX: Update search panel styles, consistency (#13262) 2021-06-03 14:14:24 +10:00
Kris d0dfd0c73f
UX: Consistent padding on mobile/desktop `.wrap` (#13155) 2021-05-26 17:33:08 +10:00
Penar Musaraj 2dc48fd6c1
UX: Uniformize styles for focus states (#11933) 2021-02-03 11:45:54 -05:00
Kris da5841de0b
REFACTOR: Remove position fixed from the header and use sticky instead (#10781)
This removes fixed positioning from d-header and the topic timeline.

Plugins, themes and components that use the above/below header plugin outlet will likely need some margin/padding adjustments.
2020-10-19 17:26:38 -04:00
Joe c3560a66f3 DEV: CSS truncation followup
After merging this

58fe78bf28 (diff-fed21847d651f6eb2cc76abbd770f5f8)

I noticed that the code I'm removing in this commit is causing text to be truncated a bit early on desktop. So, I'm removing it for now.
2020-09-01 02:01:17 +08:00
Joe 58fe78bf28 UX: don't wrap topic status icons in the header if there's more than one
Context: https://meta.discourse.org/t/when-a-topic-is-closed-and-pinned-the-pin-icon-in-header-not-in-correct-place/162473

Flex is causing a bit of a problem here since it makes the `topic-statuses` div in the header wrap when it has more than one icon. Given that we already use grid on the parent and that the icons are aligned properly, I think it's safe to remove it here.
2020-09-01 00:40:42 +08:00
Penar Musaraj c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00
Penar Musaraj 25dcc577ae
DEV: More color transformation refactoring 2020-07-29 12:01:12 -04:00
Kris 074fa5cb18 Follow-up Safari fixes for 89f6ff1 2020-07-27 20:45:29 -04:00
Kris 89f6ff1574 Prevent topic title from clipping some characters due to overflow 2020-07-27 17:26:48 -04:00
Kris ee88666bad
FEATURE: Improve header meta alignment and truncation with css grid (#10238) 2020-07-15 19:30:35 -04:00
Kris 0ee796f66d revert 4afbcb9 2020-05-04 19:40:51 -04:00
Kris 4afbcb9872 Minor header title spacing reduction 2020-04-30 23:19:32 -04:00
Martin Brennan b79ea986ac
FEATURE: High priority bookmark reminder notifications (#9290)
Introduce the concept of "high priority notifications" which include PM and bookmark reminder notifications. Now bookmark reminder notifications act in the same way as PM notifications (float to top of recent list, show in the green bubble) and most instances of unread_private_messages in the UI have been replaced with unread_high_priority_notifications.

The user email digest is changed to just have a section about unread high priority notifications, the unread PM section has been removed.

A high_priority boolean column has been added to the Notification table and relevant indices added to account for it.

unread_private_messages has been kept on the User model purely for backwards compat, but now just returns unread_high_priority_notifications count so this may cause some inconsistencies in the UI.
2020-04-01 09:09:20 +10:00
Dan Ungureanu 5905930c32
FIX: Sync Ember and non-Ember layouts (#9028) 2020-02-25 15:31:04 +02:00
Krzysztof Kotlarek f59647cd55
FIX: move IE specific CSS rules to discourse-internet-explorer plugin (#8567) 2019-12-18 15:25:16 +11:00
Kris b066a4128d Adding a text-overflow: ellipsis; mixin and related cleanup 2019-11-06 14:00:29 -05:00
Joe 5276a827dd
UX: small follow-up to #8047 2019-08-28 16:52:46 +08:00
Joe d14851e552 UX: better alignment for tags in the header (#8047)
* Removes unused styles

This commit only removes unnecessary / duplicate styles. It does not cause any visual changes.

* adds class to `<h1>` tag in header topic info.

This is much better to target than `h1`

* removes unused styles

* header title margin adjustment

* minor header-title margin adjustments

* One more header-title margin adjustment
2019-08-28 18:18:27 +10:00
Arpit Jalan 324e182842
FEATURE: show login and signup button on no-ember layout (#7867) 2019-07-09 04:51:19 +05:30
Robin Ward b58867b6e9 FEATURE: New 'Reviewable' model to make reviewable items generic
Includes support for flags, reviewable users and queued posts, with REST API
backwards compatibility.

Co-Authored-By: romanrizzi <romanalejandro@gmail.com>
Co-Authored-By: jjaffeux <j.jaffeux@gmail.com>
2019-03-28 12:45:10 -04:00
Joe 6d7c0c8f13
REFACTOR: scroll-based mobile header switch
This refactor addresses the following issues:

1- Moves all relevant logic to the discourse-topic component (matches desktop)
2- Fixes the flicker issue discussed here
3- Fixes a rare occurring issue where tags wrap to a third line if a topic has long category names and lots of tags
4- Fixes header icon jitter on iOS
5- Fixes an issue where sliding out user / hamburger menus on Android leaves the user in a mid-state with half a title and the header panel visible - swiping will now open the menus but have no effect on the header.
6- adds min-width to the small-logo to act as placeholder so that the title doesn't shift if the logo takes a while to load.

Other than that, everything should look and act the same.
2019-03-19 18:39:38 +08:00