Merge pull request #1651 from adsingh14/error_pages_n_css

peff · web-flow · commit fcf5b8bcb7fa · 2021-12-01T12:13:33.000-05:00
Error page responsiveness, responsive sidebar updated
diff --git a/app/assets/stylesheets/book.scss b/app/assets/stylesheets/book.scss
@@ -152,7 +152,7 @@ ol.book-toc {
 }
 
 .book-wrapper {
-  float:right;
+  float: right;
   margin: -20px 40px 0 40px;
 }
 
@@ -165,3 +165,9 @@ ol.book-toc {
     top: 2rem;
   }
 }
+
+@media (max-width: $mobile-xs) {
+  .book-wrapper {
+    margin-right: 0;
+  }
+}
diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss
@@ -16,34 +16,55 @@ body {
 }
 
 .inner {
-  width: 500px;
+  max-width: 500px;
   margin: 70px auto;
+  text-align: center;
 }
 
 p {
   font-size: 18px;
   color: lighten(#4e443c, 10%);
   margin-bottom: 30px;
+  img {
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 nav ul {
-  list-style: none;
-  font-size: 16px;
-  font-weight: bold;
-  margin-left: 0;
-  margin-bottom: 1.4em;
-  li {
-    display: inline;
-    float: left;
-    a {
-      display: block;
-      color: $orange;
-      &:hover {
-        color: darken($orange, 5%);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style: none;
+    font-size: 16px;
+    font-weight: bold;
+    margin-left: 0;
+    margin-bottom: 1.4em;
+    li {
+      a {
+        display: block;
+        color: $orange;
+        &:hover {
+          color: darken($orange, 5%);
+        }
       }
     }
-  }
-  li + li {
-    margin-left: 15px;
-  }
+    li + li {
+      margin-left: 15px;
+    }
 }
+
+// Mobile
+@media (max-width: $mobile-m) {
+  nav ul {
+    li {
+      margin-left: 0;
+      a {
+        padding: 1em;
+      }
+    }
+    li + li {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
@@ -58,12 +58,14 @@ aside.sidebar.active {
   }
   aside{
     &.sidebar {
-      position: absolute;
+      position: fixed;
+      top: 1em;
       transform: translateX(-105.5%);
       transition: transform 0.3s, background-color 0.3s;
       padding: 20px;
-      height: 100%;
-      z-index: 10;
+      height: 90vh;
+      overflow-y: scroll;
+      z-index: 1001 !important;
     }
   }
 }
diff --git a/public/404.html b/public/404.html
@@ -4,7 +4,8 @@
     <title>Git</title>
     <meta charset='utf-8'>
     <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
-    <link href="/assets/errors.css?body=1" media="screen" rel="stylesheet" type="text/css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/assets/errors.css" rel="stylesheet"/>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src="/assets/selectivizr-min.js?body=1" type="text/javascript"></script>
     <![endif]-->
diff --git a/public/422.html b/public/422.html
@@ -2,10 +2,11 @@
 <html>
 <head>
   <title>The change you wanted was rejected (422)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
     body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
     div.dialog {
-      width: 25em;
+      max-width: 25em;
       padding: 0 4em;
       margin: 4em auto 0 auto;
       border: 1px solid #ccc;
diff --git a/public/500.html b/public/500.html
@@ -4,7 +4,8 @@
     <title>Git</title>
     <meta charset='utf-8'>
     <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
-    <link href="/assets/errors.css?body=1" media="screen" rel="stylesheet" type="text/css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/assets/errors.css" rel="stylesheet"/>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src="/assets/selectivizr-min.js?body=1" type="text/javascript"></script>
     <![endif]-->

Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,7 @@ ol.book-toc {`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`.book-wrapper {`
`155`		`- float:right;`
	`155`	`+ float: right;`
`156`	`156`	`margin: -20px 40px 0 40px;`
`157`	`157`	`}`
`158`	`158`
`@@ -165,3 +165,9 @@ ol.book-toc {`
`165`	`165`	`top: 2rem;`
`166`	`166`	`}`
`167`	`167`	`}`
	`168`	`+`
	`169`	`+@media (max-width: $mobile-xs) {`
	`170`	`+ .book-wrapper {`
	`171`	`+ margin-right: 0;`
	`172`	`+ }`
	`173`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -58,12 +58,14 @@ aside.sidebar.active {`
`58`	`58`	`}`
`59`	`59`	`aside{`
`60`	`60`	`&.sidebar {`
`61`		`- position: absolute;`
	`61`	`+ position: fixed;`
	`62`	`+ top: 1em;`
`62`	`63`	`transform: translateX(-105.5%);`
`63`	`64`	`transition: transform 0.3s, background-color 0.3s;`
`64`	`65`	`padding: 20px;`
`65`		`- height: 100%;`
`66`		`- z-index: 10;`
	`66`	`+ height: 90vh;`
	`67`	`+ overflow-y: scroll;`
	`68`	`+ z-index: 1001 !important;`
`67`	`69`	`}`
`68`	`70`	`}`
`69`	`71`	`}`