fixed 404 for grafana5 + now responsive (#10101)

* fixed 404 for grafana5 + now resonsive

* code formatting fixes

public/app/partials/error.html

@@ -1,55 +1,60 @@
-<navbar model="navModel"></navbar>
-
 <div class="page-container">
-
   <div class="page-header">
-    <h1>
-		Page not found (404)
-	</h1>
-	</div>
-	<div class="error-row">
-		<div class="dash-row-menu-grip"><i class="fa fa-ellipsis-v"></i></div>
-		<div class="panel-container error-row">
-			<div class="error-column graph-box">
-				<div class="error-row">
-					<div class="error-column error-space-between graph-percentage">
-						<p>100%</p>
-						<p>80%</p>
-						<p>60%</p>
-						<p>40%</p>
-						<p>20%</p>
-						<p>0%</p>
-					</div>
-					<div class="error-column image-box">
-						<img src="public/img/graph404.svg" width="100%">
-						<div class="error-row error-space-between">
-							<p class="graph-text">Then</p>
-							<p class="graph-text">Now</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="error-column info-box">
-				<div class="error-row current-box">
-					<p class="current-text">current</p>
-				</div>
-				<div class="error-row" style="flex: 1">
-					<i class="fa fa-minus error-minus"></i>
-					<div class="error-column error-space-between">
-						<div class="error-row error-space-between">
-							<p>Chances you are on the page you are looking for.</p>
-							<p class="left-margin">0%</p>
-						</div>
-						<div>
-							<h3>Sorry for the inconvenience</h3>
-							<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="resize-panel-handle icon-gf icon-gf-grabber" style="cursor: default"></span>
-		</div>
-	</div>
-
+    <div class="page-header__inner">
+      <span class="page-header__logo">
+        <i class="page-header__icon fa fa-fw fa-exclamation-triangle"></i>
+      </span>
+      <div class="page-header__info-block">
+        <h1 class="page-header__title">
+          Page not found
+        </h1>
+        <div class="page-header__sub-title">
+          404 Error
+        </div>
+      </div>
+    </div>
+  </div>
+    <div class="panel-container error-container">
+      <div class="error-column graph-box">
+        <div class="error-row">
+          <div class="error-column error-space-between graph-percentage">
+            <p>100%</p>
+            <p>80%</p>
+            <p>60%</p>
+            <p>40%</p>
+            <p>20%</p>
+            <p>0%</p>
+          </div>
+          <div class="error-column image-box">
+            <img src="public/img/graph404.svg" width="100%">
+            <div class="error-row error-space-between">
+              <p class="graph-text">Then</p>
+              <p class="graph-text">Now</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="error-column info-box">
+        <div class="error-row current-box">
+          <p class="current-text">current</p>
+        </div>
+        <div class="error-row" style="flex: 1">
+          <i class="fa fa-minus error-minus"></i>
+          <div class="error-column error-space-between error-full-width">
+            <div class="error-row error-space-between">
+              <p>Chances you are on the page you are looking for.</p>
+              <p class="left-margin">0%</p>
+            </div>
+            <div>
+              <h3>Sorry for the inconvenience</h3>
+              <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>

public/sass/pages/_errorpage.scss

@@ -3,6 +3,11 @@
 // Layout
 //
 
+.error-container {
+  display: flex;
+  flex-direction: row;
+}
+
 .error-row {
     display: flex;
     flex-direction: row;
@@ -22,7 +27,7 @@
 
 .info-box {
     width: 38%;
-    padding: 2rem 1rem 6rem;
+    padding: 2rem 1rem 2rem;
 }
 
 .graph-percentage {padding: 0 0 1.5rem;}
@@ -58,3 +63,31 @@
 }
 
 .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%;
+  }
+}