0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05: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:
Austin Burdine 2015-05-23 23:40:42 -06:00
parent e7a078a541
commit bf0e40eda1
4 changed files with 73 additions and 47 deletions

View file

@ -42,19 +42,3 @@
color: color(var(--blue) lightness(-20%)); color: color(var(--blue) lightness(-20%));
text-decoration: none; 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;
}

View file

@ -10,12 +10,23 @@ var hbs = require('express-hbs'),
utils = require('./utils'), utils = require('./utils'),
input_password; input_password;
input_password = function () { input_password = function (options) {
var output = utils.inputTemplate({ 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', type: 'password',
name: 'password', name: 'password',
className: 'private-login-password', className: className,
extras: 'autofocus="autofocus"' extras: extras
}); });
return new hbs.handlebars.SafeString(output); return new hbs.handlebars.SafeString(output);

View file

@ -18,33 +18,36 @@
<link rel="stylesheet" type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'> <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"}}" /> <link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
</head> </head>
<body class="ghost-setup"> <body>
<main role="main" id="main" class="viewport"> <div class="gh-app">
<section class="setup-box js-setup-box fade-in"> <div class="gh-viewport">
<div class="vertical"> <main class="gh-main" role="main">
<form id="setup" class="setup-form private-login" method="post" novalidate="novalidate"> <div class="gh-flow">
<h1>This blog is private</h1> <div class="gh-flow-content-wrap">
<div class="form-group"> <section class="gh-flow-content">
<span class="input-icon icon-lock"> <header>
{{input_password}} <h1>This blog is private</h1>
</span> </header>
<button class="btn btn-green private-login-button" type="submit"> <form class="gh-signin" method="post" novalidate="novalidate">
Enter <div class="form-group">
</button> <span class="input-icon icon-lock">
{{input_password class="gh-input" placeholder="Password"}}
</span>
</div>
<button class="btn btn-blue btn-block" type="submit">Enter Now</button>
</form>
</section>
</div> </div>
</form> </div>
</div> </main>
</section> {{#if error}}
</main> <aside class="gh-notifications">
<article class="gh-notification gh-notification-red">
{{#if error}} <div id="gh-notification-content">{{error.message}}</div>
<aside class="notification bottom"> </article>
<div class="js-bb-notification"> </aside>
<section class="js-notification notification-error"> {{/if}}
<span class="notification-message">{{error.message}}</span>
</section>
</div> </div>
</aside> </div>
{{/if}}
</body> </body>
</html> </html>

View file

@ -17,11 +17,39 @@ describe('{{input_password}} helper', function () {
should.exist(handlebars.helpers.input_password); 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" />', var markup = '<input class="private-login-password" type="password" name="password" autofocus="autofocus" />',
rendered = helpers.input_password(); rendered = helpers.input_password();
should.exist(rendered); should.exist(rendered);
String(rendered).should.equal(markup); 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);
});
}); });