Commit Graph

99 Commits

Author SHA1 Message Date
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
Guo Xiang Tan 76e3acbcb3 UX: Shift notification badge down on mobile. 2015-07-09 19:28:38 +08:00
Jeff Atwood 08e330bb71 a few mobile CSS tweaks 2015-02-19 00:13:15 -08:00
Jeff Atwood bf03209f42 let's try to vertically align small logo 2015-02-18 23:55:04 -08:00