Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

🐛 Fixed clipped tooltips in member activity feed after showing all

Browse source 
no issue

- liquid-fire containers (inserted by `{{#liquid-if}}`) have `overflow: hidden` applied which means the absolutely positioned tooltips that leave the container are clipped or in some cases not visible at all
- adding `class="show-overflow"` to `{{#liquid-if}}` adds the class to the top-level `.liquid-container` element allowing us to alter the behaviour slightly in CSS by making use of the `.liquid-animating` class that is added whilst the animation is in progress. By only applying `overflow: hidden` whilst animating we can keep the reveal whilst eliminating the clipping when the animation finishes
  - does not work in all cases and can introduce jankiness in others where the visible overflow causes positioning changes
This commit is contained in:
Kevin Ansfield 2020-12-11 11:04:18 +00:00
parent 77e24d4d25
commit a3b2f2072a
2 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-member-activity-feed.hbs
View file

@ -5,7 +5,7 @@
<GhMemberActivityFeedItem @activity={{activity}} />
{{/each}}
{{#liquid-if this.isShowingAll}}
{{#liquid-if this.isShowingAll class="show-overflow"}}
{{#each this.remainingActivities as |activity|}}
<GhMemberActivityFeedItem @activity={{activity}} />
{{/each}}

15
ghost/admin/app/styles/patterns/global.css
View file

@ -556,3 +556,18 @@ img {
animation: fade-out 0.5s;
animation-fill-mode: forwards;
}
/*
* liquid-fire normally hides overflow so that the container size can grow to
* reveal it's contents but that hidden overflow will cut off tooltips or other
* floating elements. Adding class="show-overflow" adjusts behaviour to only
* hide overflow whilst animation is in progress
*/
.liquid-container.show-overflow,
.liquid-container.show-overflow .liquid-child {
overflow: visible;
}
.liquid-container.show-overflow.liquid-animating,
.liquid-container.show-overflow.liquid-animating .liquid-child {
overflow: hidden;
}