mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Refined member details screen
no issue
This commit is contained in:
Peter Zimon
parent
d9351f7292
commit
8ac7500084
@ -24,11 +24,37 @@ p.gh-members-list-email {
|
||||
/* Member details
|
||||
/* ----------------------------------------- */
|
||||
|
||||
label[for="member-description"] + p {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
textarea.gh-member-details-textarea {
|
||||
max-width: 100%;
|
||||
height: 123px;
|
||||
}
|
||||
|
||||
.gh-member-info-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.gh-member-stripe-table {
|
||||
width: 100%;
|
||||
margin: 10px 0 12px;
|
||||
}
|
||||
|
||||
.gh-member-stripe-table td {
|
||||
vertical-align: top;
|
||||
font-size: 1.4rem;
|
||||
padding: 6px 12px 6px 0;
|
||||
}
|
||||
|
||||
.gh-member-stripe-label {
|
||||
color: var(--midgrey-d1);
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Import modal
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
@ -46,86 +46,76 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="midlightgrey f-small fw5 ttu mt15">Stripe info</h4>
|
||||
<h4 class="midlightgrey f-small fw5 ttu mt12">Stripe info</h4>
|
||||
{{#if subscriptions}}
|
||||
<div class="br4 shadow-1 bg-grouped-table mt2">
|
||||
{{#if hasMultipleSubscriptions}}
|
||||
<div class="pa1 flex flex-column flex-row-ns items-center justify-center f5 fw5" style="background:#262b2e26">
|
||||
Member has multiple subscriptions
|
||||
<div class="pa2 flex flex-column flex-row-ns items-center justify-center f7 fw5 bg-whitegrey-l2 bb b--whitegrey br4 br--top">
|
||||
{{svg-jar "info" class="gh-member-info-icon mr2 fill-darkgrey"}} Member has multiple Stripe subscriptions
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each subscriptions as |subscription|}}
|
||||
<div class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
|
||||
<div class="flex flex-column items-start w-100 w-50-ns mr8">
|
||||
<div class="f5 fw5 mb2"> Stripe Customer </div>
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-customer-id">Stripe Customer Id</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
name="member-customer-id"
|
||||
value=(readonly subscription.customer)
|
||||
tabindex="1"}}
|
||||
{{/gh-form-group}}
|
||||
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-customer-id">Name</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
name="member-customer-name"
|
||||
value=(readonly subscription.name)
|
||||
tabindex="1"}}
|
||||
{{/gh-form-group}}
|
||||
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-customer-id">Email</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
name="member-customer-email"
|
||||
value=(readonly subscription.email)
|
||||
tabindex="1"}}
|
||||
{{/gh-form-group}}
|
||||
<section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
|
||||
<div class="flex items-start w-100">
|
||||
<div class="w-50 flex-auto mr8">
|
||||
<h4 class="f8 fw6">Customer data</h4>
|
||||
<table class="gh-member-stripe-table">
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Stripe customer ID</td>
|
||||
<td class="gh-member-stripe-data"><a href="https://dashboard.stripe.com/test/customers/{{subscription.customer}}" target="_blank" rel="noopener" data-tooltip="View on Stripe">{{subscription.customer}}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Name</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if subscription.name}}
|
||||
{{subscription.name}}
|
||||
{{else}}
|
||||
<span class="midlightgrey-l2">No name</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Email</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if subscription.email}}
|
||||
{{subscription.email}}
|
||||
{{else}}
|
||||
<span class="midlightgrey-l2">No email</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Customer since</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if subscription.startDate}}
|
||||
{{subscription.startDate}}
|
||||
{{else}}
|
||||
<span class="midlightgrey-l2">No data</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="w-50 flex-auto">
|
||||
<h4 class="f8 fw6">Subscription data</h4>
|
||||
<table class="gh-member-stripe-table">
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Plan</td>
|
||||
<td class="gh-member-stripe-data">{{subscription.planName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Current status</td>
|
||||
<td class="gh-member-stripe-data">{{subscription.status}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gh-member-stripe-label">Next renewal date</td>
|
||||
<td class="gh-member-stripe-data">{{subscription.validUntil}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb6 mb0-ns w-100 w-50-ns">
|
||||
<div class="f5 fw5 mb2"> Subscription </div>
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-plan-name">Subscription plan</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
value=(readonly subscription.planName)
|
||||
name="member-plan-name"
|
||||
tabindex="1"}}
|
||||
{{/gh-form-group}}
|
||||
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-customer-status">Subscription Status</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
value=(readonly subscription.status)
|
||||
name="member-customer-status"
|
||||
tabindex="2"}}
|
||||
{{/gh-form-group}}
|
||||
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-customer-status">Subscriber since</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
value=(readonly subscription.startDate)
|
||||
name="member-customer-status"
|
||||
tabindex="2"}}
|
||||
{{/gh-form-group}}
|
||||
|
||||
{{#gh-form-group errors=member.errors hasValidated=member.hasValidated}}
|
||||
<label for="member-plan-renewal">Renewal date</label>
|
||||
{{gh-text-input
|
||||
disabled=true
|
||||
value=(readonly subscription.validUntil)
|
||||
name="member-plan-renewal"
|
||||
tabindex="1"}}
|
||||
{{/gh-form-group}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{else}}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<section class="gh-canvas">
|
||||
<form class="mb15 member-basic-info-form" {{action (perform "save") on="submit"}}>
|
||||
<form class="mb10 member-basic-info-form" {{action (perform "save") on="submit"}}>
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
{{#link-to "members" data-test-link="members-back"}}Members{{/link-to}}
|
||||
|
||||
1
ghost/admin/public/assets/icons/info.svg
Normal file
1
ghost/admin/public/assets/icons/info.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>information-circle</title><path d="M12 23.501c-6.341 0-11.5-5.159-11.5-11.5S5.659.501 12 .501s11.5 5.159 11.5 11.5-5.159 11.5-11.5 11.5zm0-22c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z"/><path d="M13 17.505c-.827 0-1.5-.673-1.5-1.5v-6.5H10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h1.5c.551 0 1 .449 1 1v6.5c0 .276.224.5.5.5h1.5c.276 0 .5.224.5.5s-.224.5-.5.5H13zM11.745 7.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75.75.336.75.75-.336.75-.75.75z"/></svg>
|
||||
|
After Width: | Height: | Size: 559 B |
Loading…
Reference in New Issue
Block a user