Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Fixup broken error page styles

Browse source
This commit is contained in:
John O'Nolan 2015-06-08 11:13:42 +01:00
parent 5e0cc1ae10
commit 93b0505d68
8 changed files with 94 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
core/client/app/controllers/error.js
View file

@ -5,7 +5,7 @@ var ErrorController = Ember.Controller.extend({
}),
message: Ember.computed('content.statusText', function () {
if (this.get('code') === 404) {
return 'No Ghost Found';
return 'Page not found';
}
return this.get('content.statusText') !== 'error' ? this.get('content.statusText') : 'Internal Server Error';

80
core/client/app/styles/layouts/error.css
View file

@ -2,91 +2,65 @@
/* ---------------------------------------------------------- */
.error-content {
display: table;
margin: 0 auto;
padding: 0;
max-width: 530px;
height: 100%;
}
.error-content {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
user-select: text;
}
@media (max-width: 630px) {
.error-content {
max-width: 264px;
text-align: center;
}
}
.error-details {
display: table-cell;
vertical-align: middle;
display: flex;
align-items: center;
margin-bottom: 4rem;
}
.error-image {
display: inline-block;
width: 96px;
height: 150px;
vertical-align: middle;
.error-ghost {
margin: 15px;
height: 115px;
}
@media (max-width: 630px) {
.error-image {
width: 72px;
height: 112px;
.error-ghost {
display: none;
}
}
.error-image img {
width: 100%;
height: 100%;
}
.error-message {
position: relative;
top: -5px;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
.error-code {
margin: 0;
color: #979797;
font-size: 7.8em;
font-size: 7.8rem;
line-height: 0.9em;
}
@media (max-width: 630px) {
.error-code {
font-size: 5.8em;
}
}
.error-description {
margin: 0;
padding: 0;
border: none;
color: #979797;
font-size: 1.9em;
font-size: 1.9rem;
font-weight: 300;
}
@media (max-width: 630px) {
.error-description {
font-size: 1.4em;
}
.error-message {
display: flex;
flex-direction: column;
margin: 15px;
}
.error-message a {
margin-top: 5px;
font-size: 1.4rem;
line-height: 1;
}
/* Stack trace
/* ---------------------------------------------------------- */
.error-stack {
margin: 1em auto;
padding: 2em;
margin: 1rem auto;
padding: 2rem;
max-width: 800px;
background-color: rgba(255, 255, 255, 0.3);
}
@ -104,9 +78,9 @@
.error-stack-list li:before {
content: "\21AA";
display: inline-block;
margin-right: 0.5em;
margin-right: 0.5rem;
color: #bbb;
font-size: 1.2em;
font-size: 1.2rem;
}
.error-stack-function {

49
core/client/app/templates/error.hbs
View file

@ -1,28 +1,27 @@
<section class="error-content error-404 js-error-container">
<section class="error-details">
<figure class="error-image">
<div class="gh-view">
<section class="error-content error-404 js-error-container">
<section class="error-details">
<img class="error-ghost" src="{{gh-path 'admin' '/img/404-ghost@2x.png'}}" srcset="{{gh-path 'admin' '/img/404-ghost.png'}} 1x, {{gh-path 'admin' '/img/404-ghost@2x.png'}} 2x" />
</figure>
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<h2 class="error-description">{{message}}</h2>
<a class="error-link" href="{{gh-path 'blog'}}">Go to the front page →</a>
</section>
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<h2 class="error-description">{{message}}</h2>
</section>
</section>
</section>
</section>
{{#if stack}}
<section class="error-stack">
<h3>Stack Trace</h3>
<p><strong>{{message}}</strong></p>
<ul class="error-stack-list">
{{#each stack as |item|}}
<li>
at
{{#if item.function}}<em class="error-stack-function">{{item.function}}</em>{{/if}}
<span class="error-stack-file">({{item.at}})</span>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if stack}}
<section class="error-stack">
<h3>Stack Trace</h3>
<p><strong>{{message}}</strong></p>
<ul class="error-stack-list">
{{#each stack as |item|}}
<li>
at
{{#if item.function}}<em class="error-stack-function">{{item.function}}</em>{{/if}}
<span class="error-stack-file">({{item.at}})</span>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</div>

2
core/server/errors/index.js
View file

@ -280,7 +280,7 @@ errors = {
},
error404: function (req, res, next) {
var message = res.isAdmin && req.user ? 'No Ghost Found' : 'Page Not Found';
var message = 'Page not found';
// do not cache 404 error
res.set({'Cache-Control': 'no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0'});

28
core/server/views/error.hbs
View file

@ -1,28 +0,0 @@
{{!< default}}
<section class="error-content error-404 js-error-container">
<section class="error-details">
<figure class="error-image">
<img class="error-ghost" src="{{asset "img/404-ghost@2x.png" ghost="true"}}" srcset="{{asset "img/404-ghost.png" ghost="true"}} 1x, {{asset "img/404-ghost@2x.png" ghost="true"}} 2x"/>
</figure>
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<h2 class="error-description">{{message}}</h2>
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
</section>
</section>
</section>
{{#if stack}}
<section class="error-stack">
<h3>Stack Trace</h3>
<p><strong>{{message}}</strong></p>
<ul class="error-stack-list">
{{#foreach stack}}
<li>
at
{{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
<span class="error-stack-file">({{at}})</span>
</li>
{{/foreach}}
</ul>
</section>
{{/if}}

64
core/server/views/user-error.hbs
View file

@ -20,37 +20,39 @@
</head>
<body>
<main role="main" id="main">
<div id="container">
<section class="error-content error-404 js-error-container">
<section class="error-details">
<figure class="error-image">
<img
class="error-ghost"
src="{{asset "img/404-ghost@2x.png" ghost="true"}}"
srcset="{{asset "img/404-ghost.png" ghost="true"}} 1x, {{asset "img/404-ghost@2x.png" ghost="true"}} 2x"/>
</figure>
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<h2 class="error-description">{{message}}</h2>
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
</section>
</section>
</section>
{{#if stack}}
<section class="error-stack">
<h3>Stack Trace</h3>
<p><strong>{{message}}</strong></p>
<ul class="error-stack-list">
{{#each stack}}
<li>
at
{{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
<span class="error-stack-file">({{at}})</span>
</li>
{{/each}}
</ul>
</section>
{{/if}}
<div class="gh-app">
<div class="gh-viewport">
<div class="gh-view">
<section class="error-content error-404 js-error-container">
<section class="error-details">
<img
class="error-ghost"
src="{{asset "img/404-ghost@2x.png" ghost="true"}}"
srcset="{{asset "img/404-ghost.png" ghost="true"}} 1x, {{asset "img/404-ghost@2x.png" ghost="true"}} 2x"/>
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<h2 class="error-description">{{message}}</h2>
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
</section>
</section>
</section>
{{#if stack}}
<section class="error-stack">
<h3>Stack Trace</h3>
<p><strong>{{message}}</strong></p>
<ul class="error-stack-list">
{{#each stack}}
<li>
at
{{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
<span class="error-stack-file">({{at}})</span>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</div>
</div>
</div>
</main>
</body>

12
core/test/functional/routes/frontend_spec.js
View file

@ -59,7 +59,7 @@ describe('Frontend Routing', function () {
request.get('/spectacular/')
.expect('Cache-Control', testUtils.cacheRules['private'])
.expect(404)
.expect(/Page Not Found/)
.expect(/Page not found/)
.end(doEnd(done));
});
@ -67,7 +67,7 @@ describe('Frontend Routing', function () {
request.get('/spectacular/marvellous/')
.expect('Cache-Control', testUtils.cacheRules['private'])
.expect(404)
.expect(/Page Not Found/)
.expect(/Page not found/)
.end(doEnd(done));
});
@ -75,7 +75,7 @@ describe('Frontend Routing', function () {
request.get('/tag/spectacular/')
.expect('Cache-Control', testUtils.cacheRules['private'])
.expect(404)
.expect(/Page Not Found/)
.expect(/Page not found/)
.end(doEnd(done));
});
@ -83,7 +83,7 @@ describe('Frontend Routing', function () {
request.get('/author/spectacular/')
.expect('Cache-Control', testUtils.cacheRules['private'])
.expect(404)
.expect(/Page Not Found/)
.expect(/Page not found/)
.end(doEnd(done));
});
});
@ -178,7 +178,7 @@ describe('Frontend Routing', function () {
request.get('/' + date + '/welcome-to-ghost/')
.expect('Cache-Control', testUtils.cacheRules['private'])
.expect(404)
.expect(/Page Not Found/)
.expect(/Page not found/)
.end(doEnd(done));
});
});
@ -204,7 +204,7 @@ describe('Frontend Routing', function () {
request.get('/welcome-to-ghost/notedit/')
.expect('Cache-Control', testUtils.cacheRules['private'])
.expect(404)
.expect(/Page Not Found/)
.expect(/Page not found/)
.end(doEnd(done));
});
});

4
core/test/unit/error_handling_spec.js
View file

@ -319,7 +319,7 @@ describe('Error handling', function () {
view.should.match(/user-error\.hbs/);
// Test that the message is correct
options.message.should.equal('Page Not Found');
options.message.should.equal('Page not found');
options.code.should.equal(404);
this.statusCode.should.equal(404);
@ -350,7 +350,7 @@ describe('Error handling', function () {
view.should.match(/user-error\.hbs/);
// Test that the message is correct
options.message.should.equal('Page Not Found');
options.message.should.equal('Page not found');
options.code.should.equal(404);
this.statusCode.should.equal(404);