Commit Graph

102 Commits

Author SHA1 Message Date
Isaac Janzen
21f23cc032
DEV: Convert header to glimmer (#25214)
Here is a breakdown of the changes that will be implemented in this PR.

# Widgets -> Glimmer

Obviously, the intention of the todo here is to convert the header from widgets to glimmer. This PR splits the respective widgets as so:

### widgets/site-header.js
```mermaid height=200
flowchart TB
    A[widgets/site-header.js] 
    A-->B[components/glimmer-site-header.gjs]
```

### widgets/header.js and children
```mermaid height=200
flowchart TB
    A[widgets/header.js] 
    A-->B[components/glimmer-header.gjs]
    B-->C[glimmer-header/contents.gjs]
    C-->D[./auth-buttons.gjs]
    C-->E[./icons.gjs]
    C-->F[./user-menu-wrapper.gjs]
    C-->G[./hamburger-dropdown-wrapper.gjs]
    C-->H[./user-menu-wrapper.gjs]
    C-->I[./sidebar-toggle.gjs]
    C-->J[./topic/info.gjs]
```

There are additional components rendered within the `glimmer-header/*` components, but I will leave those out for now. From this view you can see that we split apart the logic of `widgets/header.js` into 10+ components. Breaking apart these mega files has many benefits (readability, etc).

# Services

I have introduced a [header](cdb42caa04/app/assets/javascripts/discourse/app/services/header.js) service. This simplifies how we pass around data in the header, as well as fixes a bug we have with "swiping" menu panels.


# Modifiers
Added a [close-on-click-outside](cdb42caa04/app/assets/javascripts/discourse/app/modifiers/close-on-click-outside.js) modifier that is built upon the [close-on-click-outside modifier](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/float-kit/addon/modifiers/close-on-click-outside.js) that @jjaffeux built for float-kit. I think we could replace float-kit's implementation with mine and have it in a centralized location as they are extremely similar.

# Tests
Rewrote the existing header tests ([1](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/widgets/header-test.js), [2](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js)) as system tests. 

# Other
- Converted `widgets/user-status-bubble.js` to a gjs component
- Converted `widgets/sidebar-toggle.js` to a gjs component
- Converted `topicFeaturedLinkNode()` to a gjs component
- Deprecated the [docking mixin](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/mixins/docking.js)
2024-02-23 11:08:15 -07:00
Kris
98c8dcecba
A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
Jarek Radosz
b61ea8e16d
FIX: A mobile header regression in 9cc2b5c (#22344)
Hiding extra UI when topic title is visible broke when the plugin outlet was added.
2023-06-29 10:36:27 +02:00
Kris
7b1eb080ba
UX: ensure header logo has dimensions, style clean-up (#20512) 2023-03-08 12:50:36 -05: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
Jarek Radosz
87f8bafa7e
DEV: Remove obsolete CSS prefixes (#18262) 2022-09-15 16:54:08 +02: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
Penar Musaraj
fec6411fbf
UX: Landscape spacing in iOS devices with a notch
Avoids some content being covenred by the notch in some iOS devices.
2020-09-18 11:59:40 -04:00
Penar Musaraj
d72ed8c5a8
UX: Include category name in hyperlink modal results on mobile 2020-06-17 14:46:01 -04:00
Kris
27d1a605af revert spacing reduction from 4afbcb9 2020-05-05 17:31:35 -04:00
Kris
4afbcb9872 Minor header title spacing reduction 2020-04-30 23:19:32 -04:00
Kris
b066a4128d Adding a text-overflow: ellipsis; mixin and related cleanup 2019-11-06 14:00:29 -05: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
Joe
02f2ce8b05
target panel children instead of targeting the panel (#7257) 2019-03-26 23:54:37 +08:00
Joe
ac4470cd56
UX: Hide mobile header notification badges if title is visible 2019-03-20 01:43:23 +08:00
Joe
533fb0019a fully hide header buttons if topic is visible (#7203) 2019-03-19 15:31:45 +01: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
Joe
55d745f03b
UX: header needs a bit of padding on narrow screens
A bit of history

https://meta.discourse.org/t/header-on-responsive-window/105204
2018-12-31 14:33:02 +08:00
Kris
41e06efb94 Adding padding to mobile that was removed in 3710b016 2018-12-18 22:20:02 -05:00
Kris
db32d29eaa UX: Refactoring topic statuses for consistent icon sizes & colors 2018-12-06 19:22:04 -05:00
Kris
6027e7ba3d FIX: Restrict logo width for small screens 2018-11-28 13:27:56 -05:00
Penar Musaraj
03deda2147
Upgrade to FontAwesome 5 (take two) (#6673)
* Add missing icons to set

* Revert FA5 revert

 This reverts commit 42572ff

* use new SVG syntax in locales

* Noscript page changes (remove login button, center "powered by" footer text)

* Cast wider net for SVG icons in settings

- include any _icon setting for SVG registry (offers better support for plugin settings)

- let themes store multiple pipe-delimited icons in a setting

- also replaces broken onebox image icon with SVG reference in cooked post processor

* interpolate icons in locales

* Fix composer whisper icon alignment

* Add support for stacked icons

* SECURITY: enforce hostname to match discourse hostname

This ensures that the hostname rails uses for various helpers always matches
the Discourse hostname

* load SVG sprite with pre-initializers

* FIX: enable caching on SVG sprites

* PERF: use JSONP for SVG sprites so they are served from CDN

This avoids needing to deal with CORS for loading of the SVG

Note, added the svg- prefix to the filename so we can quickly tell in
dev tools what the file is

* Add missing SVG sprite JSONP script to CSP

* Upgrade to FA 5.5.0

* Add support for all FA4.7 icons

- adds complete frontend and backend for renamed FA4.7 icons

- improves performance of SvgSprite.bundle and SvgSprite.all_icons

* Fix group avatar flair preview

- adds an endpoint at /svg-sprites/search/:keyword

- adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset

* Remove FA 4.7 font files
2018-11-26 16:49:57 -05:00
Joe
336436dfb4
UX: better handling of logo size 2018-11-23 22:04:42 +08:00
Joe
ee6c0170ce FEATURE: Scroll-based logo on mobile (#6632) 2018-11-21 21:21:49 -05:00
Sam
42572ff138 Revert font awesome 5 changes
We are still pushing ahead on this 100% just need a bit longer to prepare
all plugins
2018-11-08 16:12:18 +11:00
Penar Musaraj
005e1ecb9b
FEATURE: Update Font Awesome to v5.4.1 and SVGs (#6557)
* First take on subsetting svg icons

* FontAwesome 5 svg subset WIP

* Include icons from plugins/badges into svg sprite subset

* add svg icon support to themes

* Add spec for SvgSprite

* Misc. SVG icon fixes

* Use FA5 svgs in local-dates plugin

* CSS adjustments, fix SVG icons in group flair

* Use SVG icons in poll plugin

* Add SVG icons to /wizard
2018-11-07 13:05:43 -05:00
Joe
1b5ba899a1
UX: header items wrap on small screens for anon 2018-10-17 14:19:20 +08:00
Kris
7a1a1eb4c0 improve header scaling with font size 2018-07-27 16:49:28 -04:00
Kris
b79fedd540 Streamlining some breakpoint mixins 2018-07-12 16:39:16 -04:00
Kris
a201103127 removing some old styles 2018-07-12 00:53:24 -04:00
Joffrey JAFFEUX
174d392e5a
DEV: adds prettier (#5956)
Run `prettier --write "app/assets/stylesheets/**/*.scss" "plugins/**/*.scss"` after making sure you installed it with `yarn`

It's recommended to configure your editor to run prettier on file save.
2018-06-08 11:49:31 +02:00
Michael Howell
3fbf731e2d
Fix font-up-3 nit 2018-01-17 14:26:14 -07:00
Michael Howell
333ab59f97 Fix the site header to size 1.5em 2018-01-12 23:35:24 +00:00
Kris
674013129a
UX: Type system rebuild (#5492) 2018-01-12 17:27:38 -05:00
Kris
d90fc415a1 UX: Reducing number of font sizes used in mobile view 2017-12-19 17:40:08 -05:00
Kris
9876f3d0ee FIX: extraneous mobile CSS, flagged badge color in dropdown 2017-11-30 17:29:29 -05:00
Robin Ward
825452df76 Refactor header CSS for composability 2017-09-06 11:34:10 -04:00
Sam
6bdd5107a6 UX: center align community title text in mobile 2016-03-22 12:44:55 +11:00
Sam
88f38f34cc improve text only header 2016-03-18 15:12:55 +11:00
Sam
37ccfbdb2a Revert "FIX: vertical centering of header, using display: table"
This reverts commit 1b4e0f3300.
2016-03-18 14:29:39 +11:00
Neil Lalonde
1b4e0f3300 FIX: vertical centering of header, using display: table 2016-03-17 17:36:20 -04:00
Jeff Atwood
722cce7400 FIX: mobile logo was too wide 2015-10-19 23:02:32 -07:00
Jeff Atwood
518262ce58 allow wider mobile header 2015-09-17 00:17:35 -07:00
Robin Ward
3ae5a0a2df UX: Merge notifications and user dropdown 2015-08-28 16:11:40 -04:00
Sam
83593fea58 Revert "aligning text-logos and header with flexbox"
This reverts commit 2ad2ab503f.
2015-08-04 14:49:08 +10:00
awesomerobot
2ad2ab503f aligning text-logos and header with flexbox 2015-08-03 21:16:56 -04:00
Jeff Atwood
68a262ff08 fix narrow mobile logo max-width 2015-07-26 01:55:12 -07:00
Simon Cossar
93d9a98497 Remove unnecessary margins from mobile view 2015-07-21 18:46:15 -07:00