mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Updated attribution info design on member profile
refs https://github.com/TryGhost/Team/issues/1986
This commit is contained in:
parent
e508baa540
commit
3e206411f8
3 changed files with 78 additions and 50 deletions
|
@ -42,10 +42,12 @@
|
|||
Unknown location
|
||||
{{/if}}
|
||||
</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 — <span>{{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}</span>
|
||||
</p>
|
||||
{{#if this.referrerSource}}
|
||||
<p>
|
||||
{{svg-jar "earth"}}
|
||||
Signup source — <span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
|
||||
Source — <span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
|
||||
</p>
|
||||
{{/if}}
|
||||
{{#if (and @member.attribution.url @member.attribution.title)}}
|
||||
<p>
|
||||
{{svg-jar "posts"}}
|
||||
Signup page — <a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
|
||||
Page — <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}}
|
||||
|
|
|
@ -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">
|
||||
<div class="gh-membertier-details">
|
||||
<p>
|
||||
Created — <span>{{@sub.startDate}}</span>
|
||||
</p>
|
||||
{{#if (eq @sub.attribution.referrerSource 'Unknown')}}
|
||||
{{else}}
|
||||
<p>
|
||||
Source — <span>{{@sub.attribution.referrerSource}}</span>
|
||||
</p>
|
||||
{{/if}}
|
||||
{{#if (and @sub.attribution @sub.attribution.url @sub.attribution.title)}}
|
||||
<p>
|
||||
Page — <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 class="mb4">
|
||||
<div>
|
||||
<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">
|
||||
<div>
|
||||
<h4>Offer</h4>
|
||||
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
|
||||
– {{@sub.offer.amount}} days free
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="mb4">
|
||||
<div>
|
||||
<h4>Offer</h4>
|
||||
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
|
||||
<span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}}
|
||||
{{#if (eq @sub.offer.type 'fixed')}}
|
||||
– {{currency-symbol @sub.offer.currency}}{{gh-price-amount @sub.offer.amount}} off
|
||||
{{else}}
|
||||
– {{@sub.offer.amount}}% off
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<div class="gh-membertier-details">
|
||||
{{#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>
|
||||
{{/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>
|
||||
</div>
|
||||
{{/if}}
|
||||
<p class="gh-membertier-detail-timestamp">Created on {{@sub.startDate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue