mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
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:
parent
8828adfc9c
commit
8b27ce3296
@ -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 {
|
||||
|
@ -55,6 +55,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.page-list h4 {
|
||||
font-size: 1.333em;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-page-nav {
|
||||
$nav-indent: $-s;
|
||||
list-style: none;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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)
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user