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
This commit is contained in:
Dan Brown 2018-03-18 12:23:48 +00:00
parent 8828adfc9c
commit 8b27ce3296
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 37 additions and 7 deletions

View File

@ -210,7 +210,7 @@ header .search-box {
@include smaller-than($m) { @include smaller-than($m) {
.breadcrumbs .text-button, .action-buttons .text-button { .breadcrumbs .text-button, .action-buttons .text-button {
padding: $-s $-xs; padding: $-xs $-xs;
} }
.action-buttons .dropdown-container:last-child a { .action-buttons .dropdown-container:last-child a {
padding-left: $-xs; padding-left: $-xs;
@ -218,6 +218,9 @@ header .search-box {
.breadcrumbs .text-button { .breadcrumbs .text-button {
font-size: 0; font-size: 0;
} }
.breadcrumbs .text-button svg {
font-size: $fs-m;
}
.breadcrumbs a i { .breadcrumbs a i {
font-size: $fs-m; font-size: $fs-m;
padding-right: 0; padding-right: 0;
@ -225,6 +228,9 @@ header .search-box {
.breadcrumbs span.sep { .breadcrumbs span.sep {
padding: 0 $-xxs; padding: 0 $-xxs;
} }
.toolbar .col-xs-1:first-child {
padding-right: 0;
}
} }
.nav-tabs { .nav-tabs {

View File

@ -55,6 +55,12 @@
} }
} }
@include smaller-than($s) {
.page-list h4 {
font-size: 1.333em;
}
}
.sidebar-page-nav { .sidebar-page-nav {
$nav-indent: $-s; $nav-indent: $-s;
list-style: none; list-style: none;

View File

@ -61,6 +61,24 @@ h5, h6 {
margin-bottom: 0.66em; 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 * Link styling
*/ */
@ -374,8 +392,8 @@ li.checkbox-item, li.task-list-item {
} }
.break-text { .break-text {
white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word;
} }
/** /**

View File

@ -91,8 +91,8 @@
@section('body') @section('body')
<div class="container small"> <div class="container small nopad">
<h1>{{$book->name}}</h1> <h1 class="break-text" v-pre>{{$book->name}}</h1>
<div class="book-content" v-show="!searching"> <div class="book-content" v-show="!searching">
<p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p> <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
@if(count($bookChildren) > 0) @if(count($bookChildren) > 0)

View File

@ -96,8 +96,8 @@
@section('body') @section('body')
<div class="container small"> <div class="container small nopad">
<h1 v-pre>{{ $chapter->name }}</h1> <h1 class="break-text" v-pre>{{ $chapter->name }}</h1>
<div class="chapter-content" v-show="!searching"> <div class="chapter-content" v-show="!searching">
<p v-pre class="text-muted break-text">{!! nl2br(e($chapter->description)) !!}</p> <p v-pre class="text-muted break-text">{!! nl2br(e($chapter->description)) !!}</p>

View File

@ -1,6 +1,6 @@
<div ng-non-bindable> <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> <div style="clear:left;"></div>