Updated settings nav to be more flexible

Uses flexbox layout, flexed to content instead of rigid thirds like
before. Also extracted row into own file

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index cf2a1630e48b1de1eab30c008176463859dc5c32..519cb27ad7787f31199276fbe821d87334a76603 100644 (file)
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -124,6 +124,9 @@ body.flexbox {
 .flex-container-row {
   display: flex;
   flex-direction: row;
+  &.v-center {
+    align-items: center;
+  }
 }
 
 .flex-container-column {
@@ -131,9 +134,17 @@ body.flexbox {
   flex-direction: column;
 }
 
+.flex-container-column.wrap, .flex-container-row.wrap {
+  flex-wrap: wrap;
+}
+
 .flex {
   min-height: 0;
   flex: 1;
+  &.fit-content {
+    flex-basis: auto;
+    flex-grow: 0;
+  }
 }
 
 .justify-flex-end {

diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index b688d96469a7df900be90cc1587f20192aec3478..8adc1045b46d15a8744e15f06d54b3992d07a3e6 100644 (file)
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -3,16 +3,7 @@
 @section('body')
     <div class="container small">
 
-        <div class="grid left-focus v-center no-row-gap">
-            <div class="py-m">
-                @include('settings.navbar', ['selected' => 'settings'])
-            </div>
-            <div class="text-right p-m">
-                <a target="_blank" rel="noopener noreferrer" href="https://github.com/BookStackApp/BookStack/releases">
-                    BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
-                </a>
-            </div>
-        </div>
+        @include('settings.navbar-with-version', ['selected' => 'settings'])
 
         <div class="card content-wrap auto-height">
             <h2 id="features" class="list-heading">{{ trans('settings.app_features_security') }}</h2>

diff --git a/resources/views/settings/maintenance.blade.php b/resources/views/settings/maintenance.blade.php
index 7311bbbe20c96ab7ea15fe5d48ed817985a358e8..35686ca3307e0f27a268987cc2fbad708d411071 100644 (file)
--- a/resources/views/settings/maintenance.blade.php
+++ b/resources/views/settings/maintenance.blade.php
@@ -3,16 +3,7 @@
 @section('body')
 <div class="container small">
 
-    <div class="grid left-focus v-center no-row-gap">
-        <div class="py-m">
-            @include('settings.navbar', ['selected' => 'maintenance'])
-        </div>
-        <div class="text-right p-m">
-            <a target="_blank" rel="noopener noreferrer" href="https://github.com/BookStackApp/BookStack/releases">
-            BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
-            </a>
-        </div>
-    </div>
+    @include('settings.navbar-with-version', ['selected' => 'maintenance'])
 
     <div id="image-cleanup" class="card content-wrap auto-height">
         <h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2>

diff --git a/resources/views/settings/navbar-with-version.blade.php b/resources/views/settings/navbar-with-version.blade.php
new file mode 100644 (file)
index 0000000..c02c370
--- /dev/null
+++ b/resources/views/settings/navbar-with-version.blade.php
@@ -0,0 +1,15 @@
+{{--
+$selected - String name of the selected tab
+$version - Version of bookstack to display
+--}}
+<div class="flex-container-row v-center wrap">
+    <div class="py-m flex fit-content">
+        @include('settings.navbar', ['selected' => $selected])
+    </div>
+    <div class="flex"></div>
+    <div class="text-right p-m flex fit-content">
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/BookStackApp/BookStack/releases">
+            BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
+        </a>
+    </div>
+</div>
\ No newline at end of file