]> BookStack Code Mirror - website/commitdiff
Tweaked docs pages for better mobile display
authorDan Brown <redacted>
Tue, 5 Oct 2021 12:38:29 +0000 (13:38 +0100)
committerDan Brown <redacted>
Tue, 5 Oct 2021 12:38:29 +0000 (13:38 +0100)
- Removed full sidebar for mobile view to prevent large amount of links
  to scroll past.
- Adjusted main breakpoint size to better align to grid system used.
- Fixed large images pushing out content on mobile

themes/bookstack/layouts/_default/single.html
themes/bookstack/sass/_text.scss
themes/bookstack/sass/_variables.scss
themes/bookstack/sass/styles.scss

index e4b18c47f4d8ee0229abad359bdbb88f0911211c..99144c2a65dcb65a6cda62fb858b13303d33d50f 100644 (file)
@@ -24,7 +24,7 @@
 <div class="container">
 
   <div class="row">
-    <aside class="col-sm-2 sidebar">
+    <aside class="col-md-2 sidebar">
       <div class="sidebar-inner">
         {{ if eq .Type "admin-doc" }}
         {{partial "menu_admin_docs"}}
         {{partial "menu_user_docs"}}
         {{end}}
       </div>
+      <div class="sidebar-inner mobile">
+        <ul>
+          <li><a href="/docs">&laquo; All Documentation</a></li>
+        </ul>
+      </div>
     </aside>
 
-    <main class="col-sm-8 col-sm-offset-1 docs-content">
+    <main class="col-md-8 col-md-offset-1 docs-content">
 
       <h1>{{.Title}}</h1>
 
index 2d0d559e8f2a48a4ab7253dbb888aec4bb9b8bfe..ad0f99aacd6c77f7de2b963381f7db42bf7b1dbe 100644 (file)
@@ -217,7 +217,7 @@ code {
   @extend .code-base;
   display: inline;
   padding: 1px 3px;
-  white-space:pre;
+  white-space: pre-wrap;
   line-height: 1.2em;
   margin-bottom: 1.2em;
   color: #c54545;
index 30848c1dbec35bf16d9643f063db19ac5fa6e06f..264ddad371e7b6bbca80079c522aa5598a4505cd 100644 (file)
@@ -7,7 +7,7 @@ $max-width: 1400px;
 // Screen breakpoints
 $xl: 1100px;
 $ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
-$l: 1000px;
+$l: 992px;
 $m: 800px;
 $s: 600px;
 $xs: 400px;
index c9b7ce59724d115655ee693e2a4b3dee2447470b..04333fab728498a90ff76bcff111ed133203ae3c 100644 (file)
@@ -284,12 +284,12 @@ input[type=text] {
   img, video {
     border: 1px solid $primary;
     border-radius: 3px;
+    max-width: 100%;
   }
   video {
     cursor: pointer;
     margin: $-l auto;
     display: block;
-    max-width: 100%;
   }
 }
 
@@ -317,22 +317,28 @@ input[type=text] {
   border-right: 2px dotted #E5E5E5;
 }
 
-@include larger-than($xl) {
+.sidebar-inner {
+  display: none;
+}
+.sidebar-inner.mobile {
+  display: block;
+}
+
+
+@include larger-than($l) {
   .sidebar {
     position: sticky;
     top: $-m;
   }
-}
-
-@include smaller-than($m) {
-  .sidebar li a {
-    padding: $-xs 0;
+  .sidebar-inner {
     display: block;
   }
+  .sidebar-inner.mobile {
+    display: none;
+  }
 }
 
 
-
 h2.thin-margin {
   margin-top: 0;
 }