Skip to content
Snippets Groups Projects
Commit 0b5f3fb4 authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Implement Grid Layout for displaying emojis

parent 975afeb5
No related branches found
No related tags found
No related merge requests found
...@@ -7,8 +7,8 @@ ...@@ -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 { ...@@ -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;
......
...@@ -10,7 +10,7 @@ ...@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment