From f1f6c484651b914ff73b3612bead977189541c9a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 20 Feb 2020 21:51:15 +0300
Subject: [PATCH] Add mobile UI for editing pack metadata and adding new emoji

---
 src/views/emojiPacks/components/EmojiPack.vue |  7 +--
 .../components/NewEmojiUploader.vue           | 60 +++++++++++--------
 src/views/emojiPacks/index.vue                | 22 +++----
 3 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index cde9dacd..e89f6788 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -223,9 +223,6 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
-.pack-button-container {
-  margin: 0 0 18px 120px;
-}
 .download-archive {
   width: 250px
 }
@@ -271,7 +268,9 @@ export default {
 .no-background .el-collapse-item__header {
   background: white;
 }
-
+.pack-button-container {
+  margin: 0 0 18px 120px;
+}
 .save-pack-button-container {
   margin-bottom: 8px;
   width: 265px;
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index 11e6785e..ca2b3c84 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-width="130px" label-position="left" size="small">
+  <el-form :label-position="isDesktop ? 'left' : 'top'" label-width="130px" size="small" class="new-emoji-uploader-form">
     <el-form-item :label="$t('emoji.shortcode')">
       <el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
     </el-form-item>
@@ -25,30 +25,6 @@
   </el-form>
 </template>
 
-<style>
-.add-new-emoji {
-  height: 36px;
-  font-size: 14px;
-  font-weight: 700;
-  color: #606266;
-}
-.text {
-  line-height: 20px;
-  margin-right: 15px
-}
-.upload-container {
-  display: flex;
-  align-items: baseline;
-}
-.upload-button {
-  margin-left: 10px;
-}
-.upload-file-url {
-  display: flex;
-  justify-content: space-between
-}
-</style>
-
 <script>
 export default {
   props: {
@@ -65,6 +41,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     shortcodePresent() {
       return this.shortcode.trim() === ''
     }
@@ -88,3 +67,34 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.add-new-emoji {
+  height: 36px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #606266;
+}
+.text {
+  line-height: 20px;
+  margin-right: 15px;
+}
+.upload-container {
+  display: flex;
+  align-items: baseline;
+}
+.upload-button {
+  margin-left: 10px;
+}
+.upload-file-url {
+  display: flex;
+  justify-content: space-between;
+}
+@media only screen and (max-width:480px) {
+  .new-emoji-uploader-form {
+    label.el-form-item__label {
+      padding: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 36010c24..c2b0b5df 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -175,15 +175,6 @@ export default {
 }
 
 @media only screen and (max-width:480px) {
-  .emoji-packs-header-button-container {
-    height: 82px;
-    flex-direction: column;
-    .el-button+.el-button {
-      margin: 10px 0 0 0;
-      width: fit-content;
-
-    }
-  }
   .create-pack {
     height: 82px;
     flex-direction: column;
@@ -195,14 +186,25 @@ export default {
     margin: 15px 0;
   }
   .emoji-packs-form {
-    margin: 0 10px;
+    margin: 0 7px;
     label {
       padding-right: 8px;
     }
+    .el-form-item {
+      margin-bottom: 15px;
+    }
   }
   .emoji-packs-header {
     margin: 15px;
   }
+  .emoji-packs-header-button-container {
+    height: 82px;
+    flex-direction: column;
+    .el-button+.el-button {
+      margin: 7px 0 0 0;
+      width: fit-content;
+    }
+  }
   .reload-emoji-button {
     width: fit-content;
   }