Peter Zimon
e64e646587
Refined default header styles
2021-12-17 07:53:16 +01:00
Peter Zimon
1d46adf07a
Updated header card colors and typography
2021-12-17 04:23:46 +01:00
Peter Zimon
fb39a0032e
Revert "Used neutral background colors for default header styles"
...
This reverts commit 999dc867b6
.
2021-12-17 04:15:37 +01:00
Peter Zimon
999dc867b6
Used neutral background colors for default header styles
2021-12-17 03:41:50 +01:00
Peter Zimon
384efab031
Updated header frontend styles
2021-12-16 19:39:30 +01:00
James Morris
81374e3040
Updated button for header card frontend to not style inner span
...
refs https://github.com/TryGhost/Team/issues/1253
2021-12-16 18:26:02 +00:00
Thibaut Patel
4984223bf2
Renamed the header styles
...
refs https://github.com/TryGhost/Team/issues/1253
- The naming is easier to understand for theme developers
2021-12-16 18:22:16 +01:00
James Morris
90c99afcfb
Removed unnecessary styles from header card frontend
...
refs https://github.com/TryGhost/Team/issues/1253
2021-12-16 17:20:12 +00:00
James Morris
c373e41699
Added in proper header link colours
...
refs https://github.com/TryGhost/Team/issues/1253
2021-12-16 17:05:39 +00:00
James Morris
3490047a36
Updated frontend with header style tweaks
...
refs https://github.com/TryGhost/Team/issues/1253
2021-12-16 16:37:02 +00:00
Sodbileg Gansukh
7898828cc6
Add gap to image card on smaller screen sizes
2021-12-16 21:54:23 +08:00
Sodbileg Gansukh
2649ba4c4b
Add gap custom CSS property to image card
...
This adds margin to the image card next to a gallery card
2021-12-16 21:50:43 +08:00
Fabien 'egg' O'Carroll
0c853a372b
Supported restricting limit="all" in get helper ( #13903 )
...
refs https://github.com/TryGhost/Team/issues/1251
With sites that have a huge number of resources, using limit="all" can
cause OOM errors at the Node level. Administrators now have the ability
to cap limit="all" requests via config. This only affects the get helper
used in themes, not the API, this is by design as themes have less
visibility of issues.
2021-12-16 13:59:39 +02:00
Peter Zimon
41e4ba68c9
Updated toggle and product card spacings
2021-12-16 08:49:37 +01:00
Peter Zimon
9a8461e06b
Added underline to accented callout card links
2021-12-16 08:45:31 +01:00
James Morris
5dc30ba6a9
Added AMP styles for headers as well as more tweaks for email and frontend
...
refs https://github.com/TryGhost/Team/issues/1253
2021-12-15 18:42:25 +00:00
Fabien egg O'Carroll
9db1c843c3
Updated Before/After card markup
...
refs https://github.com/TryGhost/Team/issues/1249
This removes some superfluous markup as well as renaming the slider
handle classname
2021-12-15 20:11:16 +02:00
James Morris
ad96ad4baa
Next round of styles for headers in frontend and email
...
refs https://github.com/TryGhost/Team/issues/1253
2021-12-15 17:45:01 +00:00
Peter Zimon
4353763de1
Updated file upload frontend styles
2021-12-15 17:44:37 +01:00
Fabien egg O'Carroll
6938808276
Improved styling of mismatched aspect ratio sliders
...
refs https://github.com/TryGhost/Team/issues/1249
The height:100%; stops taller images escaping the slider component.
2021-12-15 17:04:06 +02:00
Fabien egg O'Carroll
6f97396c1b
Removed focus from slider after use
...
refs https://github.com/TryGhost/Team/issues/1249
If we leave focus on the slider than after interacting with it, it will
capture scroll events and move the slider rather than scrolling the
page.
2021-12-15 16:59:25 +02:00
Fabien egg O'Carroll
c745211ee4
Fixed small images in "wide" before/after card
...
refs https://github.com/TryGhost/Team/issues/1249
Because we cannot resize the container of teh slider without affecting
the surrounding content, e.g. in the context of a grid. We need to
stretch images to fit the slider container.
This also applies the `object-fit: cover` property to the slider image
to help with mis-matched aspect ratios
2021-12-15 16:56:46 +02:00
Fabien egg O'Carroll
16c6e535be
Fixed image widths for before/after slider
...
refs https://github.com/TryGhost/Team/issues/1249
Instead of attempting to calculate teh width of the container, we leave
one image to fill up space naturally as the browser allows it, and then
use that to set the width of the secondary image.
2021-12-15 16:32:35 +02:00
Peter Zimon
acd0223f5b
Callout style refinements
2021-12-15 14:51:55 +01:00
Thibaut Patel
49170e7ff2
Added a first version of the header card frontend rendering
...
refs https://github.com/TryGhost/Team/issues/1253
- Based on the editor card, the css isn't correct yet as it has undefined css variables
2021-12-15 14:46:00 +01:00
Fabien egg O'Carroll
a21a436f98
Added handle for before/after slider
...
refs https://github.com/TryGhost/Team/issues/1249
Using an input as the slider handle meant setting a width of 100% + px,
which could push width over the size of the screen - not good! This
takes the same approach as the CodePen linked below and uses a separate
element, which has the position of it updated by JS in realtime.
https://codepen.io/josephwong2004/pen/NWRGxdR
2021-12-15 15:16:29 +02:00
Peter Zimon
45066b11fd
Default card style updates
...
- fixed video styles for small videos
- cleaned up callout card typography spacings
2021-12-15 13:40:26 +01:00
Rishabh
ffe502fa84
Refined layout for videos with smaller aspect ratio
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-15 17:57:25 +05:30
Peter Zimon
cebbc7ce38
Card css specificity updates ( #13895 )
...
The default CSS styles of the new cards that have been released in the past couple of weeks was overoptimised for overridability. It was done by defining the lowest specificity scores for each card style. This resulted in certain default styles being unusable for a lot of themes – e.g. the text color of a button (which is a a element that is usually defined on a higher specificity) could easily be the same color as its background (accent color by default).
The solution to this issue is to increase the specificity level of globally used default elements (such as a's h1 and other headings, p's etc.) to a medium level so that they have precedence over styles that are defined in most themes. Our baseline specificity score for these default style is 21, which seems to be covering most of the cases in popular themes.
This commit contains CSS updates in card default styles that implement this change.
2021-12-15 12:58:24 +01:00
Sodbileg Gansukh
aba5382070
Add pointer cursor to audio/video card buttons by default
2021-12-15 16:27:33 +08:00
Peter Zimon
a3078589dd
Updated file styles
2021-12-14 20:50:35 +01:00
Rishabh
e21eb935f4
Fixed video player overlay issue on loop
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-15 00:44:49 +05:30
Sanne de Vries
2ac0302da1
Fixed responsive issues for video card
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 19:57:06 +01:00
Rishabh
c158f9ebfc
Refined video controls hidden behavior
...
no refs
This reverts commit 182899150f
.
2021-12-14 22:41:58 +05:30
Rishabh
182899150f
Refined video controls hidden behavior
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 22:40:03 +05:30
Sanne de Vries
e574a8f2b3
Refined video player controls
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 18:04:25 +01:00
Rishabh
e43fe45d24
Removed play icon on video player after first play
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 22:25:30 +05:30
Rishabh
04baa88c23
Fixed video not playing sometimes via player controls
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 22:20:55 +05:30
Peter Zimon
ae2a782987
Audio and file card frontend styles refinements
2021-12-14 17:46:30 +01:00
Rishabh
a6a25dbb77
Updated event handling for custom video player
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 22:15:08 +05:30
Rishabh
61f7f29eed
Fixed pause not working for video player
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 22:05:29 +05:30
Rishabh
9ec83214ba
Fixed hidden controls for videos on loop
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 21:54:56 +05:30
Sanne de Vries
2364de5696
Added animation to control behavior for video cards
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 17:22:36 +01:00
Rishabh
b8b0a29a2e
Refined video player UI behavior
...
refs https://github.com/TryGhost/Team/issues/1229
- allows pausing video by clicking on video overlay
2021-12-14 21:50:27 +05:30
Rishabh
441307c6ad
Updated video card player behavior
...
refs https://github.com/TryGhost/Team/issues/1229
- refines player control UI behavior on mouseenter
2021-12-14 21:32:52 +05:30
Sanne de Vries
aa80cf415b
Refined video controls behaviour
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 16:51:00 +01:00
Sanne de Vries
79a48df75c
Updated video card frontend rendering
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 16:31:42 +01:00
Rishabh
64b3bbf1a6
Refined video controls behavior
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 21:01:22 +05:30
Sam Lord
97c68dd388
Replace error handler middleware with @tryghost/mw-error-handler ( #13879 )
...
refs: https://github.com/TryGhost/Toolbox/issues/137
Extract error handling middleware and replace with a package.
2021-12-14 15:18:46 +00:00
Rishabh
271d2c02b0
Added video overlay icon handling
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 20:38:07 +05:30
Sanne de Vries
ad35b4f17e
Updated video card frontend rendering
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 14:44:57 +01:00
Peter Zimon
5ddb2a8a40
Updated file card frontend styles
2021-12-14 14:37:36 +01:00
Sam Lord
76f06fae3c
Revert "Revert "Extract logging from DI patterns, only use @tryghost/logging package"" ( #13884 )
...
This reverts commit fa8c3ebe99
.
Reverting the revert, which will allow us to fully switch to @tryghost/logging v2.
2021-12-14 11:22:39 +00:00
Sanne de Vries
5a798c35ba
Updated video card frontend rendering
...
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 11:48:33 +01:00
Sanne de Vries
7db12650f9
Fixed seeker width jumping when playing audio
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-14 09:46:14 +01:00
Sanne de Vries
93a81fc0ca
Updated audio card frontend rendering
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 22:15:20 +01:00
Sanne de Vries
57969dea6c
Refined audio and bookmark frontend styles
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 19:10:06 +01:00
Rishabh
f91bf677ff
Removed disallowed amp class names for audio player
...
refs https://github.com/TryGhost/Team/issues/1230
- `i-amphtml-media-component` class name is not allowed in amp styles as they are disallowed by amp spec
2021-12-13 22:36:30 +05:30
Fabien egg O'Carroll
8966f45993
Added basic input styling for Before/After card
...
refs https://github.com/TryGhost/Team/issues/1249
This makes the input act as a slider over the image.
2021-12-13 17:41:21 +02:00
Thibaut Patel
2800f538bc
Updated the product card classes
...
refs https://github.com/TryGhost/Team/issues/1245
- Removes dependency from the product card css to other cards' css
2021-12-13 16:13:57 +01:00
Sanne de Vries
8c52e001c1
Refined audio card frontend rendering
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 15:54:38 +01:00
Rishabh
7e061cee39
Renamed generic class names for video card
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-13 19:01:30 +05:30
Rishabh
cd238c64ba
Updated frontend styles for file card
...
refs https://github.com/TryGhost/Team/issues/1231
2021-12-13 19:01:30 +05:30
djordje vlaisavljevic
1256d28615
Updated product card amp styles
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-13 14:23:35 +01:00
Fabien egg O'Carroll
c665b65e03
Added initial CSS&JS for Before/After card
...
refs https://github.com/TryGhost/Team/issues/1249
This contains the initial frontend code to provide a working slider for
the Before/After card. The JS is enclosed in an IIFE so as to not leak
any variables, and the CSS is all scoped to the card only to avoid
interfering with existing styles.
2021-12-13 15:08:57 +02:00
Sanne de Vries
d4d98d0ab5
Refined audio player UI
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 14:08:39 +01:00
Sanne de Vries
10d59e9795
Updated audio player class-names
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 13:46:19 +01:00
Sanne de Vries
c8ebe22a0c
Updated audio card AMP styling
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 13:16:51 +01:00
Rishabh
f237879251
Updated loop behavior for video player on theme
...
refs https://github.com/TryGhost/Team/issues/1229
2021-12-13 17:31:57 +05:30
djordje vlaisavljevic
7f248381ec
Updated product card styles
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-13 12:22:59 +01:00
Sanne de Vries
d8e49cb039
Fixed background color for transparent pngs as audio thumbnails
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 11:10:11 +01:00
Sanne de Vries
0322c47a58
Fixed audio card responsive behaviour on frontend
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 09:10:32 +01:00
Rishabh
3df7737de7
Added custom video player controls
...
refs https://github.com/TryGhost/Team/issues/1229
- adds custom video player controls, similar to audio player
2021-12-13 13:25:16 +05:30
Peter Zimon
baf6db2a48
Added dynamic styles for star rating in products
2021-12-13 08:31:06 +01:00
Peter Zimon
14f871e244
Adjusted product card frontend styles
2021-12-13 07:59:49 +01:00
Peter Zimon
3ec833266a
Fixed NFT card margin
2021-12-13 07:34:43 +01:00
djordje vlaisavljevic
e0cb8cc3c9
Updated product card styles
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-12 19:23:42 +01:00
djordje vlaisavljevic
d55e44e5e9
Switched product card frontend to CSS grid
...
https://github.com/TryGhost/Team/issues/1245
2021-12-11 17:01:43 +01:00
djordje vlaisavljevic
9b2b37b8f1
Updated product card line heights
...
ref https://github.com/TryGhost/Team/issues/1245
2021-12-10 16:36:18 +01:00
Sodbileg Gansukh
fc4d8d7de0
Fix audio card player button alignment
2021-12-10 11:27:35 +08:00
Rishabh
4f52e28c04
Cleaned up frontend audio card player script
...
refs https://github.com/TryGhost/Team/issues/1230
- removes unnecessary use of src attribute in the script as the theme file is already loaded with the src
2021-12-10 01:30:06 +05:30
djordje vlaisavljevic
5b3f82dda2
Added padding between paragraphs in product card description
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-09 13:41:05 +01:00
djordje vlaisavljevic
7f89b07c85
Updated the way star rating colors are shown
...
ref https://github.com/TryGhost/Team/issues/1245
2021-12-09 13:41:05 +01:00
Sodbileg Gansukh
00546e6ff3
Add resets to audio card form elements
2021-12-09 19:30:30 +08:00
Peter Zimon
dc6e7a690a
Updated NFT styles to use px sizings
2021-12-09 11:55:05 +01:00
Peter Zimon
4d59c7a694
Updated button styles to use relative sizings
2021-12-09 11:50:49 +01:00
Sanne de Vries
fc8ecc352f
Updated rendering of audio cards without thumbnail
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-09 09:14:01 +00:00
Kevin Ansfield
d4c110a55b
Added first pass of video card rendering
...
refs https://github.com/TryGhost/Team/issues/1229
- bumped @tryghost/kg-default-cards that contains initial video card rendering
- added video card CSS file with basic style that prevents video element rendering larger than the content width (similar to default image styles in most themes)
2021-12-08 18:01:44 +00:00
Rishabh
2d43c12276
Fixed global variable leak for new card scripts
...
no issue
- wraps the card js scripts into an IIFE to avoid polluting global variables on the site
- also any fixes errors caused by `swup` and its scripts-plugin that trips over already created global variables
2021-12-08 22:58:22 +05:30
Fabien egg O'Carroll
55d7176e51
🐛 Fixed card scripts executing before DOM is parsed
...
no-issue
Using the async attribute means that the script is downloaded in
parallel with the parsing of the html into DOM, and then executed upon
completion. This means that the script cannot be sure that particular
parts of the DOM exist as it may not have finished parsing. This has
resulted in bugs with the new toggle card not working.
Switching our script to use the defer attribute means that the script is
still downloaded in parallel with parsing, but it is not executed until
parsing is complete. This means that the script can safely access the
DOM.
2021-12-08 17:54:37 +02:00
Daniel Lockyer
fa8c3ebe99
Revert "Extract logging from DI patterns, only use @tryghost/logging package"
...
This reverts commit 97451a93cb
.
2021-12-08 14:28:41 +00:00
Sanne de Vries
6e4be46fb3
Updated audio card frontend styles in Chrome
...
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-08 12:22:39 +00:00
djordje vlaisavljevic
e72092fa5e
Updated product card frontend styles
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 12:40:57 +01:00
Rishabh
9cbaab119b
Refined audio card player with multiple playback rate options
...
refs https://github.com/TryGhost/Team/issues/1230
- adds multiple playback rate option to audio card player on click
2021-12-08 16:36:22 +05:30
djordje vlaisavljevic
cb86c06504
Removed unnecessary CSS and !important declarations
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 10:03:12 +01:00
djordje vlaisavljevic
88238e6403
Updated frontend styles for product card
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 20:58:42 +01:00
djordje vlaisavljevic
325de3e5cf
Updated frontend styles for product card
...
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 20:16:45 +01:00
Rishabh
27ced6cc84
Refined audio card player sliders
...
refs https://github.com/TryGhost/Team/issues/1230
- refines seek and volume sliders for audio player to show progress marker with background color
2021-12-08 00:16:32 +05:30
djordje vlaisavljevic
bf78df0e07
Added frontend CSS file for product card
...
refs https://github.com/TryGhost/Team/issues/1233
2021-12-07 17:33:13 +01:00
Rishabh
52faba6dac
Added dynamic play/pause and unmute state for audio card player
...
refs https://github.com/TryGhost/Team/issues/1230
- adds dynamic play/pause icon toggle for audio player
- adds dynamic mute/unmute icon toggle for mute behavior
- fixed volume slider not working
2021-12-07 20:43:20 +05:30