Cleaned up some existing tri-column views

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",

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 {

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;
   }

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 {

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);
+  }
 }
 
 

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',

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>

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>

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>

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>

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">

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() }}

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>

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>

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>

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,8 +18,10 @@
         </div>
 
         <div class="@yield('body-wrap-classes') tri-layout-middle">
+            <div class="tri-layout-middle-contents">
                 @yield('body')
             </div>
+        </div>
 
         <div class="tri-layout-right print-hidden pt-m">
             <div class="tri-layout-right-contents">

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">

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'])