mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 07:57:33 +08:00
Code Issues 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-01 00:45:48 +08:00
parent 96561ec2be
commit c8b3daa915
56 changed files with 525 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/DateTimeSelectionSheet.vue
+5 -17
View File
@@ -7,11 +7,12 @@
<f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" @click="confirm"></f7-link>
<f7-link :icon-f7="mode === 'time' ? 'calendar' : 'clock'" @click="switchMode"></f7-link>
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content class="padding-bottom">
<div class="block block-outline no-margin no-padding">
<div class="block no-margin no-padding">
<date-time-picker ref="datetimepicker"
datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
@@ -21,7 +22,7 @@
v-show="mode === 'date'">
</date-time-picker>
</div>
<div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
<div class="block no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
<div class="time-picker-container" ref="timePickerContainer">
<div class="picker picker-inline picker-3d">
<div class="picker-columns">
@@ -91,12 +92,6 @@
</div>
</div>
<input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
<div class="margin-top text-align-center">
<div class="display-flex padding-horizontal justify-content-space-between">
<div class="align-self-center">{{ displayTime }}</div>
<f7-button outline :text="tt(switchButtonTitle)" @click="switchMode"></f7-button>
</div>
</div>
</f7-page-content>
</f7-sheet>
</template>
@@ -116,10 +111,7 @@ import { NumeralSystem } from '@/core/numeral.ts';
import { isDefined } from '@/lib/common.ts';
import {
getHourIn12HourFormat,
getTimezoneOffsetMinutes,
getBrowserTimezoneOffsetMinutes,
getLocalDatetimeFromUnixTime,
getActualUnixTimeForStore,
getCurrentUnixTime,
getUnixTimeFromLocalDatetime,
getAMOrPM,
@@ -141,8 +133,7 @@ const emit = defineEmits<{
const {
tt,
getCurrentNumeralSystemType,
formatUnixTimeToLongDateTime
getCurrentNumeralSystemType
} = useI18n();
const { showToast } = useI18nUIComponents();
@@ -176,9 +167,6 @@ const timePickerItemHeight = ref<number | undefined>(undefined);
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3, isHourTwoDigits.value));
const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value));
const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value));