Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Updated attribution widget design

Browse source 
refs https://github.com/TryGhost/Team/issues/1941
This commit is contained in:
Djordje Vlaisavljevic 2022-09-26 12:14:06 +02:00
parent d02401c1f0
commit b9c7fe316b
3 changed files with 28 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ghost/admin/app/components/dashboard/charts/attribution.hbs
View file

@ -1,21 +1,21 @@
<section class="gh-dashboard-section gh-dashboard-attribution">
<article class="gh-dashboard-box" {{did-insert this.loadData}}>
<div style="display: grid;grid-template-columns: 1fr 2fr;grid-gap: 24px;">
<div style="display: grid;grid-template-columns: 2fr 1fr;grid-gap: 24px; position: relative;">
<div>
<h3 class="gh-dashboard-metric-label">Attribution</h3>
<div style="display:flex;justify-content:center;align-items: center;height:100%;">
<div style="max-width: 200px; position: relative;">
<MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
</div>
<div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
<div class="gh-dashboard-tooltip-value">
-
</div>
<MemberAttribution::SourceAttributionTable @sources={{this.sources}} class="gh-dashboard-attribution-list gh-dashboard-list" style="justify-content:flex-start;" />
</div>
<div style="display:flex;justify-content:center;align-items: center;height:100%;position: relative;">
<div style="max-width: 200px; position: relative;">
<MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
</div>
<div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
<div class="gh-dashboard-tooltip-value">
-
</div>
</div>
</div>
<MemberAttribution::SourceAttributionTable @sources={{this.sources}} class="gh-dashboard-attribution-list gh-dashboard-list" style="justify-content:flex-start;" />
</div>
</article>
</section>

8
ghost/admin/app/components/member-attribution/source-attribution-table.hbs
View file

@ -1,13 +1,12 @@
<div ...attributes>
<div class="gh-dashboard-list-header">
<div class="gh-dashboard-list-title">Sources</div>
<div class="gh-dashboard-list-title gh-dashboard-list-title-sources">Sources</div>
<div class="gh-dashboard-list-title">Signups</div>
{{#if this.membersUtils.paidMembersEnabled}}
<div class="gh-dashboard-list-title"><span class="hide-when-small">Paid </span>Conversions</div>
{{/if}}
</div>
<div class="gh-dashboard-list-body" style="max-height: 230px; overflow-y: clip; justify-content: flex-start;">
<div class="gh-dashboard-attribution-list-scrollable">
<div class="gh-dashboard-list-body">
{{#each this.sources as |sourceData|}}
<div class="gh-dashboard-list-item">
<div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-source">
@ -44,7 +43,7 @@
{{on "click" this.openAllSources}}
>
<div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-source gh-dsahboard-list-item-other-source">
<span class="gh-dashboard-list-text">Other</span>
<span class="gh-dashboard-list-text">Other sources →</span>
</div>
<div class="gh-dashboard-list-item-sub">
<span class="gh-dashboard-metric-minivalue">
@ -68,6 +67,5 @@
{{/if}}
</div>
{{/if}}
</div>
</div>
</div>

45
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -1024,6 +1024,19 @@ Dashboard Zero */
/* ---------------------------------
Dashboard Attribution */
.gh-dashboard-attribution-list {
margin-top: -20px;
}
.gh-dashboard-attribution-list .gh-dashboard-list-body {
padding-top: 8px;
padding-bottom: 8px;
}
.gh-dashboard-attribution .gh-dashboard-list-title-sources {
opacity: 0;
}
.gh-dashboard-list-item-sub-source {
padding-left: 20px;
position: relative;
@ -1041,8 +1054,8 @@ Dashboard Attribution */
background: #E6E9EB;
}
.gh-dsahboard-list-item-other-source {
text-decoration: underline;
.gh-dsahboard-list-item-other-source span {
color: var(--green);
cursor: pointer;
}
@ -1070,34 +1083,6 @@ Dashboard Attribution */
position: relative;
}
.gh-dashboard-attribution-list-scrollable {
overflow-y: auto;
padding-top: 6px;
padding-bottom: 6px;
}
.gh-dashboard-attribution-list .gh-dashboard-list-body:after {
content: " ";
position: absolute;
left: 0;
right: 0;
height: 24px;
bottom: 0;
background: linear-gradient(180deg,#ffffff00,hsl(0deg 0% 100%) 100%);
z-index: 1;
}
.gh-dashboard-attribution-list .gh-dashboard-list-body:before {
content: " ";
position: absolute;
left: 0;
right: 0;
height: 24px;
top: 0;
background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
z-index: 1;
}
/* ---------------------------------
Dashboard Engagement */