eris/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement Grid Layout for displaying emojis

Browse source
This commit is contained in:
Angelina Filippova 2020-01-30 15:26:53 +03:00
parent 975afeb5c7
commit 0b5f3fb4b1
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/views/emojiPacks/components/SingleEmojiEditor.vue
View file

@ -7,8 +7,8 @@
<el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/> <el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
<el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/> <el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
<div class="emoji-buttons"> <div class="emoji-buttons">
<el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button> <el-button type="primary" @click="update">{{ $t('settings.update') }}</el-button>
<el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button> <el-button @click="remove">{{ $t('settings.remove') }}</el-button>
</div> </div>
</div> </div>
@ -155,23 +155,23 @@ export default {
.copy-popover { .copy-popover {
width: 330px width: 330px
} }
.emoji-button {
margin-left: 10px
}
.emoji-buttons { .emoji-buttons {
min-width: 210px place-self: center;
min-width: 200px
} }
.emoji-container { .emoji-container {
display: flex; display: grid;
grid-template-columns: 7% 35% 35% 20%;
justify-content: space-between; justify-content: space-between;
align-items: center; grid-column-gap: 1%;
margin-bottom: 10px; margin-bottom: 10px;
} }
.emoji-preview-img { .emoji-preview-img {
max-width: 5em; max-width: 100%;
place-self: center;
} }
.emoji-info { .emoji-info {
margin-left: 10px place-self: center;
} }
.copy-to-local-button { .copy-to-local-button {
margin-top: 12px; margin-top: 12px;

2
src/views/emojiPacks/index.vue
View file

@ -10,7 +10,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="line"/> <div class="line"/>
<el-form label-width="230px" class="emoji-packs-form"> <el-form label-width="200px" class="emoji-packs-form">
<el-form-item :label="$t('settings.localPacks')"> <el-form-item :label="$t('settings.localPacks')">
<el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button> <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
</el-form-item> </el-form-item>