Commit Graph

39 Commits

Author SHA1 Message Date
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
Jarek Radosz 87f8bafa7e
DEV: Remove obsolete CSS prefixes (#18262) 2022-09-15 16:54:08 +02:00
Penar Musaraj 139ba69117
FIX: Do not add CSS transition effect to animated images (#12803)
Followup to c11d75da87, the transition
delays the pause/play action.
2021-04-22 14:05:48 -04:00
Penar Musaraj 413fa49032
UX: Refactor lightbox hover drop shadow
For parity with auto dark mode switching, this includes a subtle effect in dark themes too.
2020-08-04 10:43:18 -04: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
Jarek Radosz 300e30dcbf
FIX: Remove the border from YT thumbnail placeholder (#10288) 2020-07-22 16:38:35 +02:00
Joffrey JAFFEUX 7fc99f5e7b
UX: do not show shadow on hover images on touch devices (#8429) 2019-11-28 10:51:08 +01:00
Joffrey JAFFEUX 8ea114007f
UX: adds hover effect on lightboxed images (#8416)
* UX: adds hover effect on lightboxed images

This commits also adds two scss functions:

- is-light-color-scheme()
- is-dark-color-scheme()

This hover effect won't be added on dark color schemes, as images already standout nicely on dark backgrounds.

Co-Authored-By: David Taylor <david@taylorhq.com>
2019-11-26 15:06:30 +01:00
Kris b066a4128d Adding a text-overflow: ellipsis; mixin and related cleanup 2019-11-06 14:00:29 -05:00
Penar Musaraj f408c583e8 DEV: Remove lightbox CSS rules 2019-07-26 10:57:22 -04:00
Joe ee808dc682
UX: replace lightbox loading text with spinner (#7393) 2019-04-17 10:24:03 -07:00
Penar Musaraj 51e08feb7e DEV: Refactor icons used in lightbox HTML
Uses <svg> elements instead of hacky CSS pseudoelements

Adds a migration to mark posts with lightboxes as needing a rebake
2019-03-22 11:52:06 -04:00
Sam 0c11caf796 UX: remove gray background from lighbox
This avoids a 3 way transition when loading images

- grey
- ultra low res
- full image

Instead we go

- ultra low res
- full image
2019-01-03 08:16:33 +11:00
Robin Ward 0e710dc573 Improvements to Lazy Loading
- Now applied to all images over 150x150px

- Stores the width and height in the WeakMap rather than using
percentages for accuracy

- When oneboxed images are hidden, they are given a subtle border for better
visibility.

- Don't apply when in the composer. Causes flickering.
2018-12-21 11:31:27 -05:00
Robin Ward 662cfc416b FEATURE: Show a blurry preview when lazy loading images
This generates a 10x10 PNG thumbnail for each lightboxed image.
If Image Lazy Loading is enabled (IntersectionObserver API) then
we'll load the low res version when offscreen. As the image scrolls
in we'll swap it for the high res version.

We use a WeakMap to track the old image attributes. It's much less
memory than storing them as `data-*` attributes and swapping them
back and forth all the time.
2018-12-19 01:57:30 +08:00
Kris 6cbcd58603 Lighten lazyload placeholder background 2018-12-13 15:38:33 -05:00
Joe 8ef2085585
UX: increase selector specificity so that "inline" lightboxes in quotes don't get backgrounds
When a quote is not expanded and it contains lightboxes, those lightboxes are not displayed and instead we show a link that looks like this `[image_title]` 

These still have the lightbox CSS class and so they still get the backgrounds we add to lightboxes while they load. Increasing the selector specificity prevents that from happening.
2018-12-13 15:17:08 +08:00
Robin Ward 6797a710aa FEATURE: Lazily Load Images as they scroll into the viewport.
This feature uses the Intersection Observer API

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

It should be compatible with all modern browsers. Non-Edge IE is *NOT*
supported, so in that particular browser images are loaded by default.
2018-12-12 10:12:49 +11:00
Maja Komel 2ee2e5c981 UX: fix cropped image thumbnails 2018-12-11 12:23:39 +01:00
Penar Musaraj 56948896ff UX: replace FA5 compress/expand icons
Adds a new SVG sprite file that contains non-FontAwesome 5 icons to our subset.

Adds the FontAwesome 4.7.0 icons for expand / collapse.
2018-12-03 22:29:20 -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
Sam f2afb69f72 Revert "UX: maintain aspect ratio of cropped image thumbnails"
This reverts commit e7fa4c5dd1.

causes page wobble with images while loading
2018-11-16 11:38:04 +11:00
Joe e7fa4c5dd1
UX: maintain aspect ratio of cropped image thumbnails 2018-11-15 20:24:56 +08: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
Kris 7deb86ad8b A more subtle mobile lightbox hint 2018-08-28 15:25:54 -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
Kris 674013129a
UX: Type system rebuild (#5492) 2018-01-12 17:27:38 -05:00
awesomerobot c29b7aa65d initial pass at color simplification 2017-07-14 21:43:35 -04:00
Régis Hanol 468b04db86 FIX: force wrapping on the filename of lightboxed images 2015-09-16 11:58:06 +02:00
Kane York 0282d89b29 FIX: Lightboxes in dark theme 2015-08-18 14:09:20 -07:00
Régis Hanol 177cbf392d UX: remove outline on lightboxes 2015-03-16 22:38:33 +01:00
Jeff Atwood 576861505e just use plain CSS3 transition 2014-12-23 03:09:17 -08:00
Kris Aubuchon 3eebc0e589 changing font sizes to ems, so fonts scale a bit more gracefully 2014-12-15 22:12:56 -05:00
Jeff Atwood 5a1162418d lightbox size was black on black 2014-08-09 15:21:53 -07:00
Jeff Atwood 612dcb5805 we can't resize images on desktop, very dangerous 2014-07-16 12:23:54 -07:00
Kris Aubuchon 89167be99a fitting images in posts without violating max width/height 2014-07-16 01:01:03 -04:00
Kris Aubuchon 8ea63006e4 simplifying and segmenting color variables 2014-05-06 01:50:51 -04:00
Kris Aubuchon 3f102a98da initial move of common desktop/mobile styles to common/base 2014-04-19 14:04:22 -04:00