Align search behaviour in case of nothing found (#3152)
Signed-off-by: Florian Hotze <dev@florianhotze.com>pull/3153/head
parent
eaee49c9f6
commit
266f5dbbae
|
@ -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> 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 () {
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue