kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use custom styling for the laravel-based error pages

Browse source
This commit is contained in:
Kevin MacMartin 2018-04-15 21:54:43 -04:00
parent 71e8146f9c
commit d335a3d587
12 changed files with 72 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
gulpfile.js vendored
View file

@ -140,6 +140,11 @@ gulp.task("sass-dashboard", () => {
return processSass("dashboard"); return processSass("dashboard");
}); });
// Task for error page styles
gulp.task("sass-error", () => {
return processSass("error");
});
// Task for public javascript // Task for public javascript
gulp.task("js-public", () => { gulp.task("js-public", () => {
return processVue("app", jsPublic); return processVue("app", jsPublic);
@ -191,13 +196,14 @@ gulp.task("watch", () => {
gulp.watch([ "app/**/*.php", "routes/**/*.php", "resources/views/**/*.blade.php" ], gulp.series(browserSyncReload)); gulp.watch([ "app/**/*.php", "routes/**/*.php", "resources/views/**/*.blade.php" ], gulp.series(browserSyncReload));
gulp.watch([ jsPublic, "resources/assets/js/mixins/**/*.js", "resources/components/**/*.vue" ], gulp.series("js-public", browserSyncReload)); gulp.watch([ jsPublic, "resources/assets/js/mixins/**/*.js", "resources/components/**/*.vue" ], gulp.series("js-public", browserSyncReload));
gulp.watch(jsDashboard, gulp.series("js-dashboard", browserSyncReload)); gulp.watch(jsDashboard, gulp.series("js-dashboard", browserSyncReload));
gulp.watch("resources/assets/sass/**/*.scss", gulp.parallel("sass-public", "sass-dashboard")); gulp.watch("resources/assets/sass/**/*.scss", gulp.parallel("sass-public", "sass-dashboard", "sass-error"));
}); });
// Task to run non-development tasks // Task to run non-development tasks
gulp.task("default", gulp.parallel( gulp.task("default", gulp.parallel(
"sass-public", "sass-public",
"sass-dashboard", "sass-dashboard",
"sass-error",
"js-public", "js-public",
"js-public-libs", "js-public-libs",
"js-dashboard", "js-dashboard",

BIN
resources/assets/fonts/OpenSans-Bold.eot Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.otf Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.ttf Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.woff Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.woff2 Normal file
View file

Binary file not shown.

17
resources/assets/sass/_fonts.scss vendored
View file

@ -10,6 +10,18 @@
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "OpenSans-Bold";
src: url("/fonts/OpenSans-Bold.eot");
src: url("/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"),
url("/fonts/OpenSans-Bold.woff") format("woff"),
url("/fonts/OpenSans-Bold.woff2") format("woff2"),
url("/fonts/OpenSans-Bold.ttf") format("truetype"),
url("/fonts/OpenSans-Bold.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@mixin normalize-font { @mixin normalize-font {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -19,3 +31,8 @@
@include normalize-font; @include normalize-font;
font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif; font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif;
} }
@mixin font-sans-bold {
@include normalize-font;
font-family: "OpenSans-Bold", Arial, Helvetica, sans-serif;
}

28
resources/assets/sass/error.scss vendored Normal file
View file

@ -0,0 +1,28 @@
// Core
@import "_fonts";
// Libraries
@import "bootstrap/scss/bootstrap.scss";
.error-page {
display: flex;
min-height: 100vh;
padding: $grid-gutter-width ($grid-gutter-width / 2);
align-items: center;
&-content {
@include font-sans-bold;
width: 100%;
font-size: 22px;
text-align: center;
text-transform: uppercase;
@include media-breakpoint-up(sm) {
font-size: 32px;
}
@include media-breakpoint-up(lg) {
font-size: 48px;
}
}
}

8
resources/views/errors/404.blade.php
View file

@ -1,5 +1,3 @@
@extends('templates.error') @extends('templates.error', [
'title' => 'Page Not Found'
@section('error-title') ])
Page Not Found
@endsection

8
resources/views/errors/503.blade.php
View file

@ -1,5 +1,3 @@
@extends('templates.error') @extends('templates.error', [
'title' => 'Be Right Back'
@section('error-title') ])
Be Right Back
@endsection

8
resources/views/errors/no-such-record.blade.php
View file

@ -1,5 +1,3 @@
@extends('templates.error') @extends('templates.error', [
'title' => 'No Such Record'
@section('error-title') ])
No Such Record
@endsection

53
resources/views/templates/error.blade.php
View file

@ -1,46 +1,15 @@
<!DOCTYPE html> @extends('templates.base')
<html>
<head>
<title>@yield('error-title') - {{ env('APP_NAME') }}</title>
<style> @section('page-includes')
html, body { <link rel="stylesheet" href="/css/error.css?version={{ env('CACHE_BUST') }}" />
height: 100%; @endsection
}
body { @section('page-content')
margin: 0; <div class="flex-wrapper">
padding: 0; <div class="error-page">
width: 100%; <div class="error-page-content">
color: #B0BEC5; {{ $title }}
display: table;
font-weight: 100;
font-family: Impact, Charcoal, sans-serif;
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 72px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">@yield('error-title')</div>
</div> </div>
</div> </div>
</body> </div>
</html> @endsection