code refactor

This commit is contained in:
MaysWind
2020-11-10 23:22:19 +08:00
parent df790f8aa5
commit e2145b8c6e
5 changed files with 43 additions and 81 deletions
+8
View File
@@ -54,6 +54,14 @@ body {
word-break: break-all;
}
.full-line {
width: 100%;
}
.icon-after-text {
margin-left: 6px;
}
.lab-list-item-error-info div.item-footer {
color: var(--f7-input-error-text-color)
}
+20 -12
View File
@@ -9,11 +9,25 @@
</f7-list>
<f7-toolbar tabbar labels bottom>
<f7-link href="/transaction/details" class="lab-toolbar-link-with-icon" icon-f7="square_list" :text="$t('Details')"></f7-link>
<f7-link href="/account/list" class="lab-toolbar-link-with-icon" icon-f7="creditcard" :text="$t('Accounts')"></f7-link>
<f7-link href="/transaction/new" class="lab-toolbar-icon-only" icon-f7="plus_square" icon-size="42px"></f7-link>
<f7-link href="/statistic/overview" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" :text="$t('Statistics')"></f7-link>
<f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" :text="$t('Settings')"></f7-link>
<f7-link href="/transaction/details">
<f7-icon f7="square_list"></f7-icon>
<span class="tabbar-label">{{ $t('Details') }}</span>
</f7-link>
<f7-link href="/account/list">
<f7-icon f7="creditcard"></f7-icon>
<span class="tabbar-label">{{ $t('Accounts') }}</span>
</f7-link>
<f7-link href="/transaction/new">
<f7-icon f7="plus_square" size="42px" class="lab-tarbar-big-icon"></f7-icon>
</f7-link>
<f7-link href="/statistic/overview">
<f7-icon f7="chart_pie"></f7-icon>
<span class="tabbar-label">{{ $t('Statistics') }}</span>
</f7-link>
<f7-link href="/settings">
<f7-icon f7="gear_alt"></f7-icon>
<span class="tabbar-label">{{ $t('Settings') }}</span>
</f7-link>
</f7-toolbar>
</f7-page>
</template>
@@ -23,13 +37,7 @@ export default {}
</script>
<style>
.lab-toolbar-link-with-icon i+span {
font-size: 11px;
margin-top: 3px;
margin-left: 0;
}
.lab-toolbar-icon-only i {
.lab-tarbar-big-icon {
margin-top: 7px;
margin-left: 0;
}
+1 -8
View File
@@ -61,7 +61,7 @@
<div style="font-size: 18px"><b v-t="'Two-Factor Authentication'"></b></div>
</div>
<div class="padding-horizontal padding-bottom">
<f7-list no-hairlines class="twofa-auth-form">
<f7-list no-hairlines class="no-margin-top margin-bottom">
<f7-list-input
type="number"
outline
@@ -278,10 +278,3 @@ export default {
}
};
</script>
<style scoped>
.twofa-auth-form {
margin-top: 0;
margin-bottom: 10px;
}
</style>
+12 -48
View File
@@ -27,11 +27,13 @@
<div style="font-size: 18px"><b v-t="'Passcode'"></b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="input-passcode-tips">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
<div class="input-passcode-qrcode-container">
<img class="input-passcode-qrcode-img" :src="new2FAQRCode" />
<p class="no-margin-top margin-bottom-half">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
<div class="row">
<div class="col-100 text-align-center">
<img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
</div>
</div>
<f7-list no-hairlines class="input-passcode-form">
<f7-list no-hairlines class="no-margin-top margin-bottom">
<f7-list-input
type="number"
outline
@@ -58,8 +60,8 @@
<div style="font-size: 18px"><b v-t="'Current Password'"></b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="input-password-tips">{{ $t('Please enter your current password when disable two factor authentication') }}</p>
<f7-list no-hairlines class="input-password-form">
<p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when disable two factor authentication') }}</p>
<f7-list no-hairlines class="no-margin-top margin-bottom">
<f7-list-input
type="password"
outline
@@ -86,8 +88,8 @@
<div style="font-size: 18px"><b v-t="'Current Password'"></b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="input-password-tips">{{ $t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}</p>
<f7-list no-hairlines class="input-password-form">
<p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}</p>
<f7-list no-hairlines class="no-margin-top margin-bottom">
<f7-list-input
type="password"
outline
@@ -114,12 +116,12 @@
<div style="font-size: 18px"><b v-t="'Backup Code'"></b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="input-password-tips">
<p class="no-margin-top margin-bottom-half">
<span>{{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}</span>
<f7-link icon-only icon-f7="doc_on_doc" icon-size="16px" class="icon-after-text"
v-clipboard:copy="currentBackupCode" v-clipboard:success="onBackupCodeCopied"></f7-link>
</p>
<textarea class="backup-code-textarea" rows="10" readonly="readonly" v-model="currentBackupCode"></textarea>
<textarea class="full-line" rows="10" readonly="readonly" v-model="currentBackupCode"></textarea>
<div class="margin-top text-align-center">
<f7-link @click="showBackupCodeSheet = false" :text="$t('Close')"></f7-link>
</div>
@@ -343,41 +345,3 @@ export default {
}
};
</script>
<style scoped>
.input-passcode-tips {
margin-top: 0;
}
.input-passcode-qrcode-container {
width: 100%;
text-align: center;
}
.input-passcode-qrcode-img {
width: 240px;
height: 240px;
}
.input-passcode-form {
margin-top: 0;
margin-bottom: 10px;
}
.input-password-tips {
margin-top: 0;
}
.input-password-tips .icon-after-text {
margin-left: 6px;
}
.input-password-form {
margin-top: 0;
margin-bottom: 10px;
}
.backup-code-textarea {
width: 100%;
}
</style>
+2 -13
View File
@@ -72,8 +72,8 @@
<div style="font-size: 18px"><b v-t="'Current Password'"></b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="input-password-tips">{{ $t('Please enter your current password when modifying your password') }}</p>
<f7-list no-hairlines class="input-password-form">
<p class="no-margin-top">{{ $t('Please enter your current password when modifying your password') }}</p>
<f7-list no-hairlines class="no-margin-top margin-bottom">
<f7-list-input
type="password"
outline
@@ -255,14 +255,3 @@ export default {
}
};
</script>
<style scoped>
.input-password-tips {
margin-top: 0;
}
.input-password-form {
margin-top: 0;
margin-bottom: 10px;
}
</style>