zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make the styling consistent across all pages of the mobile version

Browse Source
This commit is contained in:
MaysWind
2025-12-05 00:21:07 +08:00
parent e143c8f098
commit eccea273e6
14 changed files with 59 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/AIImageRecognitionSheet.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link icon-f7="xmark" :class="{ 'disabled': loading || recognizing }"
src/components/mobile/ColorSelectionSheet.vue
+1 -2
View File
@@ -2,12 +2,11 @@
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
:opened="show"
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right"></div>
</f7-toolbar>
<f7-page-content>
<f7-block class="margin-vertical no-padding">
src/components/mobile/DateSelectionSheet.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="date-selection-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link :text="tt('Clear')" @click="clear"></f7-link>
@@ -10,7 +10,7 @@
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content>
<f7-page-content class="margin-top">
<div class="block no-margin no-padding">
<date-time-picker datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
src/components/mobile/DateTimeSelectionSheet.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="date-time-selection-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
@@ -11,7 +11,7 @@
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content class="padding-bottom">
<f7-page-content class="margin-top">
<div class="block no-margin no-padding">
<date-time-picker ref="datetimepicker"
datetime-picker-class="justify-content-center"
src/components/mobile/FiscalYearStartSelectionSheet.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="fiscal-year-start-selection-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link :text="tt('Reset')" @click="reset"></f7-link>
@@ -10,7 +10,7 @@
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content>
<f7-page-content class="margin-top">
<div class="block no-margin no-padding">
<date-time-picker datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
src/components/mobile/IconSelectionSheet.vue
+1 -2
View File
@@ -2,12 +2,11 @@
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
:class="heightClass" :opened="show"
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right"></div>
</f7-toolbar>
<f7-page-content>
<f7-block class="margin-vertical no-padding">
src/components/mobile/ListItemSelectionPopup.vue
+18 -12
View File
@@ -5,7 +5,21 @@
<f7-nav-left>
<f7-link popup-close icon-f7="xmark"></f7-link>
</f7-nav-left>
<f7-nav-title :title="title" v-if="title"></f7-nav-title>
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
@input="filterContent = $event.target.value"
@click:clear="filterContent = ''; showSearchbar = false"
v-if="enableFilter && showSearchbar">
</f7-searchbar>
<f7-nav-title :title="title" v-if="title && !showSearchbar"></f7-nav-title>
<f7-nav-right v-if="enableFilter && !showSearchbar">
<f7-link icon-f7="search" @click="showSearchbar = true"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block class="no-margin no-padding">
@@ -32,16 +46,6 @@
:title="filterNoItemsText"></f7-list-item>
</f7-list>
</f7-block>
<f7-toolbar bottom>
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
v-if="enableFilter"
@input="filterContent = $event.target.value">
</f7-searchbar>
</f7-toolbar>
</f7-page>
</f7-popup>
</template>
@@ -86,6 +90,7 @@ const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
const currentValue = ref<unknown>(props.modelValue);
const filterContent = ref<string>('');
const showSearchbar = ref<boolean>(false);
const filteredItems = computed<unknown[]>(() => {
const finalItems: unknown[] = [];
@@ -181,12 +186,13 @@ function onItemClicked(item: unknown, index: number): void {
function onPopupOpen(event: { $el: Framework7Dom }): void {
currentValue.value = props.modelValue;
scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', true);
scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', false);
}
function onPopupClosed(): void {
close();
filterContent.value = '';
showSearchbar.value = false;
searchbar.value?.clear();
}
</script>
src/components/mobile/ListItemSelectionSheet.vue
+2 -3
View File
@@ -2,14 +2,13 @@
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
:class="heightClass" :opened="show"
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right"></div>
</f7-toolbar>
<f7-page-content>
<f7-page-content class="margin-top">
<f7-list dividers class="no-margin-vertical">
<f7-list-item link="#" no-chevron
:title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
src/components/mobile/MapSheet.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="map-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link icon-f7="minus" :class="{ 'disabled': !map?.allowZoomOut() }" @click="map?.zoomOut()"></f7-link>
src/components/mobile/ScheduleFrequencySheet.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
@@ -10,7 +10,7 @@
<f7-button round fill icon-f7="checkmark_alt" @click="save"></f7-button>
</div>
</f7-toolbar>
<f7-page-content>
<f7-page-content class="margin-top">
<div class="grid grid-cols-2 grid-gap">
<div>
<div class="schedule-frequency-type-container">
src/components/mobile/TransactionTagSelectionSheet.vue
+9 -9
View File
@@ -2,19 +2,11 @@
<f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show"
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right">
<f7-button round fill icon-f7="checkmark_alt" @click="save"
v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
<f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
</div>
</f7-toolbar>
<f7-page-content :class="heightClass">
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="tt('Find tag')"
@@ -23,6 +15,14 @@
@input="filterContent = $event.target.value"
@focus="onSearchBarFocus">
</f7-searchbar>
<div class="right">
<f7-button round fill icon-f7="checkmark_alt" @click="save"
v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
<f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
</div>
</f7-toolbar>
<f7-page-content :class="'margin-top ' + heightClass">
<f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
<f7-list-item :title="tt('No available tag')"></f7-list-item>
</f7-list>
src/components/mobile/TreeViewSelectionSheet.vue
+5 -2
View File
@@ -1,9 +1,12 @@
<template>
<f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<f7-searchbar ref="searchbar" class="margin-top" custom-searchs
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
src/components/mobile/TwoColumnListItemSelectionSheet.vue
+5 -2
View File
@@ -1,9 +1,12 @@
<template>
<f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<f7-toolbar class="toolbar-with-swipe-handler">
<div class="swipe-handler"></div>
<f7-searchbar ref="searchbar" class="margin-top" custom-searchs
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
src/styles/mobile/global.scss
+8
View File
@@ -621,6 +621,14 @@ html[dir="rtl"] .icon.las .badge.right-bottom-icon {
background: #666
}
.toolbar-with-swipe-handler > .toolbar-inner {
> div.left,
> div.right,
> form.searchbar {
margin-top: var(--f7-typography-margin) !important;
}
}
/** list-item-with-multi-item for framework7 **/
.list-item-with-multi-item .item-content,
.list-item-with-multi-item .item-inner {