Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

updated 404 page to account for mulitple products, resolves #1358

pull/1371/head
Scott Anderson 2020-08-27 10:46:16 -06:00
parent 0c0a714c27
commit 77f6fc0b84
2 changed files with 94 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/styles/layouts/_error-page.scss
View File

@ -7,7 +7,7 @@
.error-content { .error-content {
margin-top: 10vh; margin-top: 10vh;
max-width: 310px; max-width: 380px;
} }
.error-code { .error-code {
@ -56,24 +56,50 @@
margin: 2rem 0 1.5rem; margin: 2rem 0 1.5rem;
.btn { .btn {
display: block; display: flex;
position: relative;
flex-grow: 1; flex-grow: 1;
margin-right: 4px; margin-right: 4px;
padding: .75rem 1rem; padding: .75rem 1rem;
border-radius: $radius; border-radius: $radius;
text-align: center; text-align: center;
justify-content: center;
align-items: center;
color: $error-page-btn-text; color: $error-page-btn-text;
transition: background-color .2s; transition: background-color .2s;
z-index: 1;
@include gradient($article-btn-gradient); @include gradient($article-btn-gradient);
&:hover {
@include gradient($article-btn-gradient-hover);
}
&.back:before { &.back:before {
content: "\e90a"; content: "\e90a";
font-family: "icomoon"; font-family: "icomoon";
margin-right: .35rem; margin-right: .35rem;
vertical-align: text-top; vertical-align: text-top;
} }
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($article-btn-gradient-hover);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&:hover {
cursor: pointer;
&:after {
opacity: 1;
}
}
} }
} }

90
layouts/404.html
View File

@ -1,34 +1,70 @@
{{ partial "header.html" . }} <!doctype html>
<html lang="en">
<head>
{{ partial "header/google-analytics-head.html" }}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Page not found</title>
<meta name="description" content="Whoops! Looks like this page doesn't exist.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/img/favicon.png" type="image/png" sizes="32x32">
<div class="error-page"> {{ partial "header/stylesheets.html" }}
<div class="error-content"> {{ partial "header/google-fonts.html" }}
<div class="error-code"> {{ partial "header/javascript.html" }}
<div class="error-code-border">
<h1>404</h1> <meta name="Copyright" content="InfluxData Inc." />
</head>
<body>
{{ partial "header/google-analytics-body.html" }}
<div class="error-page">
<div class="error-content">
<div class="error-code">
<div class="error-code-border">
<h1>404</h1>
</div>
</div>
<div class="wayfinding">
<a class="btn back" href="javascript:history.back()">Back</a>
<a class="btn version"></a>
</div>
<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
</div> </div>
</div>
<div class="wayfinding">
<a class="btn back" href="javascript:history.back()">Back</a>
<a class="btn version">InfluxDB</a>
</div>
<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
</div> </div>
</div>
<script> <script>
function getProjectVersion(urlPath) { function getProject(urlPath) {
if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] } if (/^\/influxdb\//.test(urlPath)) { return {name: 'InfluxDB', path: '/influxdb'} }
else { return undefined } else if (/^\/telegraf\//.test(urlPath)) { return {name: 'Telegraf', path: '/telegraf'} }
} else if (/^\/chronograf\//.test(urlPath)) { return {name: 'Chronograf', path: '/chronograf'} }
else if (/^\/kapacitor\//.test(urlPath)) { return {name: 'Kapacitor', path: '/kapacitor'} }
else if (/^\/enterprise_influxdb\//.test(urlPath)) { return {name: 'InfluxDB Enterprise', path: '/enterprise_influxdb'} }
else if (/^\/platform\//.test(urlPath)) { return {name: 'InfluxData Platform', path: '/platform'} }
else { return undefined }
}
function getProjectVersion(urlPath) {
if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] }
else { return undefined }
}
var path = window.location.pathname var path = window.location.pathname
var projectVersion = getProjectVersion(path) var project = getProject(path)
var projectVersion = getProjectVersion(path)
if ( projectVersion != undefined ) { if ( project != undefined && project.path === '/platform') {
$('.btn.version').append(' ' + projectVersion).attr('href', '/' + projectVersion + '/'); $('.btn.version').append(`${project.name}`).attr('href', `${project.path}/`);
} else { } else if ( project != undefined && projectVersion != undefined ) {
$('.btn.version').hide() $('.btn.version').append(`${project.name} ${projectVersion}`).attr('href', `${project.path}/${projectVersion}/`);
} } else if ( project != undefined && projectVersion == undefined ){
</script> $('.btn.version').append(`${project.name}`).attr('href', `${project.path}/`);
} else {
$('.btn.version').hide()
}
</script>
</body>
{{ partial "footer/javascript.html" . }}
</html>
{{ partial "footer.html" . }}