Updated attribution widget design

refs https://github.com/TryGhost/Team/issues/1986
This commit is contained in:
Djordje Vlaisavljevic 2022-10-06 22:26:49 +02:00
parent 37dd97b5c5
commit ff4f93f4a5
3 changed files with 21 additions and 9 deletions

View File

@ -40,6 +40,7 @@
@sources={{this.chartSources}}
@sortColumn={{this.selectedSortColumn}}
/>
<span class="gh-dashboard-attribution-chart-label">{{if (eq this.selectedSortColumn "signups") "Free" "Paid"}}</span>
</div>
<div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
<div class="gh-dashboard-tooltip-value">

View File

@ -5,7 +5,7 @@
<div
class="gh-dashboard-list-title {{if (eq @sortColumn "signups") "sorted-by"}}"
>
Free signups
Free signups{{svg-jar "arrow-down-fill"}}
</div>
{{/if}}
{{#if (eq @sortColumn "paid")}}
@ -13,7 +13,7 @@
<div
class="gh-dashboard-list-title {{if (eq @sortColumn "paid") "sorted-by"}}"
>
<span class="hide-when-small">Paid </span>Conversions
<span class="hide-when-small">Paid </span>Conversions{{svg-jar "arrow-down-fill"}}
</div>
{{/if}}
{{/if}}
@ -27,7 +27,7 @@
</span>
</div>
{{#if (eq @sortColumn "signups")}}
<div class="gh-dashboard-list-item-sub">
<div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-signup {{if (eq @sortColumn "signups") "sorted-by"}}">
{{#if sourceData.signups}}
<span class="gh-dashboard-metric-minivalue">
{{format-number sourceData.signups}}
@ -41,7 +41,7 @@
{{/if}}
{{#if (eq @sortColumn "paid")}}
{{#if this.membersUtils.paidMembersEnabled}}
<div class="gh-dashboard-list-item-sub">
<div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-paid {{if (eq @sortColumn "paid") "sorted-by"}}">
{{#if sourceData.paidConversions}}
<span class="gh-dashboard-metric-minivalue">
{{format-number sourceData.paidConversions}}

View File

@ -1134,10 +1134,9 @@ Dashboard Attribution */
}
.gh-dashboard-list-title svg {
height: 4px;
width: 6.11px;
margin-left: 2px;
margin-top: -2px;
width: 9px;
margin-left: 4px;
margin-top: -3px;
vertical-align: middle;
display: none;
}
@ -1146,8 +1145,20 @@ Dashboard Attribution */
display: inline;
}
.gh-dashboard-attribution-chart-label {
position: absolute;
top: 45%;
left: 44%;
font-weight: 600;
color: var(--midgrey);
}
.gh-dashboard-list-title svg path {
stroke: var(--midgrey);
fill: var(--midlightgrey);
}
.gh-dashboard-list-item-sub-signup:not(.sorted-by), .gh-dashboard-list-item-sub-paid:not(.sorted-by) {
opacity: 0.6;
}
.gh-dashboard-list-item:first-child .gh-dashboard-list-item-sub-source::after {