From 96ec92a47b970b02ba3dd7d19e85a9d05b97b3fb Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Mon, 4 Oct 2021 15:00:41 +0200 Subject: [PATCH] Update offer details structure - Added static UI to offer details page - Deleted offer modal --- .../components/modals/membership/offer.hbs | 140 ------------------ .../app/components/modals/membership/offer.js | 50 ------- ghost/admin/app/controllers/offer.js | 46 +++++- ghost/admin/app/router.js | 4 +- ghost/admin/app/styles/layouts/main.css | 38 +++++ ghost/admin/app/styles/layouts/offers.css | 38 ++++- ghost/admin/app/styles/layouts/settings.css | 46 +----- ghost/admin/app/styles/patterns/forms.css | 4 + ghost/admin/app/styles/patterns/global.css | 9 ++ ghost/admin/app/styles/spirit/_box-shadow.css | 2 +- ghost/admin/app/templates/offer.hbs | 131 +++++++++++++++- .../app/templates/settings/membership.hbs | 4 +- 12 files changed, 265 insertions(+), 247 deletions(-) delete mode 100644 ghost/admin/app/components/modals/membership/offer.hbs delete mode 100644 ghost/admin/app/components/modals/membership/offer.js diff --git a/ghost/admin/app/components/modals/membership/offer.hbs b/ghost/admin/app/components/modals/membership/offer.hbs deleted file mode 100644 index cac01b68ba..0000000000 --- a/ghost/admin/app/components/modals/membership/offer.hbs +++ /dev/null @@ -1,140 +0,0 @@ -
-
-
-

New offer

-
-
-
-
-
-

Basic

-
- - - - -

User internally

- -
- -

Discount info

