mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 19:56:05 +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) {
|
@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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -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)
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user