0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00

Fixed Opens and Clicks position jumping on hovering post list

Refs https://github.com/TryGhost/Team/issues/1895
This commit is contained in:
Sanne de Vries 2022-09-15 13:50:59 +01:00
parent e008e8c9fd
commit de9d63bb9f
2 changed files with 17 additions and 14 deletions

View file

@ -112,7 +112,7 @@
{{!-- Opens column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
<div class="flex flex-column">
<div class="flex flex-column items-end">
<span class="gh-content-email-stats" {{on "mouseover" (fn (mut this.isOpenStatHovered) true)}} {{on "mouseleave" (fn (mut this.isOpenStatHovered) false)}}>
{{#if this.isOpenStatHovered}}
<strong>1,283</strong> opens
@ -127,7 +127,7 @@
{{!-- Clicks column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-clicks">
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
<div class="flex flex-column">
<div class="flex flex-column items-end">
<span class="gh-content-email-stats" {{on "mouseover" (fn (mut this.isClickStatHovered) true)}} {{on "mouseleave" (fn (mut this.isClickStatHovered) false)}}>
{{#if this.isClickStatHovered}}
<strong>419</strong> clicks
@ -141,16 +141,18 @@
{{/if}}
{{!-- Button column --}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data">
{{#if (or @post.isSent @post.isPublished)}}
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta {{if this.isHovered "is-hovered"}}">
{{svg-jar "stats"}}
</LinkTo>
{{else}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta {{if this.isHovered "is-hovered"}}">
{{svg-jar "pen" class="edit"}}
</LinkTo>
{{/if}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-button">
<div class="flex flex-column items-end">
{{#if (or @post.isSent @post.isPublished)}}
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta {{if this.isHovered "is-hovered"}}">
{{svg-jar "stats"}}
</LinkTo>
{{else}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta {{if this.isHovered "is-hovered"}}">
{{svg-jar "pen" class="edit"}}
</LinkTo>
{{/if}}
</div>
</LinkTo>
</li>

View file

@ -898,7 +898,8 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-posts-list-item-labs .gh-post-list-clicks,
.gh-posts-list-item-labs .gh-post-list-opens {
.gh-posts-list-item-labs .gh-post-list-opens,
.gh-posts-list-item-labs .gh-post-list-button {
width: 120px;
}
@ -929,7 +930,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-posts-list-item-labs a.gh-post-list-cta.is-hovered {
background: var(--white);
color: var(--midgrey-d2);
box-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1px rgba(0,0,0,.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.gh-posts-list-item-labs a.gh-post-list-cta.is-hovered:hover {