From 8b27ce32962fc70a2b46e8424c88595a9c5f1bae Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 18 Mar 2018 12:23:48 +0000
Subject: [PATCH] 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
---
 resources/assets/sass/_header.scss           |  8 +++++++-
 resources/assets/sass/_lists.scss            |  6 ++++++
 resources/assets/sass/_text.scss             | 20 +++++++++++++++++++-
 resources/views/books/show.blade.php         |  4 ++--
 resources/views/chapters/show.blade.php      |  4 ++--
 resources/views/pages/page-display.blade.php |  2 +-
 6 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index a3c59495e..3dce271b8 100644
--- 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 8d68965a9..f4883384a 100644
--- 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 12bcd621f..3504154c2 100644
--- 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 611fc1727..bb5189187 100644
--- 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 ef6987bb1..62bff243b 100644
--- 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 2f70c747d..7a6d6ae3c 100644
--- 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>