Improved input size consistency

Specifically updates dropdown search and user-search implementation,
although does affect all inputs.
Decouples breadcrum and select-style dropdown search toggles.

Addresses #2678

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 0d21fbc0a7bb682f07d311f11f02abc936ceefa7..e30492b6bd6e5cf9c1a87fc9cbc9c2c5a0c3b45a 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -731,6 +731,55 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
+
+.dropdown-search {
+  position: relative;
+}
+.dropdown-search-toggle-breadcrumb {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  line-height: normal;
+  padding: $-xs;
+  &:hover {
+    border-color: #DDD;
+  }
+  .svg-icon {
+    margin-inline-end: 0;
+  }
+}
+.dropdown-search-toggle-select {
+  display: flex;
+  gap: $-s;
+  line-height: normal;
+  .svg-icon {
+    height: 16px;
+    margin: 0;
+  }
+  .avatar {
+    height: 22px;
+    width: 22px;
+  }
+  .avatar + span {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dropdown-search-toggle-caret {
+    font-size: 1.15rem;
+  }
+}
+.dropdown-search-toggle-select-label {
+  min-width: 0;
+  white-space: nowrap;
+}
+.dropdown-search-toggle-select-caret {
+  font-size: 1.5rem;
+  line-height: 0;
+  margin-left: auto;
+  margin-top: -2px;
+}
+
 .dropdown-search-dropdown {
   box-shadow: $bs-med;
   overflow: hidden;
@@ -789,10 +838,4 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   .dropdown-search-dropdown .dropdown-search-list {
     max-height: 240px;
   }
-}
-
-.custom-select-input {
-  max-width: 280px;
-  border: 1px solid #D4D4D4;
-  border-radius: 3px;
 }
\ No newline at end of file

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 665b1213be8ba5a4401b3449c801f0c627d5c207..f639709fc142bde94ae2738b6d7766399bd27bf7 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -7,7 +7,8 @@
   @include lightDark(color, #666, #AAA);
   display: inline-block;
   font-size: $fs-m;
-  padding: $-xs*1.5;
+  padding: $-xs*1.8;
+  height: 40px;
   width: 250px;
   max-width: 100%;
 
@@ -373,6 +374,7 @@ input[type=color] {
     max-width: 840px;
     margin: 0 auto;
     border: none;
+    height: auto;
   }
 }
 
@@ -413,9 +415,11 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   }
   input {
     display: block;
+    padding: $-xs * 1.5;
     padding-inline-start: $-l + 4px;
     width: 300px;
     max-width: 100%;
+    height: auto;
   }
   &.flexible input {
     width: 100%;

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index f070f5a187428eedc0a2af37688733efa1af4a28..d5a24a0be85c43006e6c301ed7a93062f8ceb200 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -86,6 +86,8 @@ header .search-box {
     border-radius: 40px;
     color: #EEE;
     z-index: 2;
+    height: auto;
+    padding: $-xs*1.5;
     padding-inline-start: 40px;
     &:focus {
       outline: none;
@@ -279,29 +281,6 @@ header .search-box {
   }
 }
 
-.dropdown-search {
-  position: relative;
-  .dropdown-search-toggle {
-    padding: $-xs;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    &:hover {
-      border-color: #DDD;
-    }
-  }
-  .svg-icon {
-    margin-inline-end: 0;
-  }
-}
-
-.dropdown-search-toggle.compact {
-  padding: $-xxs $-xs;
-  .avatar {
-    height: 22px;
-    width: 22px;
-  }
-}
-
 .faded {
   a, button, span, span > div {
     color: #666;

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 375f36d0f5ca4ad66c5b354e92750fa9fbdf07e9..14a37dd4a2465777572e7787695d69ac690f1e26 100644 (file)
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -155,6 +155,13 @@ body.flexbox {
   }
 }
 
+.gap-m {
+  gap: $-m;
+}
+
+.justify-flex-start {
+  justify-content: flex-start;
+}
 .justify-flex-end {
   justify-content: flex-end;
 }

diff --git a/resources/views/entities/breadcrumb-listing.blade.php b/resources/views/entities/breadcrumb-listing.blade.php
index d038de0779596b15205fc432526c15763c7491cb..1efe3ba34ca97253220f2502facc222fb513bfc5 100644 (file)
--- a/resources/views/entities/breadcrumb-listing.blade.php
+++ b/resources/views/entities/breadcrumb-listing.blade.php
@@ -2,7 +2,7 @@
      option:dropdown-search:url="/search/entity/siblings?entity_type={{$entity->getType()}}&entity_id={{ $entity->id }}"
      option:dropdown-search:local-search-selector=".entity-list-item"
 >
-    <div class="dropdown-search-toggle" refs="dropdown@toggle"
+    <div class="dropdown-search-toggle-breadcrumb" refs="dropdown@toggle"
          aria-haspopup="true" aria-expanded="false" tabindex="0">
         <div class="separator">@icon('chevron-right')</div>
     </div>

diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php
index ed04bc04124c9c0302568b8b4135390ce1314289..206955fe94864021f23bac4b07082a6f0a09e362 100644 (file)
--- a/resources/views/form/entity-permissions.blade.php
+++ b/resources/views/form/entity-permissions.blade.php
@@ -15,7 +15,7 @@
         <div>
             <div class="form-group">
                 <label for="owner">{{ trans('entities.permissions_owner') }}</label>
-                @include('form.user-select', ['user' => $model->ownedBy, 'name' => 'owned_by', 'compact' => false])
+                @include('form.user-select', ['user' => $model->ownedBy, 'name' => 'owned_by'])
             </div>
         </div>
     </div>

diff --git a/resources/views/form/user-select.blade.php b/resources/views/form/user-select.blade.php
index 8823bb0750b5fdb014cae14bf0dcf1ca630ce46f..743795a6daa3b4451bd268d40abfe75d5ada5a12 100644 (file)
--- a/resources/views/form/user-select.blade.php
+++ b/resources/views/form/user-select.blade.php
@@ -1,19 +1,19 @@
-<div class="dropdown-search custom-select-input" components="dropdown dropdown-search user-select"
+<div class="dropdown-search" components="dropdown dropdown-search user-select"
      option:dropdown-search:url="/search/users/select"
 >
     <input refs="user-select@input" type="hidden" name="{{ $name }}" value="{{ $user->id ?? '' }}">
     <div refs="dropdown@toggle"
-         class="dropdown-search-toggle {{ $compact ? 'compact' : '' }} flex-container-row items-center"
+         class="dropdown-search-toggle-select  input-base"
          aria-haspopup="true" aria-expanded="false" tabindex="0">
-        <div refs="user-select@user-info" class="flex-container-row items-center px-s">
+        <div refs="user-select@user-info" class="dropdown-search-toggle-select-label flex-container-row items-center">
             @if($user)
-                <img class="avatar small mr-m" src="{{ $user->getAvatar($compact ? 22 : 30) }}" alt="{{ $user->name }}">
+                <img class="avatar small mr-m" src="{{ $user->getAvatar(30) }}" width="30" height="30" alt="{{ $user->name }}">
                 <span>{{ $user->name }}</span>
             @else
                 <span>{{ trans('settings.users_none_selected') }}</span>
             @endif
         </div>
-        <span style="font-size: {{ $compact ? '1.15rem' : '1.5rem' }}; margin-left: auto;">
+        <span class="dropdown-search-toggle-select-caret">
             @icon('caret-down')
         </span>
     </div>

diff --git a/resources/views/settings/audit.blade.php b/resources/views/settings/audit.blade.php
index 506a735a2c59552825334a2d4729bbc73831fb4d..b856d11502a5dd05fe7bf1879012afc04528c53a 100644 (file)
--- a/resources/views/settings/audit.blade.php
+++ b/resources/views/settings/audit.blade.php
@@ -9,8 +9,9 @@
         <h1 class="list-heading">{{ trans('settings.audit') }}</h1>
         <p class="text-muted">{{ trans('settings.audit_desc') }}</p>
 
-        <div class="flex-container-row">
-            <div component="dropdown" class="list-sort-type dropdown-container mr-m">
+        <form action="{{ url('/settings/audit') }}" method="get" class="flex-container-row wrap justify-flex-start gap-m">
+
+            <div component="dropdown" class="list-sort-type dropdown-container">
                 <label for="">{{ trans('settings.audit_event_filter') }}</label>
                 <button refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" class="input-base text-left">{{ $listDetails['event'] ?: trans('settings.audit_event_filter_no_filter') }}</button>
                 <ul refs="dropdown@menu" class="dropdown-menu">
@@ -21,37 +22,35 @@
                 </ul>
             </div>
 
-            <form action="{{ url('/settings/audit') }}" method="get" class="flex-container-row mr-m">
-                @if(!empty($listDetails['event']))
-                    <input type="hidden" name="event" value="{{ $listDetails['event'] }}">
-                @endif
-
-                @foreach(['date_from', 'date_to'] as $filterKey)
-                    <div class="mr-m">
-                        <label for="audit_filter_{{ $filterKey }}">{{ trans('settings.audit_' . $filterKey) }}</label>
-                        <input id="audit_filter_{{ $filterKey }}"
-                               component="submit-on-change"
-                               type="date"
-                               name="{{ $filterKey }}"
-                               value="{{ $listDetails[$filterKey] ?? '' }}">
-                    </div>
-                @endforeach
+            @if(!empty($listDetails['event']))
+                <input type="hidden" name="event" value="{{ $listDetails['event'] }}">
+            @endif
 
-                <div class="form-group ml-auto mr-m"
-                     component="submit-on-change"
-                     option:submit-on-change:filter='[name="user"]'>
-                    <label for="owner">{{ trans('settings.audit_table_user') }}</label>
-                    @include('form.user-select', ['user' => $listDetails['user'] ? \BookStack\Auth\User::query()->find($listDetails['user']) : null, 'name' => 'user', 'compact' =>  true])
+            @foreach(['date_from', 'date_to'] as $filterKey)
+                <div class=>
+                    <label for="audit_filter_{{ $filterKey }}">{{ trans('settings.audit_' . $filterKey) }}</label>
+                    <input id="audit_filter_{{ $filterKey }}"
+                           component="submit-on-change"
+                           type="date"
+                           name="{{ $filterKey }}"
+                           value="{{ $listDetails[$filterKey] ?? '' }}">
                 </div>
+            @endforeach
 
+            <div class="form-group"
+                 component="submit-on-change"
+                 option:submit-on-change:filter='[name="user"]'>
+                <label for="owner">{{ trans('settings.audit_table_user') }}</label>
+                @include('form.user-select', ['user' => $listDetails['user'] ? \BookStack\Auth\User::query()->find($listDetails['user']) : null, 'name' => 'user'])
+            </div>
 
-                <div class="form-group ml-auto">
-                    <label for="ip">{{ trans('settings.audit_table_ip') }}</label>
-                    @include('form.text', ['name' => 'ip', 'model' => (object) $listDetails])
-                    <input type="submit" style="display: none">
-                </div>
-            </form>
-        </div>
+
+            <div class="form-group">
+                <label for="ip">{{ trans('settings.audit_table_ip') }}</label>
+                @include('form.text', ['name' => 'ip', 'model' => (object) $listDetails])
+                <input type="submit" style="display: none">
+            </div>
+        </form>
 
         <hr class="mt-l mb-s">
 

diff --git a/resources/views/users/delete.blade.php b/resources/views/users/delete.blade.php
index 9ee5d4c056280c2aa78813247551be6672cf75cd..b18c182ebde971b6016d47836d333ad0a2b8fc6f 100644 (file)
--- a/resources/views/users/delete.blade.php
+++ b/resources/views/users/delete.blade.php
@@ -19,7 +19,7 @@
                         <p class="small">{{ trans('settings.users_migrate_ownership_desc') }}</p>
                     </div>
                     <div>
-                        @include('form.user-select', ['name' => 'new_owner_id', 'user' => null, 'compact' => false])
+                        @include('form.user-select', ['name' => 'new_owner_id', 'user' => null])
                     </div>
                 </div>
             @endif