From 0b5f3fb4b1bf3126a2dc6fdd763577f74997af34 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 30 Jan 2020 15:26:53 +0300
Subject: [PATCH] Implement Grid Layout for displaying emojis

---
 .../components/SingleEmojiEditor.vue          | 20 +++++++++----------
 src/views/emojiPacks/index.vue                |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 39df6bf8..a52a5a67 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -7,8 +7,8 @@
       <el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
       <el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
       <div class="emoji-buttons">
-        <el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button>
-        <el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button>
+        <el-button type="primary" @click="update">{{ $t('settings.update') }}</el-button>
+        <el-button @click="remove">{{ $t('settings.remove') }}</el-button>
       </div>
     </div>
 
@@ -155,23 +155,23 @@ export default {
 .copy-popover {
   width: 330px
 }
-.emoji-button {
-  margin-left: 10px
-}
 .emoji-buttons {
-  min-width: 210px
+  place-self: center;
+  min-width: 200px
 }
 .emoji-container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 7% 35% 35% 20%;
   justify-content: space-between;
-  align-items: center;
+  grid-column-gap: 1%;
   margin-bottom: 10px;
 }
 .emoji-preview-img {
-  max-width: 5em;
+  max-width: 100%;
+  place-self: center;
 }
 .emoji-info {
-  margin-left: 10px
+  place-self: center;
 }
 .copy-to-local-button {
   margin-top: 12px;
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 6d0d8292..c6a2e261 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -10,7 +10,7 @@
       </el-tooltip>
     </div>
     <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-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
       </el-form-item>