Member detail screen refinements

- removed Stripe section and added View on Stripe link to member main info block
- fixed dropdown UI bugs in Product list
This commit is contained in:
Peter Zimon 2021-05-05 13:40:09 +02:00
parent 6eb3e810a2
commit 893289eac9
2 changed files with 31 additions and 73 deletions

View File

@ -99,10 +99,27 @@
</div>
</div>
</GhFormGroup>
{{#if (and this.canShowStripeInfo this.customer)}}
<div class="gh-member-stripe-info">
<h4 class="gh-setting-title m">Stripe customer</h4>
<p class="gh-setting-desc">
{{#if this.customer.email}}
{{this.customer.email}}
{{else}}
<span class="midgrey-l2">No email</span>
{{/if}}
&ndash;
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" target="_blank" rel="noopener">
View on Stripe
</a>
</p>
</div>
{{/if}}
</div>
</div>
{{#if this.canShowStripeInfo}}
{{!-- {{#if this.canShowStripeInfo}}
{{#if this.customer}}
<h4 class="gh-main-section-header small bn">Stripe info</h4>
<div class="gh-main-section-content grey">
@ -141,13 +158,11 @@
</div>
</section>
<div>
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" class="gh-cp-table-link" target="_blank" rel="noopener">
View on Stripe
</a>
</div>
</div>
{{/if}}
{{/if}}
{{/if}} --}}
<h4 class="gh-main-section-header small bn">Products</h4>
@ -202,12 +217,12 @@
</li>
<li>
{{#if sub.cancel_at_period_end}}
<button class="gh-btn gh-btn-link gh-btn-text green" {{action "continueSubscription" sub.id}}>
<button {{action "continueSubscription" sub.id}}>
<span>Continue subscription</span>
</button>
{{else}}
<button class="gh-btn gh-btn-link gh-btn-text red" {{action "cancelSubscription" sub.id}}>
<span>Cancel subscription</span>
<button {{action "cancelSubscription" sub.id}}>
<span class="red">Cancel subscription</span>
</button>
{{/if}}
</li>

View File

@ -554,11 +554,13 @@ textarea.gh-member-details-textarea {
}
.gh-member-stripe-info {
border-bottom: 1px solid var(--whitegrey);
margin-top: 24px;
}
.gh-member-stripe-info:last-of-type {
border-bottom: none;
.gh-member-stripe-info p {
font-size: 1.25rem;
font-weight: 400;
margin: 4px 0 0;
}
.gh-member-stripe-table {
@ -1598,75 +1600,16 @@ p.gh-members-import-errordetail:first-of-type {
color: var(--red);
}
.gh-cp-memberproduct-showmore {
line-height: 1;
margin-top: 5px;
}
.gh-cp-memberproduct-showmore label {
display: inline-block;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.5em;
color: var(--middarkgrey);
margin: 4px 0 2px;
cursor: pointer;
}
.gh-cp-memberproduct-showmore label:hover {
color: var(--darkgrey);
}
.gh-cp-memberproduct-pricelabel {
font-weight: 600;
}
.gh-cp-memberproduct-showmore label span.archived {
.gh-memberproduct-subscription span.archived {
background: var(--lightgrey-l2);
color: var(--midgrey);
font-size: 1.2rem;
}
.gh-cp-memberproduct-showmore label svg {
width: 9px;
height: 9px;
margin-right: 2px;
}
.gh-cp-memberproduct-showmore label svg path {
fill: var(--midgrey);
}
.gh-cp-memberproduct-showmore .details {
display: none;
flex-direction: column;
font-size: 1.3rem;
line-height: 1.7em;
color: var(--middarkgrey);
margin: 2px 0 16px 15px;
}
.gh-cp-memberproduct-showmore .details .actions {
display: flex;
margin-top: 3px;
}
.gh-cp-memberproduct-showmore .details .actions button span {
font-size: 1.3rem;
}
.gh-cp-memberproduct-showmore input[type=checkbox] {
display: none;
}
.gh-cp-memberproduct-showmore input[type=checkbox]:checked ~ .details {
display: flex;
}
.gh-cp-memberproduct-showmore input[type=checkbox]:checked ~ label svg {
transform: rotate(90deg);
}
.gh-memberproduct-archived .gh-memberproduct-name {
opacity: 0.5;
}
@ -1728,10 +1671,10 @@ p.gh-members-import-errordetail:first-of-type {
right: 0;
}
.gh-memberproduct-subscription .action-menu .gh-btn span {
.gh-memberproduct-subscription .action-menu > .gh-btn span {
height: 28px;
}
.gh-memberproduct-subscription .action-menu .gh-btn svg {
.gh-memberproduct-subscription .action-menu > .gh-btn svg {
margin: 0;
}