-
- - - - - {{svg-jar "arrow-down-small"}} - - - -
-
-
-
-
-
Percentage discount
-
-
-
-
-
-
Fixed amount discount
-
-
-
- {{#if (eq this.selectedDiscountType "percentage")}} - - - - - - {{else}} - - - - - - {{/if}} -
-
- -

Portal settings

-
-
- - - - - - - - - - -
- - - - - -
-
-
-

Portal preview

-
-
-
-
- -
- -
- - - -
-
diff --git a/ghost/admin/app/components/modals/membership/offer.js b/ghost/admin/app/components/modals/membership/offer.js deleted file mode 100644 index 7fb7e053e8..0000000000 --- a/ghost/admin/app/components/modals/membership/offer.js +++ /dev/null @@ -1,50 +0,0 @@ -import Component from '@glimmer/component'; -import {action} from '@ember/object'; -import {inject as service} from '@ember/service'; -import {task} from 'ember-concurrency-decorators'; -import {tracked} from '@glimmer/tracking'; - -export default class ModalsMembershipOfferComponent extends Component { - @service config; - @service settings; - @service store; - @tracked cadences = []; - @tracked products = []; - @tracked selectedDiscountType = 'percentage'; - - constructor() { - super(...arguments); - } - - @task({drop: true}) - *fetchProducts() { - this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price,benefits'}); - const cadences = []; - this.products.forEach((product) => { - cadences.push({ - label: `${product.name} - Monthly`, - name: product.monthlyPrice.id - }); - cadences.push({ - label: `${product.name} - Yearly`, - name: product.yearlyPrice.id - }); - }); - this.cadences = cadences; - } - - @action - setup() { - this.fetchProducts.perform(); - } - - @action - setDiscountType(discountType) { - this.selectedDiscountType = discountType; - } - - @action - updateVisibility(tab) { - this.tab = tab; - } -} diff --git a/ghost/admin/app/controllers/offer.js b/ghost/admin/app/controllers/offer.js index feeb8099bb..3626142e0a 100644 --- a/ghost/admin/app/controllers/offer.js +++ b/ghost/admin/app/controllers/offer.js @@ -1,7 +1,51 @@ import Controller from '@ember/controller'; import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency-decorators'; +import {tracked} from '@glimmer/tracking'; export default class MembersController extends Controller { + @service config; + @service settings; + @service store; + @tracked cadences = []; + @tracked products = []; + @tracked selectedDiscountType = 'percentage'; + + constructor() { + super(...arguments); + this.setup(); + } + + @task({drop: true}) + *fetchProducts() { + this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price,benefits'}); + const cadences = []; + this.products.forEach((product) => { + cadences.push({ + label: `${product.name} - Monthly`, + name: product.monthlyPrice.id + }); + cadences.push({ + label: `${product.name} - Yearly`, + name: product.yearlyPrice.id + }); + }); + this.cadences = cadences; + } + @action - save() {} + setup() { + this.fetchProducts.perform(); + } + + @action + setDiscountType(discountType) { + this.selectedDiscountType = discountType; + } + + @action + updateVisibility(tab) { + this.tab = tab; + } } \ No newline at end of file diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js index df78671834..4fad29f381 100644 --- a/ghost/admin/app/router.js +++ b/ghost/admin/app/router.js @@ -44,9 +44,7 @@ Router.map(function () { this.route('settings'); this.route('settings.general', {path: '/settings/general'}); - this.route('settings.membership', {path: '/settings/members'}, function () { - this.route('offer'); - }); + this.route('settings.membership', {path: '/settings/members'}); this.route('settings.members-email', {path: '/settings/members-email'}); this.route('settings.code-injection', {path: '/settings/code-injection'}); diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index fb8d24a5df..3a749295cb 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -989,6 +989,20 @@ max-width: var(--main-layout-content-maxwidth); } +.gh-canvas.circle-bg::before { + position: absolute; + display: block; + content: ""; + top: -450px; + right: -250px; + width: 970px; + height: 970px; + border-radius: 50%; + z-index: 0; + background: var(--main-color-content-greybg); + opacity: 0.5; +} + .gh-canvas-header { margin: 0; position: sticky; @@ -999,6 +1013,11 @@ border-color: transparent; } +.gh-canvas.circle-bg .gh-canvas-header { + position: relative; + background: none; +} + .gh-canvas-header.grey, .gh-main-grey .gh-canvas-header { background: var(--main-color-content-greybg); @@ -1029,6 +1048,25 @@ background: var(--white); } +/* Main layouts */ +.gh-main-layout.content-preview { + display: grid; + grid-template-columns: auto 460px; + grid-gap: 32px; +} + +@media (max-width: 1320px) { + .gh-main-layout.content-preview { + grid-gap: 0; + } +} + +@media (max-width: 1140px) { + .gh-main-layout.content-preview { + display: flex; + } +} + /* Main sections */ /* .gh-main-section [columns-2|columns-3] diff --git a/ghost/admin/app/styles/layouts/offers.css b/ghost/admin/app/styles/layouts/offers.css index 43bf470118..3e9e8793b7 100644 --- a/ghost/admin/app/styles/layouts/offers.css +++ b/ghost/admin/app/styles/layouts/offers.css @@ -72,18 +72,50 @@ } .gh-offer-type { + display: grid; + grid-template-columns: 160px auto; + grid-gap: 24px; white-space: nowrap; - margin-top: 3px; + margin-top: -8px; } .gh-offer-type .gh-radio { - margin-bottom: 16px; + margin-bottom: 0; + align-items: center; +} + +.gh-offer-type .gh-radio-content { + margin-left: 6px; } .gh-offer-type .gh-radio-label { font-size: 1.3rem; } -.gh-offer-modal-content textarea { + +.gh-offer-form textarea { max-width: unset; +} + +.gh-offer-form .form-group { + max-width: unset; +} + +/* Offers – Portal preview */ +.gh-offer-portal-preview { + display: flex; + justify-content: flex-end; + width: 100%; +} + +.gh-offer-portal-preview-mock { + display: flex; + align-items: center; + justify-content: center; + color: var(--midgrey); + border-radius: 5px; + height: 640px; + width: 420px; + background: #fff; + box-shadow: var(--box-shadow-preview-box); } \ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index af110bf8fd..9cce524bce 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -1435,49 +1435,12 @@ p.theme-validation-details { } /* Membership */ -.gh-setting-members-header { - position: relative; - background: none; -} - -.gh-setting-members-canvas::before { - position: absolute; - display: block; - content: ""; - top: -450px; - right: -250px; - width: 970px; - height: 970px; - border-radius: 50%; - z-index: 0; - background: var(--main-color-content-greybg); - opacity: 0.5; -} - @media (max-width: 1140px) { .gh-setting-members-canvas::before { display: none; } } -.gh-setting-members-basics { - display: grid; - grid-template-columns: auto 460px; - grid-gap: 32px; -} - -@media (max-width: 1320px) { - .gh-setting-members-basics { - grid-gap: 0; - } -} - -@media (max-width: 1140px) { - .gh-setting-members-basics { - display: flex; - } -} - .gh-setting-members-basicsform { display: flex; flex-direction: column; @@ -1630,14 +1593,7 @@ p.theme-validation-details { align-items: center; justify-content: center; background: #fff; - box-shadow: - 0 2.8px 2.2px rgba(0, 0, 0, 0.02), - 0 6.7px 5.3px rgba(0, 0, 0, 0.028), - 0 12.5px 10px rgba(0, 0, 0, 0.035), - 0 22.3px 17.9px rgba(0, 0, 0, 0.042), - 0 41.8px 33.4px rgba(0, 0, 0, 0.05), - 0 100px 80px rgba(0, 0, 0, 0.07) - ; + box-shadow: var(--box-shadow-preview-box); width: 420px; height: 562px; margin-bottom: 32px; diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index 6e36023f05..cb794956e5 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -125,6 +125,10 @@ input[type=number] { margin-bottom: 0; } +.form-group:last-of-type { + margin-bottom: 0; +} + @media (max-width: 550px) { .form-group { max-width: 100%; diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css index f8861c84a9..75e6174546 100644 --- a/ghost/admin/app/styles/patterns/global.css +++ b/ghost/admin/app/styles/patterns/global.css @@ -171,6 +171,15 @@ 0 76px 80px -5px rgba(0, 0, 0, 0.04) ; + --box-shadow-preview-box: + 0 2.8px 2.2px rgba(0, 0, 0, 0.02), + 0 6.7px 5.3px rgba(0, 0, 0, 0.028), + 0 12.5px 10px rgba(0, 0, 0, 0.035), + 0 22.3px 17.9px rgba(0, 0, 0, 0.042), + 0 41.8px 33.4px rgba(0, 0, 0, 0.05), + 0 100px 80px rgba(0, 0, 0, 0.07) + ; + /* Inputs */ --input-bg-color: var(--white); --input-border-color: var(--whitegrey-d2); diff --git a/ghost/admin/app/styles/spirit/_box-shadow.css b/ghost/admin/app/styles/spirit/_box-shadow.css index ad0fed65ef..548d75c026 100644 --- a/ghost/admin/app/styles/spirit/_box-shadow.css +++ b/ghost/admin/app/styles/spirit/_box-shadow.css @@ -11,4 +11,4 @@ .shadow-1 { box-shadow: var(--shadow-1); } .shadow-2 { box-shadow: var(--shadow-2); } -.shadow-3 { box-shadow: var(--shadow-3); } +.shadow-3 { box-shadow: var(--shadow-3); } \ No newline at end of file diff --git a/ghost/admin/app/templates/offer.hbs b/ghost/admin/app/templates/offer.hbs index 507d99e01b..44dff57840 100644 --- a/ghost/admin/app/templates/offer.hbs +++ b/ghost/admin/app/templates/offer.hbs @@ -1,4 +1,4 @@ -
+

Offers @@ -11,6 +11,133 @@
- Offer... +
+
+
+
+

Basic

+
+ + + + +

Will be shown to members on the Stripe Checkout page

+ +
+ +

Discount info

+
+ + + + + {{svg-jar "arrow-down-small"}} + + + + {{#if (eq this.selectedDiscountType "percentage")}} + + + + + + {{else}} + + + + + + {{/if}} +
+
+
+
+
Percentage discount
+
+
+
+
+
+
Fixed amount discount
+
+
+
+
+ +

Portal settings

+
+
+ + + + + + + + + + +
+ + + + + +
+
+
+
+ +
+
+

Preview

+
Portal preview
+
+
+ +
+ +
+
+ +
+

\ No newline at end of file diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs index c8935a6d67..35e1b5954c 100644 --- a/ghost/admin/app/templates/settings/membership.hbs +++ b/ghost/admin/app/templates/settings/membership.hbs @@ -1,4 +1,4 @@ -
+

Settings @@ -19,7 +19,7 @@
-
+

Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $5 million per year, while Ghost takes 0% payment fees.