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

Signed-off-by: Florian Hotze <dev@florianhotze.com>
pull/3153/head
Florian Hotze 2025-04-15 19:09:12 +02:00 committed by GitHub
parent eaee49c9f6
commit 266f5dbbae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 30 deletions

View File

@ -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 () {

View File

@ -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 () {

View File

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