Updated member product list mock design
This commit is contained in:
Peter Zimon
parent
de0911b459
commit
601de7cb9c
|
|
@ -104,24 +104,24 @@
|
|||
<section class="gh-member-stripe-info flex flex-column flex-row-ns items-start justify-between">
|
||||
<div class="flex items-start w-50">
|
||||
<div class="flex-auto">
|
||||
<table class="gh-member-stripe-table">
|
||||
<table class="gh-member-stripe-table gh-cp-table">
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Name</td>
|
||||
<td class="gh-member-stripe-label">Name:</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if customer.name}}
|
||||
{{customer.name}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No name</span>
|
||||
<span class="midgrey-l2">No name</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Email</td>
|
||||
<td class="gh-member-stripe-label">Email:</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-email">
|
||||
{{#if customer.email}}
|
||||
{{customer.email}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No email</span>
|
||||
<span class="midgrey-l2">No email</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -130,11 +130,11 @@
|
|||
</div>
|
||||
<div class="flex items-start w-50">
|
||||
<div class="flex-auto">
|
||||
<table class="gh-member-stripe-table">
|
||||
<table class="gh-member-stripe-table gh-cp-table">
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Card</td>
|
||||
<td class="gh-member-stripe-label">Card:</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
<span class="midgrey-d1">No card info</span>
|
||||
**** **** **** 4242
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" target="_blank" rel="noopener">
|
||||
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" class="gh-cp-table-link" target="_blank" rel="noopener">
|
||||
View on Stripe
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -152,44 +152,82 @@
|
|||
|
||||
<h4 class="gh-main-section-header small bn">Products</h4>
|
||||
<div class="gh-main-section-content">
|
||||
<ol class="gh-price-list gh-list">
|
||||
<ol class="gh-memberproduct-list gh-list">
|
||||
<li class="gh-list-row header empty">
|
||||
<div class="gh-list-header"></div>
|
||||
<div class="gh-list-header"></div>
|
||||
</li>
|
||||
<li class="gh-list-row">
|
||||
<div class="gh-list-data gh-price-list-title">
|
||||
<h3 class="gh-price-list-name">
|
||||
Product 1
|
||||
<div class="gh-list-data gh-cp-memberproduct-title">
|
||||
<h3 class="gh-memberproduct-name">
|
||||
Product 1 <span class="gh-badge active">Active</span>
|
||||
</h3>
|
||||
<p class="ma0 pa0 f8 midgrey gh-price-list-description">
|
||||
Description
|
||||
</p>
|
||||
<div class="gh-memberproduct-description gh-cp-memberproduct-showmore">
|
||||
<input type="checkbox" id="show-more-1" role="button">
|
||||
<label for="show-more-1">
|
||||
{{svg-jar "arrow-right"}}
|
||||
<span class="gh-cp-memberproduct-pricelabel">Monthly</span>
|
||||
–
|
||||
<span class="gh-cp-memberproduct-price">$4/month</span>
|
||||
–
|
||||
<span class="gh-cp-memberproduct-renewal">Renews 9 May 2021</span>
|
||||
</label>
|
||||
|
||||
<div class="details">
|
||||
<span>Created on 9 April 2021</span>
|
||||
<a href="https://dashboard.stripe.com/" target="_blank" rel="noopener">
|
||||
View on Stripe
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-price-list-actionlist">
|
||||
<LinkTo @route="settings.product">Edit</LinkTo>
|
||||
<div class="gh-list-data gh-memberproduct-actions">
|
||||
<div class="gh-memberproduct-actionlist">
|
||||
<LinkTo @route="members">Edit</LinkTo>
|
||||
<button class="gh-btn gh-btn-link archive"><span>Cancel subscription</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="gh-list-row gh-price-list-archived">
|
||||
<div class="gh-list-data gh-price-list-title">
|
||||
<h3 class="gh-price-list-name">
|
||||
<li class="gh-list-row gh-memberproduct-archived">
|
||||
<div class="gh-list-data gh-cp-memberproduct-title">
|
||||
<h3 class="gh-memberproduct-name">
|
||||
Product 2 <span class="gh-badge archived">Cancelled</span>
|
||||
</h3>
|
||||
<p class="ma0 pa0 f8 midgrey gh-price-list-description">
|
||||
Cancelled product
|
||||
</p>
|
||||
<div class="gh-memberproduct-description gh-cp-memberproduct-showmore">
|
||||
<input type="checkbox" id="show-more-2" role="button">
|
||||
<label for="show-more-2">
|
||||
{{svg-jar "arrow-right"}}
|
||||
<span class="gh-cp-memberproduct-pricelabel">Monthly</span>
|
||||
–
|
||||
<span class="gh-cp-memberproduct-price">$4/month</span>
|
||||
–
|
||||
<span class="gh-cp-memberproduct-renewal">Renews 9 May 2021</span>
|
||||
</label>
|
||||
|
||||
<div class="details">
|
||||
<span>Created on 9 April 2021</span>
|
||||
<a href="https://dashboard.stripe.com/" target="_blank" rel="noopener">
|
||||
View on Stripe
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-list-data gh-price-list-actions">
|
||||
<div class="gh-price-list-actionlist">
|
||||
<div class="gh-list-data gh-memberproduct-actions">
|
||||
<div class="gh-memberproduct-actionlist">
|
||||
<button class="gh-btn gh-btn-link"><span>Activate</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<tr class="gh-list-row gh-memberproduct-add-product">
|
||||
<td colspan="2" class="gh-list-data">
|
||||
<LinkTo @route="members" data-test-link="add-webhook">
|
||||
{{svg-jar "add"}}
|
||||
<span>Add product</span>
|
||||
</LinkTo>
|
||||
</td>
|
||||
</tr>
|
||||
</ol>
|
||||
|
||||
{{!-- <button type="button" class="gh-btn gh-btn-green" {{action (toggle "showPriceModal" this)}}>
|
||||
|
|
|
|||
|
|
@ -1545,4 +1545,120 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
|
||||
.gh-cp-data-summary:not(:last-of-type) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.gh-cp-table {
|
||||
margin: -8px 0 0;
|
||||
}
|
||||
|
||||
.gh-cp-table .gh-member-stripe-label {
|
||||
width: 150px;
|
||||
color: var(--middarkgrey);
|
||||
}
|
||||
|
||||
.gh-cp-table-link {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/* Member's product list */
|
||||
.gh-memberproduct-name span.archived {
|
||||
background: var(--midgrey);
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.gh-memberproduct-actionlist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-memberproduct-list .gh-list-row:hover .gh-memberproduct-actionlist {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-memberproduct-actionlist a,
|
||||
.gh-memberproduct-actionlist button {
|
||||
line-height: 0;
|
||||
margin-left: 24px;
|
||||
color: var(--darkgrey);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-memberproduct-actionlist button.archive {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct-showmore {
|
||||
line-height: 1;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct-showmore label {
|
||||
font-size: 1.3rem;
|
||||
color: var(--middarkgrey);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct-pricelabel {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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: 4px 0 0 15px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.gh-memberproduct-add-product .gh-list-data {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.gh-memberproduct-add-product .gh-list-data a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-memberproduct-add-product .gh-list-data a svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.gh-memberproduct-add-product .gh-list-data a svg path {
|
||||
fill: var(--green);
|
||||
}
|
||||
Loading…
Reference in New Issue