mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 16:07:33 +08:00
reduce dialog margins and make the action buttons always at the bottom of the dialog
This commit is contained in:
MaysWind
@@ -269,7 +269,7 @@ const chartOptions = computed<object>(() => {
|
||||
<style scoped>
|
||||
.account-balance-trends-chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 418px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<v-dialog class="date-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4">{{ title }}</h4>
|
||||
</div>
|
||||
<h4 class="text-h4">{{ title }}</h4>
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-6">
|
||||
<div class="text-body-1 text-wrap mt-2">
|
||||
<p v-if="hint">{{ hint }}</p>
|
||||
<span v-if="beginDateTime && endDateTime">
|
||||
<span>{{ beginDateTime }}</span>
|
||||
@@ -17,7 +15,7 @@
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
|
||||
<v-card-text class="w-100 d-flex justify-center">
|
||||
<date-time-picker :is-dark-mode="isDarkMode"
|
||||
:enable-time-picker="true"
|
||||
:vertical="true"
|
||||
@@ -26,8 +24,8 @@
|
||||
v-model="dateRange">
|
||||
</date-time-picker>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<v-dialog class="month-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4">{{ title }}</h4>
|
||||
</div>
|
||||
<h4 class="text-h4">{{ title }}</h4>
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-6">
|
||||
<div class="text-body-1 text-wrap mt-2">
|
||||
<p v-if="hint">{{ hint }}</p>
|
||||
<span v-if="beginDateTime && endDateTime">
|
||||
<span>{{ beginDateTime }}</span>
|
||||
@@ -17,7 +15,7 @@
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
|
||||
<v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
|
||||
<v-row class="match-height">
|
||||
<v-col cols="12" md="6">
|
||||
<month-picker :is-dark-mode="isDarkMode" v-model="dateRange[0]"></month-picker>
|
||||
@@ -27,8 +25,8 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center mt-2 gap-4">
|
||||
<v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,24 @@
|
||||
<template>
|
||||
<v-dialog class="month-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4">{{ title }}</h4>
|
||||
</div>
|
||||
<h4 class="text-h4">{{ title }}</h4>
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-6">
|
||||
<p v-if="hint">{{ hint }}</p>
|
||||
<div class="text-body-1 text-wrap mt-2" v-if="hint">
|
||||
<p>{{ hint }}</p>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
|
||||
<v-card-text class="w-100 d-flex justify-center">
|
||||
<v-row class="match-height">
|
||||
<v-col>
|
||||
<month-picker :is-dark-mode="isDarkMode" v-model="monthValue"></month-picker>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn :disabled="!monthValue" @click="confirm">{{ tt('OK') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="d-flex" :style="`min-width: ${minWidth}px`" v-if="minWidth"></div>
|
||||
<v-slide-group class="slide-group-with-stepper mb-10 hidden-xs" show-arrows>
|
||||
<v-slide-group class="slide-group-with-stepper mb-6 hidden-xs" show-arrows>
|
||||
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
|
||||
<div class="mx-1"
|
||||
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx), 'cursor-pointer': isClickable }"
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
<template>
|
||||
<v-dialog width="440" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-dialog width="420" v-model="showState">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4">{{ tt('Use on Mobile Device') }}</h4>
|
||||
</div>
|
||||
<h4 class="text-h4">{{ tt('Use on Mobile Device') }}</h4>
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-4">{{ tt('You can scan the QR code below on your mobile device.') }}</div>
|
||||
<div class="text-body-1 text-wrap mt-4">{{ tt('You can scan the QR code below on your mobile device.') }}</div>
|
||||
</template>
|
||||
<v-card-text class="mb-md-4">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<div class="w-100 d-flex justify-center">
|
||||
@@ -18,8 +16,8 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn :href="mobileVersionPath">{{ tt('Switch to Mobile Version') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ tt('Close') }}</v-btn>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user