From 6eb9a1218f429b80ec36025bdb056ff137aba8a1 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Fri, 6 Dec 2019 16:25:42 +0700 Subject: [PATCH] Members templates --- assets/css/components/forms.css | 1 - assets/css/ghost/members.css | 83 +++++++++++++++++++++++++++------ members/account.hbs | 37 +++++++++++++++ members/signin.hbs | 34 ++++++++++++++ members/signup.hbs | 75 +++++++++++++++++++++++++++++ 5 files changed, 215 insertions(+), 15 deletions(-) create mode 100644 members/account.hbs create mode 100644 members/signin.hbs create mode 100644 members/signup.hbs diff --git a/assets/css/components/forms.css b/assets/css/components/forms.css index b1212c8b..4cdb668e 100644 --- a/assets/css/components/forms.css +++ b/assets/css/components/forms.css @@ -17,7 +17,6 @@ .gh-input:focus { border-color: var(--color-primary); - box-shadow: 0 0 0 1px var(--color-primary); } .gh-select { diff --git a/assets/css/ghost/members.css b/assets/css/ghost/members.css index 3c01601e..28e8846f 100644 --- a/assets/css/ghost/members.css +++ b/assets/css/ghost/members.css @@ -1,12 +1,65 @@ +/* Members Auth Template +/* ---------------------------------------------------------- */ + +.gh-auth-form { + width: 100%; + max-width: 600px; + margin: 0 auto 10vmin; + text-align: center; +} + +.gh-auth-title { + margin: 0 0 0.1em; + font-size: 4.2rem; +} + +.gh-auth-form p { + margin: 0 0 20px 0; + font-size: 1.7rem; + color: rgba(0,0,0,0.6) +} + +.gh-auth-form p small { + display: inline-block; + margin: 15px 0 0 0; + font-size: 1.4rem; +} + +.gh-auth-box { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 460px; + margin: 0 auto; +} + +.gh-auth-box .gh-button { + margin-left: 10px; +} + +@media (max-width: 600px) { + .gh-auth-box { + flex-direction: column; + } + .gh-auth-box .gh-button { + width: 100%; + margin: 15px 0 0 0; + } +} + /* Members Forms /* ---------------------------------------------------------- */ -form[data-members-form] .button-loader, +form[data-members-form] .gh-button-loader, form[data-members-form] .message-success, form[data-members-form] .message-error { display: none; } +.gh-button-content { + min-width: 100px; +} + .message-success svg, .message-error svg { position: relative; @@ -19,17 +72,17 @@ form[data-members-form] .message-error { fill: #fff; } .message-error svg { - fill: var(--color-primary); + fill: red; } form[data-members-form].success .message-success, form[data-members-form].error .message-error { position: fixed; top: 20px; - left: 6vw; - right: 6vw; + left: 4vw; + right: 4vw; z-index: 9999; - max-width: calc(1400px - 12vw); + max-width: calc(1400px - 8vw); margin: 0 auto; padding: 10px 0; color: #fff; @@ -44,33 +97,35 @@ form[data-members-form].success .message-success { background: var(--color-success); } form[data-members-form].error .message-error { - color: var(--color-primary); + color: red; background: #fff; - box-shadow: var(--color-primary) 0 0 0 1px; + box-shadow: red 0 0 0 1px; } -form[data-members-form] .button { +form[data-members-form] .gh-button { position: relative; + min-width: 120px; } /*-- Loading --*/ /* Hide button text */ -form[data-members-form].loading .button-content { +form[data-members-form].loading .gh-button-content { visibility: hidden; } /* Show loading spinner */ -form[data-members-form].loading .button-loader { +form[data-members-form].loading .gh-button-loader { display: inline-block; position: absolute; left: 50%; - margin-left: -19px; - transform: scale(0.7); + bottom: -30%; + margin: 0 0 0 -19px; + transform: scale(0.6); } -.button-loader svg path, -.button-loader svg rect{ +.gh-button-loader svg path, +.gh-button-loader svg rect{ fill: #fff; } diff --git a/members/account.hbs b/members/account.hbs new file mode 100644 index 00000000..f7080fe7 --- /dev/null +++ b/members/account.hbs @@ -0,0 +1,37 @@ +{{!< ../default}} + +
+
+ + {{#if @member.paid}} + + {{!-- Logged in, paying member: Show account info --}} + + + {{else if @member}} + + {{!-- Logged in, not paying: Link to checkout --}} + + + {{else}} + + {{!-- Not logged in: Redirect to signin --}} + + + {{/if}} + +
+
+ + diff --git a/members/signin.hbs b/members/signin.hbs new file mode 100644 index 00000000..ba546661 --- /dev/null +++ b/members/signin.hbs @@ -0,0 +1,34 @@ +{{!< ../default}} + +
+
+ + {{#if @member}} + + {{!-- Logged in: Redirect home --}} + + + {{else}} + + {{!-- Not logged in: Signin form --}} +
+

Welcome back!

+

Sign into your account again for full access

+
+ + +
+

Don't have an account yet? Sign up

+
Great! Check your inbox and click the link to complete signin
+
Please enter a valid email address!
+
+ + {{/if}} + +
+
+ + \ No newline at end of file diff --git a/members/signup.hbs b/members/signup.hbs new file mode 100644 index 00000000..b0ec78e9 --- /dev/null +++ b/members/signup.hbs @@ -0,0 +1,75 @@ +{{!< ../default}} + +
+
+ + {{#if @member.paid}} + + {{!-- Logged in, paying member: Redirect home --}} + + + {{else if @member}} + + {{!-- Logged in, not paying: Check out --}} +
+

Choose your subscription

+

Unlock full access to {{@site.title}} and see the entire library of members-only content & updates

+
+
+
+

Monthly

+ ${{@price.monthly}} / month +
+
+
    +
  • Full access to all private posts
    • +
  • Regular updates with new content
    • +
  • Support independent publishing
    • +
  • Simple, secure card payment
    • +
+ Choose this plan +
+
+
+
+

Yearly

+ ${{@price.yearly}} / year +
+
+
    +
  • Full access to all private posts
    • +
  • Regular updates with new content
    • +
  • Support independent publishing
    • +
  • Simple, secure card payment
    • +
  • One easy payment instead of 12!
    • +
+ Choose this plan +
+
+
+
+ + {{else}} + + {{!-- Not logged in: Sign up --}} +
+

Signup to {{@site.title}}

+

{{@site.description}}

+
+ + +
+

Already have an account? Sign in

+
Great! Check your inbox and click the link to confirm your subscription
+
Please enter a valid email address!
+
+ + {{/if}} + +
+
+ + \ No newline at end of file