🎨
This commit is contained in:
parent
ebceffba1e
commit
17b6ab0ef0
1 changed files with 38 additions and 17 deletions
|
@ -24,9 +24,12 @@
|
||||||
|
|
||||||
<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">
|
||||||
|
<div>
|
||||||
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
|
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
|
||||||
<ui-horizon-group inputs>
|
</div>
|
||||||
|
<div>
|
||||||
|
<ui-horizon-group>
|
||||||
<ui-input v-model="emoji.name">
|
<ui-input v-model="emoji.name">
|
||||||
<span>{{ $t('add-emoji.name') }}</span>
|
<span>{{ $t('add-emoji.name') }}</span>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
|
@ -42,6 +45,7 @@
|
||||||
<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
|
<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-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
|
|
Loading…
Reference in a new issue