diff --git a/package-lock.json b/package-lock.json
index 4d779f6f9..1a5fef175 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2833,7 +2833,8 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
@@ -2844,7 +2845,8 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -2961,7 +2963,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -2973,6 +2976,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3119,6 +3123,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -3240,6 +3245,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 77ac35963..b35caae55 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -322,6 +322,9 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
width: 300px;
max-width: 100%;
}
+ &.flexible input {
+ width: 100%;
+ }
}
.outline > input {
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 7415be73f..5a89bf359 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -74,7 +74,6 @@ body.flexbox {
width: 100%;
}
}
-
@include smaller-than($m) {
.content-wrap.card {
padding: $-m $-l;
@@ -83,15 +82,11 @@ body.flexbox {
.tri-layout-container {
display: grid;
- grid-template-columns: 1fr minmax(auto, 940px) 1fr;
+ margin-left: $-xl;
+ margin-right: $-xl;
+ grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
- .tri-layout-right-contents, .tri-layout-left-contents {
- padding-right: 3vw;
- padding-left: 3vw;
- max-width: 460px;
- margin-left: auto;
- margin-right: auto;
- }
+ grid-column-gap: $-xxl;
.tri-layout-right {
grid-area: c;
}
@@ -100,6 +95,7 @@ body.flexbox {
}
.tri-layout-middle {
grid-area: b;
+ padding-top: $-m;
}
}
@include smaller-than($xxl) {
@@ -110,24 +106,29 @@ body.flexbox {
grid-template-rows: max-content min-content;
padding-right: $-l;
.content-wrap.card {
- padding: $-l $-l;
+ padding: $-l $-xl;
}
}
}
@include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
+ padding: $-m;
position: sticky;
top: $-m;
max-height: 100vh;
min-height: 50vh;
overflow-y: scroll;
- overflow-x: visible;
+ overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
+ .tri-layout-middle-contents {
+ max-width: 940px;
+ margin: 0 auto;
+ }
}
@include smaller-than($l) {
@@ -230,10 +231,14 @@ div[class^="col-"] img {
&.right-focus {
grid-template-columns: 1fr 2fr;
}
- &.large-gap {
+ &.gap-xl {
grid-column-gap: $-xl;
grid-row-gap: $-xl;
}
+ &.gap-xxl {
+ grid-column-gap: $-xxl;
+ grid-row-gap: $-xxl;
+ }
}
.grid-card {
@@ -296,7 +301,7 @@ div[class^="col-"] img {
.grid.half.collapse-xs {
grid-template-columns: 1fr 1fr;
}
- .grid.large-gap {
+ .grid.gap-xl {
grid-column-gap: $-m;
grid-row-gap: $-m;
}
diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index e8667e719..8452b0667 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -202,14 +202,11 @@ header .search-box {
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
+ opacity: 0.7;
.icon-list-item {
width: auto;
padding-top: $-xs;
padding-bottom: $-xs;
- &:not(:hover) {
- color: #666;
- fill: #888;
- }
}
.separator {
display: inline-block;
@@ -218,6 +215,9 @@ header .search-box {
line-height: 0.8;
margin: -2px 0 0;
}
+ &:hover {
+ opacity: 1;
+ }
}
.breadcrumb-listing {
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 8b7027ef2..74b0d9938 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -1,12 +1,18 @@
.book-contents .entity-list-item {
.icon {
- width: 30px;
- border-radius: 4px;
+ width: 4px;
+ border-radius: 1px;
justify-self: stretch;
align-self: stretch;
height: auto;
}
+ .icon:after {
+ opacity: 0.5;
+ }
+ .icon svg {
+ display: none;
+ }
p {
margin-bottom: 0;
}
@@ -24,9 +30,9 @@
width: 100%;
position: relative;
> .icon {
- width: 30px;
+ width: 4px;
height: auto;
- border-radius: 0 0 4px 4px;
+ border-radius: 0 0 1px 1px;
align-self: stretch;
flex-shrink: 0;
&:before {
@@ -37,8 +43,14 @@
height: 1px;
background-color: currentColor;
content: '';
- opacity: 0.2;
+ opacity: 0.5;
}
+ &:after {
+ opacity: 0.5;
+ }
+ }
+ .icon svg {
+ display: none;
}
> .content {
flex: 1;
@@ -50,7 +62,6 @@
.chapter-expansion-toggle:hover {
background-color: rgba(0, 0, 0, 0.06);
}
-
}
.entity-list-item.has-children {
@@ -368,9 +379,16 @@ ul.pagination {
}
&:not(.no-hover):hover {
text-decoration: none;
- background-color: #DDD;
+ background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
+ &.outline-hover {
+ border: 1px solid transparent;
+ }
+ &.outline-hover:hover {
+ background-color: transparent;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
}
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index f5d9e998f..900958812 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -16,7 +16,7 @@
@include('auth/forms/login/' . $authMethod)
</div>
- <div class="grid half collapse-xs large-gap v-center">
+ <div class="grid half collapse-xs gap-xl v-center">
<div class="text-left ml-xxs">
@include('components.custom-checkbox', [
'name' => 'remember',
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 1388472c2..615ade3df 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -26,7 +26,7 @@
@include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
</div>
- <div class="grid half collapse-xs large-gap v-center mt-m">
+ <div class="grid half collapse-xs gap-xl v-center mt-m">
<div class="text-small">
<a href="{{ baseUrl('/login') }}">Already have an account?</a>
</div>
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 3a4a2c192..654bb98e3 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -123,7 +123,7 @@
@endif
<div class="mb-xl">
- <form v-on:submit.prevent="searchBook" class="search-box">
+ <form v-on:submit.prevent="searchBook" class="search-box flexible">
<input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}">
<button type="submit">@icon('search')</button>
<button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button">@icon('close')</button>
diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php
index 771a68fcb..11a254861 100644
--- a/resources/views/books/sort.blade.php
+++ b/resources/views/books/sort.blade.php
@@ -16,7 +16,7 @@
]])
</div>
- <div class="grid left-focus large-gap">
+ <div class="grid left-focus gap-xl">
<div>
<div class="card content-wrap">
<h1 class="list-heading">{{ trans('entities.books_sort') }}</h1>
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index 397d75254..2e2cead89 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -132,7 +132,7 @@
@endif
<div class="mb-xl">
- <form @submit.prevent="searchBook" class="search-box">
+ <form @submit.prevent="searchBook" class="search-box flexible">
<input v-model="searchTerm" @change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}">
<button type="submit">@icon('search')</button>
<button v-if="searching" v-cloak class="text-neg" @click="clearSearch()" type="button">@icon('close')</button>
diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php
index bc7778fe5..3e1a173f7 100644
--- a/resources/views/common/home.blade.php
+++ b/resources/views/common/home.blade.php
@@ -7,7 +7,7 @@
<a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-muted">@icon('expand-text'){{ trans('common.toggle_details') }}</a>
</div>
- <div class="grid contained third large-gap" id="home-default">
+ <div class="grid contained third gap-xxl" id="home-default">
<div>
@if(count($draftPages) > 0)
<div id="recent-drafts" class="card mb-xl">
diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php
index bf77a402a..3d07e1338 100644
--- a/resources/views/partials/breadcrumbs.blade.php
+++ b/resources/views/partials/breadcrumbs.blade.php
@@ -3,7 +3,7 @@
{{--Show top level item--}}
@if (count($crumbs) > 0 && array_first($crumbs) instanceof \BookStack\Entities\Book)
- <a href="{{ baseUrl('/books') }}" class="icon-list-item">
+ <a href="{{ baseUrl('/books') }}" class="text-book icon-list-item outline-hover">
<span>@icon('books')</span>
<span>{{ trans('entities.books') }}</span>
</a>
@@ -25,7 +25,7 @@
{{ $crumb }}
</a>
@elseif (is_array($crumb))
- <a href="{{ baseUrl($key) }}" class="icon-list-item">
+ <a href="{{ baseUrl($key) }}" class="icon-list-item outline-hover">
<span>@icon($crumb['icon'])</span>
<span>{{ $crumb['text'] }}</span>
</a>
@@ -33,7 +33,7 @@
@if($breadcrumbCount > 0)
@include('partials.breadcrumb-listing', ['entity' => $crumb])
@endif
- <a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}} icon-list-item">
+ <a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}} icon-list-item outline-hover">
<span>@icon($crumb->getType())</span>
<span>
{{ $crumb->getShortName() }}
diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php
index 6a6c9d198..f7668b896 100644
--- a/resources/views/search/all.blade.php
+++ b/resources/views/search/all.blade.php
@@ -9,7 +9,7 @@
</div>
- <div class="grid right-focus reverse-collapse large-gap">
+ <div class="grid right-focus reverse-collapse gap-xl">
<div>
<div>
<h5>{{ trans('entities.search_filters') }}</h5>
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index d063539ea..cf043544e 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -21,7 +21,7 @@
<div class="setting-list">
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label for="setting-app-public" class="setting-list-label">{{ trans('settings.app_public_access') }}</label>
<p class="small">{!! trans('settings.app_public_access_desc') !!}</p>
@@ -40,7 +40,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.app_secure_images') }}</label>
<p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
@@ -54,7 +54,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.app_disable_comments') }}</label>
<p class="small">{!! trans('settings.app_disable_comments_desc') !!}</p>
@@ -84,7 +84,7 @@
<div class="setting-list">
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label for="setting-app-name" class="setting-list-label">{{ trans('settings.app_name') }}</label>
<p class="small">{{ trans('settings.app_name_desc') }}</p>
@@ -99,7 +99,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.app_editor') }}</label>
<p class="small">{{ trans('settings.app_editor_desc') }}</p>
@@ -112,7 +112,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.app_logo') }}</label>
<p class="small">{!! trans('settings.app_logo_desc') !!}</p>
@@ -131,7 +131,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
@@ -142,7 +142,7 @@
</div>
</div>
- <div homepage-control id="homepage-control" class="grid half large-gap">
+ <div homepage-control id="homepage-control" class="grid half gap-xl">
<div>
<label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
<p class="small">{{ trans('settings.app_homepage_desc') }}</p>
@@ -183,7 +183,7 @@
{!! csrf_field() !!}
<div class="setting-list">
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.reg_enable') }}</label>
<p class="small">{!! trans('settings.reg_enable_desc') !!}</p>
@@ -208,7 +208,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label for="setting-registration-restrict" class="setting-list-label">{{ trans('settings.reg_confirm_restrict_domain') }}</label>
<p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p>
@@ -218,7 +218,7 @@
</div>
</div>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label class="setting-list-label">{{ trans('settings.reg_email_confirmation') }}</label>
<p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
diff --git a/resources/views/settings/maintenance.blade.php b/resources/views/settings/maintenance.blade.php
index 6e408d1f4..f7f813f26 100644
--- a/resources/views/settings/maintenance.blade.php
+++ b/resources/views/settings/maintenance.blade.php
@@ -16,7 +16,7 @@
<div id="image-cleanup" class="card content-wrap auto-height">
<h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2>
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
</div>
diff --git a/resources/views/tri-layout.blade.php b/resources/views/tri-layout.blade.php
index 5f3d381df..bb734da8e 100644
--- a/resources/views/tri-layout.blade.php
+++ b/resources/views/tri-layout.blade.php
@@ -9,7 +9,7 @@
{{--</div>--}}
{{--TODO - Cleanup toolbar usage--}}
- <div class="tri-layout-container mt-m" tri-layout @yield('container-attrs') >
+ <div class="tri-layout-container" tri-layout @yield('container-attrs') >
<div class="tri-layout-left print-hidden pt-m" id="sidebar">
<div class="tri-layout-left-contents">
@@ -18,7 +18,9 @@
</div>
<div class="@yield('body-wrap-classes') tri-layout-middle">
- @yield('body')
+ <div class="tri-layout-middle-contents">
+ @yield('body')
+ </div>
</div>
<div class="tri-layout-right print-hidden pt-m">
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index e6e66665f..b9ad052c7 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -16,7 +16,7 @@
<div class="setting-list">
@include('users.form', ['model' => $user, 'authMethod' => $authMethod])
- <div class="grid half large-gap">
+ <div class="grid half gap-xl">
<div>
<label for="user-avatar" class="setting-list-label">{{ trans('settings.users_avatar') }}</label>
<p class="small">{{ trans('settings.users_avatar_desc') }}</p>
@@ -35,7 +35,7 @@
</div>
</div>
- <div class="grid half large-gap v-center">
+ <div class="grid half gap-xl v-center">
<div>
<label for="user-language" class="setting-list-label">{{ trans('settings.users_preferred_language') }}</label>
<p class="small">
diff --git a/resources/views/users/form.blade.php b/resources/views/users/form.blade.php
index 2459626f6..1e103ec70 100644
--- a/resources/views/users/form.blade.php
+++ b/resources/views/users/form.blade.php
@@ -11,7 +11,7 @@
@if($authMethod === 'ldap' || $authMethod === 'system')
<p class="small">{{ trans('settings.users_details_desc_no_email') }}</p>
@endif
- <div class="grid half mt-m large-gap">
+ <div class="grid half mt-m gap-xl">
<div>
<label for="name">{{ trans('auth.name') }}</label>
@include('form.text', ['name' => 'name'])
@@ -26,7 +26,7 @@
</div>
@if($authMethod === 'ldap' && userCan('users-manage'))
- <div class="grid half large-gap v-center">
+ <div class="grid half gap-xl v-center">
<div>
<label class="setting-list-label">{{ trans('settings.users_external_auth_id') }}</label>
<p class="small">{{ trans('settings.users_external_auth_id_desc') }}</p>
@@ -56,7 +56,7 @@
{{ trans('settings.users_password_warning') }}
</p>
@endif
- <div class="grid half mt-m large-gap">
+ <div class="grid half mt-m gap-xl">
<div>
<label for="password">{{ trans('auth.password') }}</label>
@include('form.password', ['name' => 'password'])