TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-10-05 09:18:03 +03:00
Code Issues Projects Releases Wiki Activity

Updated attribution info design on member profile

Browse Source 
refs https://github.com/TryGhost/Team/issues/1986
This commit is contained in:
Djordje Vlaisavljevic 2022-10-25 16:55:11 +02:00
parent e508baa540
commit 3e206411f8
3 changed files with 78 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ghost/admin/app/components/gh-member-details.hbs
View File

@ -42,10 +42,12 @@
Unknown location
{{/if}}
</p>
<p>
{{svg-jar "member-add"}}
Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
</p>
{{#if (not (feature 'sourceAttribution'))}}
<p>
{{svg-jar "member-add"}}
Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
</p>
{{/if}}
{{#if (feature 'sourceAttribution')}}
{{else}}
{{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
@ -64,19 +66,23 @@
{{/if}}
</p>
</div>
{{#if (and (feature 'sourceAttribution') this.showAttribution)}}
{{#if (feature 'sourceAttribution')}}
<div class="gh-member-details-attribution">
<h4 class="gh-main-section-header small bn">Attribution</h4>
<h4 class="gh-main-section-header small bn">Signup info</h4>
<p>
{{svg-jar "member-add"}}
Created&nbsp;&mdash;&nbsp;<span>{{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}</span>
</p>
{{#if this.referrerSource}}
<p>
{{svg-jar "earth"}}
Signup source&nbsp;&mdash;&nbsp;<span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
Source&nbsp;&mdash;&nbsp;<span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
</p>
{{/if}}
{{#if (and @member.attribution.url @member.attribution.title)}}
<p>
{{svg-jar "posts"}}
Signup page&nbsp;&mdash;&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
Page&nbsp;&mdash;&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
</p>
{{!-- <a href="#" class="gh-member-details-attribution-docs">Learn more →</a> --}}
{{/if}}

74
ghost/admin/app/components/member/subscription-detail-box.hbs
View File

@ -1,50 +1,54 @@
<button type="button" class="flex pointer flex-row items-center gh-cp-membertier-details {{if this.showDetails "
rotate"}}" {{on "click" this.toggleSubscriptionExpanded}} role="button" aria-label="Show details">
Details {{svg-jar "arrow-right-stroke"}}
Subscription details {{svg-jar "arrow-right-stroke"}}
</button>
<div class="gh-membertier-advanced {{unless this.showDetails " hide"}}" data-test-subscription={{@index}}>
<div class="gh-membertier-details-container">
{{#if @sub.cancellationReason}}
<div class="mb4">
<h4>Cancellation reason</h4>
<div class="gh-membertier-cancelreason">{{@sub.cancellationReason}}</div>
</div>
{{/if}}
{{#if @sub.offer}}
{{#if (eq @sub.offer.type "trial")}}
<div class="mb4">
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
&ndash; {{@sub.offer.amount}} days free
</div>
{{else}}
<div class="mb4">
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
{{#if (eq @sub.offer.type 'fixed')}}
&ndash; {{currency-symbol @sub.offer.currency}}{{gh-price-amount @sub.offer.amount}} off
{{else}}
&ndash; {{@sub.offer.amount}}% off
{{/if}}
</div>
{{/if}}
{{/if}}
<div class="gh-membertier-details">
<p>
Created&nbsp;&mdash;&nbsp;<span>{{@sub.startDate}}</span>
</p>
{{#if (eq @sub.attribution.referrerSource 'Unknown')}}
{{else}}
<div class="gh-membertier-detail">
<h4>Subscription source</h4>
<p><span class="fw6">{{@sub.attribution.referrerSource}}</span></p>
</div>
<p>
Source&nbsp;&mdash;&nbsp;<span>{{@sub.attribution.referrerSource}}</span>
</p>
{{/if}}
{{#if (and @sub.attribution @sub.attribution.url @sub.attribution.title)}}
<div class="gh-membertier-detail">
<h4>Subscription page</h4>
<a href="{{@sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @sub.attribution.title
}}</a>
<p>
Page&nbsp;&mdash;&nbsp;<a href="{{@sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @sub.attribution.title }}</a>
</p>
{{/if}}
</div>
{{#if (or @sub.cancellationReason @sub.offer)}}
<div class="gh-membertier-offer-cancellation">
{{#if @sub.cancellationReason}}
<div>
<h4>Cancellation reason</h4>
<div class="gh-membertier-cancelreason">{{@sub.cancellationReason}}</div>
</div>
{{/if}}
<p class="gh-membertier-detail-timestamp">Created on {{@sub.startDate}}</p>
{{#if @sub.offer}}
{{#if (eq @sub.offer.type "trial")}}
<div>
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
&ndash; {{@sub.offer.amount}} days free
</div>
{{else}}
<div>
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}}
{{#if (eq @sub.offer.type 'fixed')}}
&ndash; {{currency-symbol @sub.offer.currency}}{{gh-price-amount @sub.offer.amount}} off
{{else}}
&ndash; {{@sub.offer.amount}}% off
{{/if}}
</span>
</div>
{{/if}}
{{/if}}
</div>
{{/if}}
</div>
</div>

32
ghost/admin/app/styles/layouts/members.css
View File

@ -2277,6 +2277,10 @@ p.gh-members-import-errordetail:first-of-type {
border-top: 1px solid var(--whitegrey);
}
.gh-membertier-details p {
color: var(--darkgrey-l1);
}
.gh-membertier-details span,
.gh-membertier-details a {
display: inline-block;
@ -2593,16 +2597,16 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-cp-membertier-attribution .gh-membertier-advanced h4 {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 500;
color: #7F8B99;
font-size: 1.4rem;
font-weight: 400;
color: var(--middarkgrey);
margin-bottom: 2px;
letter-spacing: .01em;
}
.gh-cp-membertier-attribution .gh-membertier-details p {
margin: 0;
color: var(--middarkgrey);
}
.gh-cp-membertier-attribution .gh-membertier-detail {
@ -2611,8 +2615,22 @@ p.gh-members-import-errordetail:first-of-type {
.gh-cp-membertier-attribution .gh-membertier-details span, .gh-cp-membertier-attribution .gh-membertier-details a {
font-size: 1.4rem;
font-weight: 600;
color: unset;
font-weight: 500;
color: var(--darkgrey);
}
.gh-membertier-offer-cancellation .gh-cp-membertier-pricelabel {
font-weight: 500;
}
.gh-membertier-offer-cancellation {
margin-top: 16px;
padding-top: 16px;
border-top:1px solid #ECEEF0;
}
.gh-membertier-offer-cancellation div + div {
margin-top: 16px;
}
.gh-cp-membertier-attribution .gh-cp-membertier-renewal {