Align search behaviour in case of nothing found (#3152)

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue

@@ -39,12 +39,8 @@
       :scroll-list="true"
       :label="true" />
 
-    <f7-list class="searchbar-not-found">
-      <f7-list-item title="Nothing found" />
-    </f7-list>
-
-    <!-- skeleton for not ready -->
     <f7-block class="block-narrow">
+      <!-- skeleton for not ready -->
       <f7-col v-if="!ready">
         <f7-block-title>&nbsp;Loading...</f7-block-title>
         <f7-list v-if="!ready" contacts-list class="col wide pages-list">
@@ -64,11 +60,11 @@
         </f7-list>
       </f7-col>
 
-      <f7-col v-else>
+      <f7-col v-show="ready">
         <f7-block-title class="searchbar-hide-on-search">
           {{ pages.length }} pages
         </f7-block-title>
-        <div class="searchbar-found padding-left padding-right" v-show="!ready || pages.length > 0">
+        <div class="padding-left padding-right" v-show="!ready || pages.length > 0">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
               Alphabetical
@@ -79,8 +75,11 @@
           </f7-segmented>
         </div>
 
+        <f7-list class="searchbar-not-found">
+          <f7-list-item title="Nothing found" />
+        </f7-list>
         <f7-list v-show="pages.length > 0"
-                 class="searchbar-found col pages-list"
+                 class="col pages-list"
                  ref="pagesList"
                  :contacts-list="groupBy === 'alphabetical'" media-list>
           <f7-list-group v-for="(pagesWithInitial, initial) in indexedPages" :key="initial">
@@ -146,13 +145,6 @@
   </f7-page>
 </template>
 
-<style lang="stylus">
-.searchbar-found
-  @media (min-width 960px)
-    padding-left 0 !important
-    padding-right 0 !important
-</style>
-
 <script>
 export default {
   data () {

bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue

@@ -84,7 +84,7 @@
       </f7-col>
 
       <f7-col v-else-if="things.length > 0">
-        <div class="searchbar-found padding-left padding-right">
+        <div class="padding-left padding-right">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
               Alphabetical
@@ -97,7 +97,10 @@
             </f7-button>
           </f7-segmented>
         </div>
-        <f7-list class="searchbar-found col things-list" :contacts-list="groupBy === 'alphabetical'">
+        <f7-list v-if="filteredThings.length === 0">
+          <f7-list-item title="Nothing found" />
+        </f7-list>
+        <f7-list v-else class="col things-list" :contacts-list="groupBy === 'alphabetical'">
           <f7-list-group v-for="(thingsWithInitial, initial) in indexedThings" :key="initial">
             <f7-list-item v-if="thingsWithInitial.length" :title="initial" group-title />
             <f7-list-item
@@ -155,11 +158,6 @@
 <style lang="stylus">
 .things-list
   margin-bottom calc(var(--f7-fab-size) + 2 * calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom)))
-
-.searchbar-found
-  @media (min-width 960px)
-    padding-left 0 !important
-    padding-right 0 !important
 </style>
 
 <script>
@@ -188,9 +186,6 @@ export default {
       showNoLocation: false,
       eventSource: null
     }
-  },
-  created () {
-
   },
   computed: {
     indexedThings () {

bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue

@@ -39,10 +39,6 @@
       :scroll-list="true"
       :label="true" />
 
-    <f7-list class="searchbar-not-found">
-      <f7-list-item title="Nothing found" />
-    </f7-list>
-
     <f7-block class="block-narrow">
       <!-- skeleton for not ready -->
       <f7-col v-if="!ready">
@@ -61,8 +57,10 @@
         </f7-list>
       </f7-col>
 
-      <f7-col v-else-if="transformations.length > 0">
+      <f7-col v-show="transformations.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
+          <span>{{ transformations.length }} <template v-if="searchQuery">of {{ transformations.length }} </template>Things<template v-if="searchQuery"> found</template></span>
+
           {{ transformations.length }} transformations
         </f7-block-title>
         <div class="searchbar-found padding-left padding-right">
@@ -76,6 +74,9 @@
           </f7-segmented>
         </div>
 
+        <f7-list class="searchbar-not-found">
+          <f7-list-item title="Nothing found" />
+        </f7-list>
         <f7-list
           class="searchbar-found col transformations-list"
           ref="transformationsList"