refactor: flexing dashboard search

bedita · Mar 14, 2024 · cfb893f · cfb893f
1 parent 4e70bfe
commit cfb893f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/templates/Pages/Dashboard/_dashboard.scss b/templates/Pages/Dashboard/_dashboard.scss
@@ -96,14 +96,18 @@ body.view-dashboard {
         }
 
 
-        nav[role="search"] {
+        div[role="search"] {
             display: flex;
-            @media (min-width: 568px) { width: 22 * $gutter + $gutter; }
+            gap: $gutter * 2;
+            // @media (min-width: 568px) { width: 22 * $gutter + $gutter; }
             input {
                 margin-right: $gutter * .5;
                 flex-grow: 1;
             }
         }
+        div[role="search"] > * {
+            white-space: nowrap;
+        }
 
         .dashboard-section > .list-objects {
             display: table;

diff --git a/templates/Pages/Dashboard/index.twig b/templates/Pages/Dashboard/index.twig
@@ -63,21 +63,20 @@
                 <h2>{{ __('Search') }}</h2>
             </header>
 
-            <nav role="search">
-                <input type="text" v-model="searchString" v-on:keydown.stop="captureKeys">
-                <button ref="searchSubmit" :disabled="!searchString || searchString.length < 3" v-on:click="searchObjects">
-                    <app-icon icon="carbon:search"></app-icon>
-                    {{ __('Search') }}
-                </button>
-            </nav>
-        </section>
-
-        <section class="dashboard-section">
-            <div>
-                <input type="text" placeholder="{{ __('ID or uname') }}" v-model="searchId">
-                <button @click.prevent="goToID()" :disabled="!searchId">
-                    {{ __('ID') }}
-                </button>
+            <div role="search">
+                <div role="textsearch">
+                    <input type="text" v-model="searchString" v-on:keydown.stop="captureKeys">
+                    <button ref="searchSubmit" :disabled="!searchString || searchString.length < 3" v-on:click="searchObjects">
+                        <app-icon icon="carbon:search"></app-icon>
+                        {{ __('Search') }}
+                    </button>
+                </div>
+                <div role="idsearch">
+                    <input type="text" placeholder="{{ __('ID or uname') }}" v-model="searchId">
+                    <button @click.prevent="goToID()" :disabled="!searchId">
+                        {{ __('ID') }}
+                    </button>
+                </div>
             </div>
         </section>
 

diff --git a/templates/Pages/Login/login.twig b/templates/Pages/Login/login.twig
@@ -56,7 +56,7 @@
             <span class="ml-05">{{ __('Sign in') }}</span>
         </button>
 
-        <p class="mt-025">{{ Html.link(__('Forgot your password?'), {'_name': 'password:reset'})|raw }}</p>
+        <p class="mt-1">{{ Html.link(__('Forgot your password?'), {'_name': 'password:reset'})|raw }}</p>
 
 
         {# Temp hidden to check session id #}