Skip to content

N
nexpie-grafana-theme
Commit ea3447fb by Patrick O'Carroll Committed by Daniel Lee
Options

fixed 404 for grafana5 + now responsive (#10101) 

* fixed 404 for grafana5 + now resonsive

* code formatting fixes
parent fe177f19
Showing with 91 additions and 53 deletions
public/app/partials/error.html
<navbar model="navModel"></navbar>
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <div class="page-header__inner">
Page not found (404) <span class="page-header__logo">
</h1> <i class="page-header__icon fa fa-fw fa-exclamation-triangle"></i>
</div> </span>
<div class="error-row"> <div class="page-header__info-block">
<div class="dash-row-menu-grip"><i class="fa fa-ellipsis-v"></i></div> <h1 class="page-header__title">
<div class="panel-container error-row"> Page not found
<div class="error-column graph-box"> </h1>
<div class="error-row"> <div class="page-header__sub-title">
<div class="error-column error-space-between graph-percentage"> 404 Error
<p>100%</p> </div>
<p>80%</p> </div>
<p>60%</p> </div>
<p>40%</p> </div>
<p>20%</p> <div class="panel-container error-container">
<p>0%</p> <div class="error-column graph-box">
</div> <div class="error-row">
<div class="error-column image-box"> <div class="error-column error-space-between graph-percentage">
<img src="public/img/graph404.svg" width="100%"> <p>100%</p>
<div class="error-row error-space-between"> <p>80%</p>
<p class="graph-text">Then</p> <p>60%</p>
<p class="graph-text">Now</p> <p>40%</p>
</div> <p>20%</p>
</div> <p>0%</p>
</div> </div>
</div> <div class="error-column image-box">
<div class="error-column info-box"> <img src="public/img/graph404.svg" width="100%">
<div class="error-row current-box"> <div class="error-row error-space-between">
<p class="current-text">current</p> <p class="graph-text">Then</p>
</div> <p class="graph-text">Now</p>
<div class="error-row" style="flex: 1"> </div>
<i class="fa fa-minus error-minus"></i> </div>
<div class="error-column error-space-between"> </div>
<div class="error-row error-space-between"> </div>
<p>Chances you are on the page you are looking for.</p> <div class="error-column info-box">
<p class="left-margin">0%</p> <div class="error-row current-box">
</div> <p class="current-text">current</p>
<div> </div>
<h3>Sorry for the inconvenience</h3> <div class="error-row" style="flex: 1">
<p>Please go back to your <a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p> <i class="fa fa-minus error-minus"></i>
<p>If the error persists, seek help on the <a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p> <div class="error-column error-space-between error-full-width">
</div> <div class="error-row error-space-between">
</div> <p>Chances you are on the page you are looking for.</p>
</div> <p class="left-margin">0%</p>
</div> </div>
<span class="resize-panel-handle icon-gf icon-gf-grabber" style="cursor: default"></span> <div>
</div> <h3>Sorry for the inconvenience</h3>
</div> <p>Please go back to your
<a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
<p>If the error persists, seek help on the
<a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p>
</div>
</div>
</div>
</div>
<span class="react-resizable-handle" style="cursor: default"></span>
</div>
</div> </div>
public/sass/pages/_errorpage.scss
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
// Layout // Layout
// //
.error-container {
display: flex;
flex-direction: row;
}
.error-row { .error-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -22,7 +27,7 @@ ...@@ -22,7 +27,7 @@
.info-box { .info-box {
width: 38%; width: 38%;
padding: 2rem 1rem 6rem; padding: 2rem 1rem 2rem;
} }
.graph-percentage {padding: 0 0 1.5rem;} .graph-percentage {padding: 0 0 1.5rem;}
...@@ -58,3 +63,31 @@ ...@@ -58,3 +63,31 @@
} }
.graph-text {margin: 0;} .graph-text {margin: 0;}
@include media-breakpoint-down(sm) {
.graph-box {
width: 50%;
}
.info-box {
width: 50%;
}
}
@include media-breakpoint-down(xs) {
.error-container {
flex-direction: column;
}
.graph-box {
width: 100%;
}
.info-box {
width: 100%;
}
.error-full-width {
width: 100%;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment