mirror of
https://github.com/TryGhost/Ghost.git
synced 2023-12-13 21:00:40 +01:00
rewrites default private.hbs for new zelda styles
closes #5073 - changes format to match new zelda layout - modifies the input_password helper to allow customization of class & placeholder
This commit is contained in:
parent
e7a078a541
commit
bf0e40eda1
4 changed files with 73 additions and 47 deletions
|
@ -42,19 +42,3 @@
|
|||
color: color(var(--blue) lightness(-20%));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.private-login h1 {
|
||||
margin-bottom: 2rem;
|
||||
text-indent: 0;
|
||||
}
|
||||
.private-login .form-group {
|
||||
margin: 0;
|
||||
}
|
||||
.private-login input[type="password"] {
|
||||
padding: 9px 7px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.private-login-button {
|
||||
padding: 9px 1.8em;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
|
|
@ -10,12 +10,23 @@ var hbs = require('express-hbs'),
|
|||
utils = require('./utils'),
|
||||
input_password;
|
||||
|
||||
input_password = function () {
|
||||
var output = utils.inputTemplate({
|
||||
input_password = function (options) {
|
||||
options = options || {};
|
||||
options.hash = options.hash || {};
|
||||
|
||||
var className = (options.hash.class) ? options.hash.class : 'private-login-password',
|
||||
extras = 'autofocus="autofocus"',
|
||||
output;
|
||||
|
||||
if (options.hash.placeholder) {
|
||||
extras += ' placeholder="' + options.hash.placeholder + '"';
|
||||
}
|
||||
|
||||
output = utils.inputTemplate({
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
className: 'private-login-password',
|
||||
extras: 'autofocus="autofocus"'
|
||||
className: className,
|
||||
extras: extras
|
||||
});
|
||||
|
||||
return new hbs.handlebars.SafeString(output);
|
||||
|
|
|
@ -18,33 +18,36 @@
|
|||
<link rel="stylesheet" type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
|
||||
<link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
|
||||
</head>
|
||||
<body class="ghost-setup">
|
||||
<main role="main" id="main" class="viewport">
|
||||
<section class="setup-box js-setup-box fade-in">
|
||||
<div class="vertical">
|
||||
<form id="setup" class="setup-form private-login" method="post" novalidate="novalidate">
|
||||
<body>
|
||||
<div class="gh-app">
|
||||
<div class="gh-viewport">
|
||||
<main class="gh-main" role="main">
|
||||
<div class="gh-flow">
|
||||
<div class="gh-flow-content-wrap">
|
||||
<section class="gh-flow-content">
|
||||
<header>
|
||||
<h1>This blog is private</h1>
|
||||
</header>
|
||||
<form class="gh-signin" method="post" novalidate="novalidate">
|
||||
<div class="form-group">
|
||||
<span class="input-icon icon-lock">
|
||||
{{input_password}}
|
||||
{{input_password class="gh-input" placeholder="Password"}}
|
||||
</span>
|
||||
<button class="btn btn-green private-login-button" type="submit">
|
||||
Enter
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn btn-blue btn-block" type="submit">Enter Now</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{#if error}}
|
||||
<aside class="notification bottom">
|
||||
<div class="js-bb-notification">
|
||||
<section class="js-notification notification-error">
|
||||
<span class="notification-message">{{error.message}}</span>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="gh-notifications">
|
||||
<article class="gh-notification gh-notification-red">
|
||||
<div id="gh-notification-content">{{error.message}}</div>
|
||||
</article>
|
||||
</aside>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -17,11 +17,39 @@ describe('{{input_password}} helper', function () {
|
|||
should.exist(handlebars.helpers.input_password);
|
||||
});
|
||||
|
||||
it('returns the correct input', function () {
|
||||
it('returns the correct input when no custom options are specified', function () {
|
||||
var markup = '<input class="private-login-password" type="password" name="password" autofocus="autofocus" />',
|
||||
rendered = helpers.input_password();
|
||||
should.exist(rendered);
|
||||
|
||||
String(rendered).should.equal(markup);
|
||||
});
|
||||
|
||||
it('returns the correct input when a custom class is specified', function () {
|
||||
var markup = '<input class="test-class" type="password" name="password" autofocus="autofocus" />',
|
||||
options = {
|
||||
hash: {
|
||||
class: 'test-class'
|
||||
}
|
||||
},
|
||||
rendered = helpers.input_password(options);
|
||||
|
||||
should.exist(rendered);
|
||||
|
||||
String(rendered).should.equal(markup);
|
||||
});
|
||||
|
||||
it('returns the correct input when a custom placeholder is specified', function () {
|
||||
var markup = '<input class="private-login-password" type="password" name="password" autofocus="autofocus" placeholder="Test" />',
|
||||
options = {
|
||||
hash: {
|
||||
placeholder: 'Test'
|
||||
}
|
||||
},
|
||||
rendered = helpers.input_password(options);
|
||||
|
||||
should.exist(rendered);
|
||||
|
||||
String(rendered).should.equal(markup);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue