Fixed large content previews and improved mobile styles

Listing content previews no longer pre-wrap and instead simply break
correctly.
Updated titles to ensure they break on mobile devices.
Reduced spacing and font sizes on mobile to better adjust content to
screen size.

Fixes #739

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index a3c59495e8de355cea3fe3cf0f3d1e8ec18ad2e0..3dce271b8f75e2e545f8a1db03157359846a6677 100644 (file)
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -210,7 +210,7 @@ header .search-box {
 
 @include smaller-than($m) {
   .breadcrumbs .text-button, .action-buttons .text-button {
-    padding: $-s $-xs;
+    padding: $-xs $-xs;
   }
   .action-buttons .dropdown-container:last-child a {
     padding-left: $-xs;
@@ -218,6 +218,9 @@ header .search-box {
   .breadcrumbs .text-button {
     font-size: 0;
   }
+  .breadcrumbs .text-button svg {
+    font-size: $fs-m;
+  }
   .breadcrumbs a i {
     font-size: $fs-m;
     padding-right: 0;
@@ -225,6 +228,9 @@ header .search-box {
   .breadcrumbs span.sep {
     padding: 0 $-xxs;
   }
+  .toolbar .col-xs-1:first-child {
+    padding-right: 0;
+  }
 }
 
 .nav-tabs {

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 8d68965a9424eaec2220344bd93fd9ba2c6a190c..f4883384ad5f8ccd6939685ad2729c95f998300e 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -55,6 +55,12 @@
   }
 }
 
+@include smaller-than($s) {
+  .page-list h4 {
+    font-size: 1.333em;
+  }
+}
+
 .sidebar-page-nav {
   $nav-indent: $-s;
   list-style: none;

diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 12bcd621f81481bca067993e41bb86b564a9ebee..3504154c2e70bddd6eecf2aff051bf7a84ef2006 100644 (file)
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -61,6 +61,24 @@ h5, h6 {
   margin-bottom: 0.66em;
 }
 
+@include smaller-than($s) {
+  h1 {
+    font-size: 2.8275em;
+  }
+  h2 {
+    font-size: 2.333em;
+  }
+  h3 {
+    font-size: 1.666em;
+  }
+  h4 {
+    font-size: 1.333em;
+  }
+  h5 {
+    font-size: 1.161616em;
+  }
+}
+
 /*
  * Link styling
  */
@@ -374,8 +392,8 @@ li.checkbox-item, li.task-list-item {
 }
 
 .break-text {
-  white-space: pre-wrap;
   word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 /**

diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 611fc17272afcd827b945a2566b57ee993ba3443..bb5189187bbfb112fe031f0b3a033b334f27e00d 100644 (file)
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -91,8 +91,8 @@
 
 @section('body')
 
-    <div class="container small">
-        <h1>{{$book->name}}</h1>
+    <div class="container small nopad">
+        <h1 class="break-text" v-pre>{{$book->name}}</h1>
         <div class="book-content" v-show="!searching">
             <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
             @if(count($bookChildren) > 0)

diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index ef6987bb1b3189dbcbf6d77d723fa958f53311ea..62bff243b7b0c3d6e2995c49e8bf14fcc733e9f2 100644 (file)
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -96,8 +96,8 @@
 
 @section('body')
 
-    <div class="container small">
-        <h1 v-pre>{{ $chapter->name }}</h1>
+    <div class="container small nopad">
+        <h1 class="break-text" v-pre>{{ $chapter->name }}</h1>
         <div class="chapter-content" v-show="!searching">
             <p v-pre class="text-muted break-text">{!! nl2br(e($chapter->description)) !!}</p>
 

diff --git a/resources/views/pages/page-display.blade.php b/resources/views/pages/page-display.blade.php
index 2f70c747d490d37f25883b61d187c52c98eac0fc..7a6d6ae3c2d82ea5e3645edc55e456de94cc1522 100644 (file)
--- a/resources/views/pages/page-display.blade.php
+++ b/resources/views/pages/page-display.blade.php
@@ -1,6 +1,6 @@
 <div ng-non-bindable>
 
-    <h1 id="bkmrk-page-title">{{$page->name}}</h1>
+    <h1 class="break-text" v-pre id="bkmrk-page-title">{{$page->name}}</h1>
 
     <div style="clear:left;"></div>