mirror of
https://github.com/Damillora/Yuika
synced 2024-11-22 17:27:32 +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 {
|
.index-header {
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
height: 50vh;
|
height: 70vh;
|
||||||
}
|
}
|
||||||
@screen md {
|
@screen md {
|
||||||
.index-header {
|
.index-header {
|
||||||
@ -49,6 +49,9 @@ header {
|
|||||||
height: 70vh;
|
height: 70vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.index-header.large {
|
||||||
|
height: 90vh;
|
||||||
|
}
|
||||||
.no-image {
|
.no-image {
|
||||||
@apply bg-yuika-blue-500
|
@apply bg-yuika-blue-500
|
||||||
}
|
}
|
||||||
@ -254,6 +257,10 @@ footer {
|
|||||||
.nav li {
|
.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;
|
@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 {
|
.nav li a {
|
||||||
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
|
@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;
|
@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 components;
|
||||||
|
|
||||||
@tailwind utilities;
|
@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",
|
"name": "yuika",
|
||||||
"description": "nanao.moe's blog theme",
|
"description": "nanao.moe's blog theme",
|
||||||
"version": "2.4.1",
|
"version": "2.5.0",
|
||||||
"engines": {
|
"engines": {
|
||||||
"ghost-api": "v3"
|
"ghost-api": "v3"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -17,57 +17,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-group">
|
<div class="nav-group">
|
||||||
{{#if @labs.members}}
|
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
|
{{#if @member}}
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
<li class="separator"></li>
|
||||||
|
</ul>
|
||||||
{{navigation}}
|
{{navigation}}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
</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}}
|
|
||||||
Loading…
Reference in New Issue
Block a user