mirror of
https://github.com/Damillora/Yuika
synced 2024-11-22 09:17:33 +00:00
Add templates to prepare for full membership
This commit is contained in:
parent
9d9698814d
commit
489be7f21c
@ -41,7 +41,7 @@ header {
|
||||
}
|
||||
.index-header {
|
||||
min-height: 200px;
|
||||
height: 50vh;
|
||||
height: 70vh;
|
||||
}
|
||||
@screen md {
|
||||
.index-header {
|
||||
@ -49,6 +49,9 @@ header {
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
.index-header.large {
|
||||
height: 90vh;
|
||||
}
|
||||
.no-image {
|
||||
@apply bg-yuika-blue-500
|
||||
}
|
||||
@ -254,6 +257,10 @@ footer {
|
||||
.nav li {
|
||||
@apply w-full flex flex-row justify-start items-center my-0 text-white text-base h-12 transition duration-300 ease-in-out;
|
||||
}
|
||||
.nav li.separator {
|
||||
height: 0;
|
||||
@apply border border-white;
|
||||
}
|
||||
.nav li a {
|
||||
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
|
||||
}
|
||||
@ -370,7 +377,21 @@ footer {
|
||||
@apply grid grid-cols-1 row-gap-4 my-8;
|
||||
}
|
||||
|
||||
/* 7. Default transitions */
|
||||
/* 7. Subscribe form */
|
||||
#subscribe-form .message-success {
|
||||
@apply hidden;
|
||||
}
|
||||
#subscribe-form.success .message-success {
|
||||
@apply block;
|
||||
}
|
||||
#subscribe-form .message-error {
|
||||
@apply hidden;
|
||||
}
|
||||
#subscribe-form.error .message-error {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
/* 8. Default transitions */
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
|
||||
// Parse the URL parameter
|
||||
function getParameterByName(name, url) {
|
||||
if (!url) url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, "\\$&");
|
||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
$("#subscribe-button").click(function(){
|
||||
$("#subscribe-dialog").show();
|
||||
$("#subscribe-form").show();
|
||||
$("#subscribe-success").hide();
|
||||
$("#subscribe-confirmation").hide();
|
||||
$("#subscribe-failure").hide();
|
||||
})
|
||||
|
||||
$("#subscribe-back").click(function(){
|
||||
$("#subscribe-dialog").hide();
|
||||
})
|
||||
|
||||
$("#subscribe-submit").click(function() {
|
||||
$("#subscribe-form").hide();
|
||||
$("#subscribe-success").hide();
|
||||
$("#subscribe-confirmation").show();
|
||||
$("#subscribe-failure").hide();
|
||||
|
||||
})
|
||||
$(document).ready(function () {
|
||||
var action = getParameterByName('action');
|
||||
var success = getParameterByName('success');
|
||||
|
||||
if (action == 'subscribe' && (success === null || success === 'true')) {
|
||||
$("#subscribe-dialog").show();
|
||||
$("#subscribe-form").hide();
|
||||
$("#subscribe-success").show();
|
||||
$("#subscribe-confirmation").hide();
|
||||
$("#subscribe-failure").hide();
|
||||
}
|
||||
if (action == 'subscribe' && success === 'false') {
|
||||
$("#subscribe-dialog").show();
|
||||
$("#subscribe-form").hide();
|
||||
$("#subscribe-success").hide();
|
||||
$("#subscribe-confirmation").hide();
|
||||
$("#subscribe-failure").show();
|
||||
}
|
||||
});
|
||||
50
members/account.hbs
Normal file
50
members/account.hbs
Normal file
@ -0,0 +1,50 @@
|
||||
{{!< ../default}}
|
||||
|
||||
|
||||
{{#unless @member}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
{{/unless}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||
<div class="container mx-auto content-full">
|
||||
<div class="text-white">
|
||||
<div>
|
||||
{{#if @member}}
|
||||
<div class="flex flex-row items-center mb-2">
|
||||
{{#if @member.avatar_image}}
|
||||
<img class="author-image" src="{{@member.avatar_image}}" alt="{{@member.email}}" />
|
||||
{{/if}}
|
||||
<p class="text-white text-2xl md:text-4xl ml-4">{{@member.email}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{#if @member.paid}}
|
||||
{{else if @member}}
|
||||
<h1 class="text-2xl">You are subscribed to updates</h1>
|
||||
<p>You are currently subscribed to updates from <strong>{{@site.title}}</strong>.</p>
|
||||
{{else}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</main>
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
56
members/signin.hbs
Normal file
56
members/signin.hbs
Normal file
@ -0,0 +1,56 @@
|
||||
{{!< ../default}}
|
||||
|
||||
|
||||
{{#if @member}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
{{/if}}
|
||||
<div class="relative group index-header large">
|
||||
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
|
||||
<div class="container mx-auto content-full">
|
||||
<div class="text-white">
|
||||
<div id="subscribe-form">
|
||||
<h1 class="text-2xl">Welcome back!</h1>
|
||||
<p>Sign into your account again for full access</p>
|
||||
<form id="subscribe-form" data-members-form="signin">
|
||||
<div class="py-8">
|
||||
<label class="text-sm">Email address</label>
|
||||
<input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
|
||||
</div>
|
||||
<button type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
|
||||
Send login link
|
||||
</button>
|
||||
<div class="message-success">
|
||||
<p>Please check your email inbox to complete sign in.</p>
|
||||
</div>
|
||||
<div class="message-error">
|
||||
<p>Please enter a valid email address!</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{#post}}
|
||||
{{content}}
|
||||
{{/post}}
|
||||
</div>
|
||||
</main>
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
58
members/signup.hbs
Normal file
58
members/signup.hbs
Normal file
@ -0,0 +1,58 @@
|
||||
{{!< ../default}}
|
||||
|
||||
|
||||
{{#if @member}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
{{/if}}
|
||||
<div class="relative group index-header large">
|
||||
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
|
||||
<div class="container mx-auto content-full">
|
||||
<div class="text-white">
|
||||
<div>
|
||||
{{#unless @member}}
|
||||
<h1 class="text-2xl">Subscribe to {{@site.title}}</h1>
|
||||
<p>Get the latest posts delivered straight to your inbox</p>
|
||||
<form id="subscribe-form" data-members-form="subscribe">
|
||||
<div class="py-8">
|
||||
<label class="text-sm">Email address</label>
|
||||
<input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
|
||||
</div>
|
||||
<button id="subscribe-submit" type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
|
||||
Subscribe
|
||||
</button>
|
||||
<div class="message-success">
|
||||
<p>Please check your email inbox to confirm your subscription!</p>
|
||||
</div>
|
||||
<div class="message-error">
|
||||
<p>Please enter a valid email address!</p>
|
||||
</div>
|
||||
</form>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{#post}}
|
||||
{{content}}
|
||||
{{/post}}
|
||||
</div>
|
||||
</main>
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "yuika",
|
||||
"description": "nanao.moe's blog theme",
|
||||
"version": "2.4.1",
|
||||
"version": "2.5.0",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
||||
@ -17,57 +17,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
{{#if @labs.members}}
|
||||
<ul class="nav">
|
||||
{{#if @member}}
|
||||
<li>
|
||||
<a id="subscribe-button" href="#">Subscribe</a>
|
||||
<a href="{{@site.url}}/account/">{{@member.email}}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#signout" data-members-signout>Sign out</a>
|
||||
</li>
|
||||
{{else}}
|
||||
<li>
|
||||
<a href="{{@site.url}}/signin/">Sign in</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{@site.url}}/signup/">Subscribe</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{/if}}
|
||||
<li class="separator"></li>
|
||||
</ul>
|
||||
{{navigation}}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if @labs.members}}
|
||||
{{!-- Subscription dialog --}}
|
||||
<div class="fixed left-0 right-0 top-0 bottom-0 z-30 hidden" id="subscribe-dialog">
|
||||
<div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
|
||||
<div class="h-full w-full bg-black opacity-50">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-0 right-0 top-0 bottom-0 z-40">
|
||||
<div class="h-full w-full py-16 px-4 text-white">
|
||||
<div id="subscribe-form">
|
||||
<h1 class="text-2xl">Subscribe to {{@site.title}}</h1>
|
||||
<p>Get the latest posts delivered straight to your inbox</p>
|
||||
<form data-members-form="subscribe">
|
||||
<div class="py-8">
|
||||
<label class="text-sm">Email address</label>
|
||||
<input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
|
||||
</div>
|
||||
<button id="subscribe-submit" type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="subscribe-confirmation">
|
||||
<h1 class="text-2xl">One more step....</h1>
|
||||
<p>Please check your email inbox to confirm your subscription!</p>
|
||||
</div>
|
||||
<div id="subscribe-success">
|
||||
<h1 class="text-2xl">Thank you for subscribing to {{@site.title}}!</h1>
|
||||
<p>The latest posts will be periodically delivered to you when they are published.</p>
|
||||
</div>
|
||||
<div id="subscribe-failure">
|
||||
<h1 class="text-2xl">Invalid subscription link</h1>
|
||||
<p>The link might have expired, or you entered the wrong link. You can try resubscribing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-0 top-0 z-50 py-2 pl-2 text-white hover:bg-yuika-blue-700 transition duration-300 ease-in-out flex flex-row items-center justify-center">
|
||||
<a id="subscribe-back" href="#"><span class="h-12 w-12 px-2 py-3 text-white material-icons">arrow_back</span></a>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user