🎨
This commit is contained in:
parent
ebceffba1e
commit
17b6ab0ef0
1 changed files with 38 additions and 17 deletions
|
@ -24,24 +24,28 @@
|
|||
|
||||
<ui-card>
|
||||
<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
|
||||
<section v-for="emoji in emojis">
|
||||
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
|
||||
<ui-horizon-group inputs>
|
||||
<ui-input v-model="emoji.name">
|
||||
<span>{{ $t('add-emoji.name') }}</span>
|
||||
<section v-for="emoji in emojis" class="oryfrbft">
|
||||
<div>
|
||||
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
|
||||
</div>
|
||||
<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 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-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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</ui-card>
|
||||
</div>
|
||||
|
@ -150,4 +154,21 @@ export default Vue.extend({
|
|||
@media (min-width 500px)
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue