refs #251 Fix design of notification setting

This commit is contained in:
AkiraFukushima 2018-09-21 00:49:17 +09:00
parent 460841892f
commit c58a5a74e8
2 changed files with 51 additions and 62 deletions

View File

@ -108,12 +108,12 @@
},
"notification": {
"title": "Notification",
"notify": {
"title": "Notify",
"reply": "Reply:",
"reblog": "Reblog:",
"favourite": "Favourite:",
"follow": "Follow:"
"enable": {
"description": "Please set notification event.",
"reply": "Notify me when I receive reply",
"reblog": "Notify me when I receive reblog",
"favourite": "Notify me when I receive favourite",
"follow": "Notify me when I receive follow"
}
},
"account": {

View File

@ -1,48 +1,44 @@
<template>
<div id="notification">
<h2>{{ $t('preferences.notification.title') }}</h2>
<div class="notify">
<h3>{{ $t('preferences.notification.notify.title') }}</h3>
<table class="notification">
<tbody>
<tr>
<td class="title">{{ $t('preferences.notification.notify.reply') }}</td>
<td class="status">
<el-switch
v-model="notifyReply"
active-color="#13ce66">
</el-switch>
</td>
</tr>
<tr>
<td class="title">{{ $t('preferences.notification.notify.reblog') }}</td>
<td class="status">
<el-switch
v-model="notifyReblog"
active-color="#13ce66">
</el-switch>
</td>
</tr>
<tr>
<td class="title">{{ $t('preferences.notification.notify.favourite') }}</td>
<td class="status">
<el-switch
v-model="notifyFavourite"
active-color="#13ce66">
</el-switch>
</td>
</tr>
<tr>
<td class="title">{{ $t('preferences.notification.notify.follow') }}</td>
<td class="status">
<el-switch
v-model="notifyFollow"
active-color="#13ce66">
</el-switch>
</td>
</tr>
</tbody>
</table>
<div class="enable">
<p class="description">{{ $t('preferences.notification.enable.description') }}</p>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyReply"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.reply') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyReblog"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.reblog') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyFavourite"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.favourite') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyFollow"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.follow') }}</span>
</div>
</div>
</div>
</template>
@ -106,23 +102,16 @@ export default {
<style lang="scss" scoped>
#notification {
.notify {
table {
width: 100%;
}
.description {
margin: 24px 0 20px;
}
td {
padding: 16px 0;
}
.selection {
margin: 12px 0;
.title {
text-align: right;
width: 50%;
}
.status {
width: 50%;
text-align: center;
margin-left: 12px;
font-weight: 800;
}
}
}