tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Refined member detail screen for offers

This commit is contained in:
Peter Zimon 2021-10-21 13:43:12 +02:00
parent 8a0782c043
commit 97d42e8294
3 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/gh-member-settings-form.hbs
View File

@ -147,8 +147,8 @@
{{/unless}}
{{#each this.products as |product|}}
<div class="gh-member-product-container">
<div class="gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
<div class="gh-main-section-content grey gh-member-product-container">
<div class="gh-main-content-card gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
<h3 class="gh-memberproduct-name">
{{product.name}}
{{#if (gt product.subscriptions.length 1)}}
@ -175,19 +175,22 @@
{{/if}}
{{#if sub.offer}}
<div>
<span style="font-weight: bold;"> {{sub.offer.name}} </span>
<span class="gh-cp-memberproduct-pricelabel"> {{sub.offer.name}} </span>
offer
{{#if (eq sub.offer.type 'fixed')}}
({{currency-symbol sub.offer.currency}}{{gh-price-amount sub.offer.amount}} off)
{{else}}
({{sub.offer.amount}}% off)
{{/if}}
applied to subscription</div>
applied to subscription
</div>
{{/if}}
<div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
<div class="gh-memberproduct-created">
Created on {{sub.startDate}}
</div>
</div>
<div class="flex items-center">
<div class="gh-memberproduct-price-container">
<div class="gh-product-card-price">
<div class="flex items-start">
<span class="currency-symbol">{{sub.price.currencySymbol}}</span>

8
app/styles/layouts/main.css
View File

@ -1330,13 +1330,13 @@
}
/* Grey background modifiers */
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text),
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text) {
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text):not(.gh-btn-outline),
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text):not(.gh-btn-outline) {
background: var(--whitegrey-d2);
}
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-text):hover,
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):not(.gh-btn-text):hover {
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-text):not(.gh-btn-outline):hover,
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):not(.gh-btn-text):not(.gh-btn-outline):hover {
background: color-mod(var(--whitegrey-d2) l(-4%));
}

34
app/styles/layouts/members.css
View File

@ -1679,10 +1679,11 @@ p.gh-members-import-errordetail:first-of-type {
/* Member's product list */
.gh-member-product-container {
border: 1px solid var(--whitegrey);
border-radius: 3px;
margin-bottom: 20px;
padding: 24px;
grid-row-gap: 24px;
}
.gh-cp-memberproduct {
margin-bottom: 0 !important;
}
.gh-memberproduct-name {
@ -1804,21 +1805,29 @@ p.gh-members-import-errordetail:first-of-type {
.gh-memberproduct-subscription {
position: relative;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
}
.gh-memberproduct-price-container {
display: flex;
align-items: flex-start;
}
.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-price-container {
margin-top: -19px;
}
.gh-cp-memberproduct .gh-product-card-price {
padding: 10px 18px;
}
.gh-cp-memberproduct:not(.multiple-subs) .gh-product-card-price {
margin-top: -19px;
padding: 15px 18px;
}
.product-actions-menu {
top: calc(100% - 16px);
top: calc(100% - 36px);
right: 0px;
left: auto;
}
@ -1827,16 +1836,9 @@ p.gh-members-import-errordetail:first-of-type {
top: calc(100% + 6px);
}
.gh-cp-memberproduct .gh-memberproduct-subscription .action-menu {
margin-left: 3vw;
}
.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-subscription .action-menu {
margin-top: -28px;
}
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action:not(:hover) {
border-color: var(--main-bg-color);
border: 1px solid var(--whitegrey);
background: var(--main-bg-color) !important;
box-shadow: none;
}