From 2d0421106af316c09882c10d2ee481330ac8f501 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 19 Feb 2020 22:03:28 +0300
Subject: [PATCH] Add mobile UI for emoji section

---
 src/views/emojiPacks/index.vue | 41 +++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 19e0702d..40a20284 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -2,8 +2,8 @@
   <div class="emoji-packs">
     <h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
     <div class="button-container">
-      <el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
-      <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom">
+      <el-button type="primary" class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
+      <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" class="import-pack-button">
         <el-button type="primary" @click="importFromFS">
           {{ $t('emoji.importPacks') }}
         </el-button>
@@ -76,7 +76,7 @@ export default {
     },
     labelWidth() {
       if (this.isMobile) {
-        return '120px'
+        return '110px'
       } else if (this.isTablet) {
         return '200px'
       } else {
@@ -141,6 +141,7 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss'>
 .button-container {
+  display: flex;
   margin: 0 0 22px 15px;
 }
 .create-pack {
@@ -156,6 +157,9 @@ export default {
 .emoji-packs-header {
   margin: 22px 0 20px 15px;
 }
+.import-pack-button {
+  margin-left: 10px;
+}
 .line {
     width: 100%;
     height: 0;
@@ -169,4 +173,35 @@ export default {
     margin: auto;
   }
 }
+
+@media only screen and (max-width:480px) {
+  .button-container {
+    height: 82px;
+    flex-direction: column;
+  }
+  .create-pack {
+    height: 82px;
+    flex-direction: column;
+  }
+  .create-pack-button {
+    margin-left: 0;
+  }
+  .divider {
+    margin: 15px 0;
+  }
+  .emoji-packs-form {
+    margin: 0 10px;
+  }
+  .emoji-packs-header {
+    margin: 15px;
+  }
+  .import-pack-button {
+    margin: 10px 0 0 0;
+    width: fit-content;
+  }
+  .reload-emoji-button {
+    width: fit-content;
+  }
+
+}
 </style>