From 821c087871e65eb61f833f31c18c211d6faddadb Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Fri, 18 Jun 2021 16:57:52 +0200 Subject: [PATCH] Refined complimentary for multiple products (alpha) --- .../components/gh-member-settings-form-cp.hbs | 150 ++++++++++++------ ghost/admin/app/styles/layouts/members.css | 57 +++++-- ghost/admin/app/styles/layouts/products.css | 11 +- ghost/admin/app/styles/patterns/forms.css | 9 +- ghost/admin/public/assets/icons/dotdotdot.svg | 2 +- 5 files changed, 151 insertions(+), 78 deletions(-) diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs index dd12711738..1bfedc69e2 100644 --- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs +++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs @@ -135,71 +135,119 @@ {{/unless}} {{#each this.products as |product|}} -
-
+
+

{{product.name}} - {{#unless (eq product.subscriptions.length 1)}} + {{#if (gt product.subscriptions.length 1)}} {{product.subscriptions.length}} subscriptions - {{/unless}} + {{/if}}

+ {{#each product.subscriptions as |sub|}}
- {{sub.price.nickname}} - – - {{sub.price.currencySymbol}}{{sub.price.nonDecimalAmount}}/{{sub.price.interval}} - – - {{#if sub.cancel_at_period_end}} - Has access until {{sub.validUntil}} - Cancelled - {{else}} - Renews {{sub.validUntil}} - Active - {{/if}} -
- {{#if sub.cancellationReason}} -
Cancellation reason: {{sub.cancellationReason}}
- {{/if}} -
Created on {{sub.startDate}}
- - - - - {{svg-jar "dotdotdot"}} - - - - -
  • - - View Stripe customer - -
    • -
  • -
  • - - View Stripe subscription - -
    • -
  • +
    + {{sub.price.nickname}} + – {{#if sub.cancel_at_period_end}} - + Has access until {{sub.validUntil}} + Cancelled {{else}} - + Renews {{sub.validUntil}} + Active {{/if}} -
    • -     -     +
    + {{#if sub.cancellationReason}} +
    Cancellation reason: {{sub.cancellationReason}}
    + {{/if}} +
    Created on {{sub.startDate}}
    +
    + +
    +
    +
    + {{sub.price.currencySymbol}} + {{sub.price.nonDecimalAmount}} +
    +
    {{if (eq sub.price.interval "year") "yearly" "monthly"}}
    +
    + + + + + {{svg-jar "dotdotdot"}} + + + + +
  • + + View Stripe customer + +
    • +
  • +
  • + + View Stripe subscription + +
    • +
  • + {{#if sub.cancel_at_period_end}} + + {{else}} + + {{/if}} +
    • +     +     +
    {{/each}} + + {{#if (and (feature "multipleProducts") (eq product.subscriptions.length 0))}} +
    +
    +
    + Complimentary + Active +
    +
    Created on
    +
    +
    +
    +
    + $ + 0 +
    +
    yearly
    +
    + + + + {{svg-jar "dotdotdot"}} + + + + +
  • + +
    • +     +     +
    +
    + {{/if}} + {{#if (not (feature "multipleProducts"))}} {{#if this.isAddComplimentaryAllowed}} -
    +
    {{#if this.isCreatingComplimentary}} {{else}} diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 4bee0b64ad..f262dedced 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1634,12 +1634,19 @@ 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; +} + .gh-memberproduct-name { display: flex; justify-content: space-between; font-size: 1.65rem !important; font-weight: 600; - margin-bottom: 4px !important; + margin-bottom: 2px !important; } .gh-cp-memberproduct.multiple-subs .gh-memberproduct-name { @@ -1673,7 +1680,6 @@ p.gh-members-import-errordetail:first-of-type { } .gh-memberproduct-created { - margin-top: 1px; color: var(--midgrey); } @@ -1685,8 +1691,6 @@ p.gh-members-import-errordetail:first-of-type { position:relative; margin-top: 12px; margin-bottom: -8px; - padding-top: 12px; - border-top: 1px solid var(--whitegrey); } .gh-memberproduct-list-footer.min-height { @@ -1755,25 +1759,46 @@ p.gh-members-import-errordetail:first-of-type { .gh-memberproduct-subscription { position: relative; + display: flex; + align-items: center; + justify-content: space-between; } -.gh-memberproduct-subscription .action-menu { - position: absolute; - top: -4px; - right: 0; +.gh-cp-memberproduct .gh-product-card-price { + padding: 10px 18px; } -.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action { - opacity: 0; +.gh-cp-memberproduct:not(.multiple-subs) .gh-product-card-price { + margin-top: -19px; + padding: 15px 18px; +} + +.product-actions-menu { + top: calc(100% - 16px); + right: 0px; + left: auto; +} + +.gh-cp-memberproduct.multiple-subs .product-actions-menu { + 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); + box-shadow: none; } -.gh-memberproduct-subscription:hover .action-menu .gh-btn-subscription-action, .gh-memberproduct-subscription .action-menu .gh-btn-subscription-action.open { - opacity: 1; -} - -.gh-cp-memberproduct.multiple-subs .gh-memberproduct-subscription .action-menu { - top: 20px; + border: 1px solid var(--lightgrey-l1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .gh-memberproduct-subscription .action-menu > .gh-btn span { diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css index bf56d8fcff..880d26c4e3 100644 --- a/ghost/admin/app/styles/layouts/products.css +++ b/ghost/admin/app/styles/layouts/products.css @@ -115,12 +115,17 @@ min-width: 90px; } +.gh-product-card-price .currency-symbol, .gh-product-card-price .amount, .gh-product-card-price .currency { font-weight: 600; color: var(--darkgrey); } +.gh-product-card-price .currency-symbol { + margin-top: -3px; +} + .gh-product-card-price .amount { font-size: 2.1rem; letter-spacing: -0.2px; @@ -346,12 +351,6 @@ color: var(--midgrey); } -.product-actions-menu { - top: calc(100% + 6px); - right: 10px; - left: auto; -} - .gh-btn-archive-toggle { width: 80px; } diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index d58725b75d..86688049b2 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -792,10 +792,8 @@ textarea { } .form-rich-radio .gh-radio-label { - padding: 12px 12px 12px 14px; - display: flex; - align-items: center; - justify-content: space-between; + position: relative; + padding: 12px 40px 12px 14px; } .form-rich-radio .gh-radio-label .description h4 { @@ -815,6 +813,9 @@ textarea { } .form-rich-radio .check { + position: absolute; + top: calc(50% - 7px); + right: 12px; color: var(--darkgrey); width: 14px; height: 14px; diff --git a/ghost/admin/public/assets/icons/dotdotdot.svg b/ghost/admin/public/assets/icons/dotdotdot.svg index 714b035960..3266507c18 100644 --- a/ghost/admin/public/assets/icons/dotdotdot.svg +++ b/ghost/admin/public/assets/icons/dotdotdot.svg @@ -1 +1 @@ -navigation-menu-horizontal \ No newline at end of file +navigation-menu-horizontal \ No newline at end of file