This commit is contained in:
syuilo 2018-12-15 16:48:28 +09:00
parent ebceffba1e
commit 17b6ab0ef0
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
1 changed files with 38 additions and 17 deletions

View File

@ -24,24 +24,28 @@
<ui-card> <ui-card>
<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div> <div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
<section v-for="emoji in emojis"> <section v-for="emoji in emojis" class="oryfrbft">
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/> <div>
<ui-horizon-group inputs> <img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
<ui-input v-model="emoji.name"> </div>
<span>{{ $t('add-emoji.name') }}</span> <div>
<ui-horizon-group>
<ui-input v-model="emoji.name">
<span>{{ $t('add-emoji.name') }}</span>
</ui-input>
<ui-input v-model="emoji.aliases">
<span>{{ $t('add-emoji.aliases') }}</span>
</ui-input>
</ui-horizon-group>
<ui-input v-model="emoji.url">
<i slot="icon"><fa icon="link"/></i>
<span>{{ $t('add-emoji.url') }}</span>
</ui-input> </ui-input>
<ui-input v-model="emoji.aliases"> <ui-horizon-group class="fit-bottom">
<span>{{ $t('add-emoji.aliases') }}</span> <ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
</ui-input> <ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
</ui-horizon-group> </ui-horizon-group>
<ui-input v-model="emoji.url"> </div>
<i slot="icon"><fa icon="link"/></i>
<span>{{ $t('add-emoji.url') }}</span>
</ui-input>
<ui-horizon-group class="fit-bottom">
<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
</ui-horizon-group>
</section> </section>
</ui-card> </ui-card>
</div> </div>
@ -150,4 +154,21 @@ export default Vue.extend({
@media (min-width 500px) @media (min-width 500px)
padding 16px padding 16px
.oryfrbft
@media (min-width 500px)
display flex
> div:first-child
@media (max-width 500px)
padding-bottom 16px
> img
vertical-align bottom
> div:last-child
flex 1
@media (min-width 500px)
padding-left 16px
</style> </style>