From 8abf2758e1e040621fb5812f9db0dc92ecbf9837 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 19 Feb 2020 20:09:11 +0300
Subject: [PATCH 1/9] Fix the address used when listing remote packs

---
 src/store/modules/emojiPacks.js                       | 8 +++++---
 src/views/emojiPacks/components/SingleEmojiEditor.vue | 5 ++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/emojiPacks.js b/src/store/modules/emojiPacks.js
index c118b71f..282a069e 100644
--- a/src/store/modules/emojiPacks.js
+++ b/src/store/modules/emojiPacks.js
@@ -16,24 +16,25 @@ import Vue from 'vue'
 const packs = {
   state: {
     localPacks: {},
+    remoteInstance: '',
     remotePacks: {}
   },
   mutations: {
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
+    SET_REMOTE_INSTANCE: (state, name) => {
+      state.remoteInstance = name
+    },
     SET_REMOTE_PACKS: (state, packs) => {
       state.remotePacks = packs
     },
-
     UPDATE_LOCAL_PACK_VAL: (state, { name, key, value }) => {
       Vue.set(state.localPacks[name]['pack'], key, value)
     },
-
     UPDATE_LOCAL_PACK_PACK: (state, { name, pack }) => {
       state.localPacks[name]['pack'] = pack
     },
-
     UPDATE_LOCAL_PACK_FILES: (state, { name, files }) => {
       // Use vue.set in case "files" was null
       Vue.set(
@@ -105,6 +106,7 @@ const packs = {
     async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
       const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
 
+      commit('SET_REMOTE_INSTANCE', remoteInstance)
       commit('SET_REMOTE_PACKS', data)
     },
     async UpdateAndSavePackFile({ commit, getters }, args) {
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 3c28e8c0..2bfb4b8b 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -14,7 +14,7 @@
 
     <div v-if="!isLocal" class="emoji-container">
       <img
-        :src="addressOfEmojiInPack(host, packName, file)"
+        :src="addressOfEmojiInPack(remoteInstance, packName, file)"
         class="emoji-preview-img">
       <el-input :value="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
       <el-input :value="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
@@ -95,6 +95,9 @@ export default {
     },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
+    },
+    remoteInstance() {
+      return this.$store.state.emojiPacks.remoteInstance
     }
   },
   methods: {

From 8f183d07b6f99bb78dfc02c72417fda7918bce23 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 19 Feb 2020 20:36:50 +0300
Subject: [PATCH 2/9] Fix styles for listing remote emoji

---
 .../emojiPacks/components/SingleEmojiEditor.vue     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 2bfb4b8b..acc89b14 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -18,9 +18,9 @@
         class="emoji-preview-img">
       <el-input :value="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
       <el-input :value="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
-      <el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover">
+      <el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover" class="copy-pack-container">
         <p>{{ $t('emoji.selectLocalPack') }}</p>
-        <el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')">
+        <el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')" class="copy-pack-select">
           <el-option
             v-for="(_pack, name) in localPacks"
             :key="name"
@@ -34,7 +34,6 @@
         <el-button
           :disabled="!copyToLocalPackName"
           type="primary"
-          class="copy-to-local-button"
           @click="copyToLocal">{{ $t('emoji.copy') }}</el-button>
         <el-button slot="reference" type="primary" class="emoji-button">{{ $t('emoji.copyToLocalPack') }}</el-button>
       </el-popover>
@@ -175,8 +174,10 @@ export default {
 .emoji-info {
   place-self: center;
 }
-.copy-to-local-button {
-  margin-top: 12px;
-  float: right;
+.copy-pack-container {
+  place-self: center stretch;
+}
+.copy-pack-select {
+  width: 100%;
 }
 </style>

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 3/9] 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>

From c3fedbf8814e0e378fbd91cd74ab6cc79503fef4 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 20 Feb 2020 15:50:59 +0300
Subject: [PATCH 4/9] Fix button styles on emoji tab

---
 src/lang/en.js                                |  2 +-
 src/views/emojiPacks/components/EmojiPack.vue | 71 ++++++++++++++++---
 src/views/emojiPacks/index.vue                | 21 +++---
 3 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 3f9643ca..95bc021e 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -416,7 +416,7 @@ export default {
     shortcode: 'Shortcode',
     fallbackSrc: 'Fallback source',
     fallbackSrcSha: 'Fallback source SHA',
-    savePackMetadata: 'Save pack metadata',
+    saveMetadata: 'Save metadata',
     deletePack: 'Delete pack',
     downloadPack: 'Download pack',
     downloadPackArchive: 'Download pack archive',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 3a8bf97a..cde9dacd 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form v-if="isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
+    <el-form v-if="isLocal" :label-width="isDesktop ? '120px' : '90px'" label-position="left" size="small" class="emoji-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" />
       </el-form-item>
@@ -21,11 +21,13 @@
         :label=" $t('emoji.fallbackSrcSha')">
         {{ pack.pack["fallback-src-sha256"] }}
       </el-form-item>
-      <el-form-item class="save-pack-button">
-        <el-button type="primary" @click="savePackMetadata">{{ $t('emoji.savePackMetadata') }}</el-button>
-        <el-button @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
-      </el-form-item>
-      <el-form-item>
+    </el-form>
+    <div class="pack-button-container">
+      <div class="save-pack-button-container">
+        <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button>
+        <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
+      </div>
+      <div class="download-pack-button-container">
         <el-link
           v-if="pack.pack['can-download']"
           :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
@@ -34,8 +36,8 @@
           target="_blank">
           <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
         </el-link>
-      </el-form-item>
-    </el-form>
+      </div>
+    </div>
     <el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" disabled />
@@ -132,6 +134,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -218,9 +223,24 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
+.pack-button-container {
+  margin: 0 0 18px 120px;
+}
 .download-archive {
   width: 250px
 }
+.download-pack-button-container {
+  width: 265px;
+  .el-link {
+    width: inherit;
+    span {
+      width: inherit;
+      .download-archive {
+        width: inherit;
+      }
+    }
+  }
+}
 .download-shared-pack {
   display: flex;
   margin-bottom: 10px;
@@ -251,7 +271,38 @@ export default {
 .no-background .el-collapse-item__header {
   background: white;
 }
-.save-pack-button {
-  margin-bottom: 5px
+
+.save-pack-button-container {
+  margin-bottom: 8px;
+  width: 265px;
+  display: flex;
+  justify-content: space-between;
+}
+@media only screen and (max-width:480px) {
+  .delete-pack-button {
+    width: 45%;
+  }
+  .download-pack-button-container {
+    width: 100%;
+  }
+  .pack-button-container {
+    width: 100%;
+    margin: 0 0 22px 0;
+  }
+  .save-pack-button {
+    width: 54%;
+  }
+  .save-pack-button-container {
+    margin-bottom: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    button {
+      padding: 10px 5px;
+    }
+    .el-button+.el-button {
+      margin-left: 3px;
+    }
+  }
 }
 </style>
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 40a20284..36010c24 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="emoji-packs">
     <h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
-    <div class="button-container">
+    <div class="emoji-packs-header-button-container">
       <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">
@@ -76,7 +76,7 @@ export default {
     },
     labelWidth() {
       if (this.isMobile) {
-        return '110px'
+        return '105px'
       } else if (this.isTablet) {
         return '200px'
       } else {
@@ -140,7 +140,7 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
-.button-container {
+.emoji-packs-header-button-container {
   display: flex;
   margin: 0 0 22px 15px;
 }
@@ -175,9 +175,14 @@ export default {
 }
 
 @media only screen and (max-width:480px) {
-  .button-container {
+  .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;
@@ -191,17 +196,15 @@ export default {
   }
   .emoji-packs-form {
     margin: 0 10px;
+    label {
+      padding-right: 8px;
+    }
   }
   .emoji-packs-header {
     margin: 15px;
   }
-  .import-pack-button {
-    margin: 10px 0 0 0;
-    width: fit-content;
-  }
   .reload-emoji-button {
     width: fit-content;
   }
-
 }
 </style>

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 5/9] 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;
   }

From 8802fc3f4f1b5b4228e968a1a2f676d7b36bf740 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 20 Feb 2020 22:53:17 +0300
Subject: [PATCH 6/9] Mobile UI for managing existing emoji

---
 .../components/SingleEmojiEditor.vue          | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index acc89b14..419b4f9e 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="isLocal" class="emoji-container">
+    <div v-if="isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
       <img
         :src="addressOfEmojiInPack(host, packName, file)"
         class="emoji-preview-img">
@@ -92,6 +92,9 @@ export default {
       },
       set(val) { this.newFile = val }
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
     },
@@ -153,7 +156,7 @@ export default {
 }
 </script>
 
-<style>
+<style rel='stylesheet/scss' lang='scss'>
 .copy-popover {
   width: 330px
 }
@@ -161,7 +164,7 @@ export default {
   place-self: center;
   min-width: 200px
 }
-.emoji-container {
+.emoji-container-grid {
   display: grid;
   grid-template-columns: 75px auto auto 195px;
   grid-column-gap: 15px;
@@ -180,4 +183,30 @@ export default {
 .copy-pack-select {
   width: 100%;
 }
+@media only screen and (max-width:480px) {
+  .emoji-container-flex {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #dcdfe6;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    border-radius: 4px;
+    padding: 15px;
+    margin: 0 15px 15px 0;
+  }
+  .emoji-preview-img {
+    margin-bottom: 10px;
+  }
+  .emoji-info {
+    margin-bottom: 10px;
+  }
+  .emoji-buttons {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    button {
+      padding: 10px 5px;
+      width: 47%;
+    }
+  }
+}
 </style>

From dbc5726e8cc4fb087863f0461a202af02591e47b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 20 Feb 2020 23:29:28 +0300
Subject: [PATCH 7/9] Mobile UI for remote packs

---
 src/lang/en.js                                       |  1 +
 src/views/emojiPacks/components/EmojiPack.vue        | 12 ++++++++++--
 .../emojiPacks/components/SingleEmojiEditor.vue      |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 95bc021e..d0728e07 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -428,6 +428,7 @@ export default {
     willBeUsable: 'It will then be usable and shareable from the current instance',
     downloadAsOptional: 'Download as (optional)',
     downloadSharedPack: 'Download shared pack to current instance',
+    downloadSharedPackMobile: 'Download pack to instance',
     optional: 'optional',
     uploadFile: 'Upload a file',
     url: 'URL',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index e89f6788..4a57c505 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -22,7 +22,7 @@
         {{ pack.pack["fallback-src-sha256"] }}
       </el-form-item>
     </el-form>
-    <div class="pack-button-container">
+    <div v-if="isLocal" class="pack-button-container">
       <div class="save-pack-button-container">
         <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button>
         <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
@@ -93,7 +93,7 @@
         <div class="download-shared-pack">
           <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
           <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
-            {{ $t('emoji.downloadSharedPack') }}
+            {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
           </el-button>
         </div>
       </el-collapse-item>
@@ -284,6 +284,14 @@ export default {
   .download-pack-button-container {
     width: 100%;
   }
+  .download-shared-pack {
+    flex-direction: column;
+  }
+  .download-shared-pack-button {
+    margin-left: 0;
+    margin-top: 10px;
+    padding: 10px;
+  }
   .pack-button-container {
     width: 100%;
     margin: 0 0 22px 0;
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 419b4f9e..83e859b9 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <div v-if="!isLocal" class="emoji-container">
+    <div v-if="!isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
       <img
         :src="addressOfEmojiInPack(remoteInstance, packName, file)"
         class="emoji-preview-img">

From f9b4543aa18643c54400992f033852abb2124446 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 20 Feb 2020 23:57:35 +0300
Subject: [PATCH 8/9] Fix message width for messages

---
 src/views/emojiPacks/index.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index c2b0b5df..44630160 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -185,6 +185,12 @@ export default {
   .divider {
     margin: 15px 0;
   }
+  .el-message {
+    min-width: 80%;
+  }
+  .el-message-box {
+    width: 80%;
+  }
   .emoji-packs-form {
     margin: 0 7px;
     label {

From 26c8c5e95a8af051b03c4179e46dd10d61c393ee Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 21 Feb 2020 19:41:36 +0300
Subject: [PATCH 9/9] Tablet UI

---
 src/views/emojiPacks/components/EmojiPack.vue | 26 +++++++++++++++--
 .../components/NewEmojiUploader.vue           |  2 +-
 .../components/SingleEmojiEditor.vue          | 28 ++++++++++++++++---
 src/views/emojiPacks/index.vue                |  2 +-
 4 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 4a57c505..e20dc216 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form v-if="isLocal" :label-width="isDesktop ? '120px' : '90px'" label-position="left" size="small" class="emoji-pack-metadata">
+    <el-form v-if="isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" />
       </el-form-item>
@@ -38,7 +38,7 @@
         </el-link>
       </div>
     </div>
-    <el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
+    <el-form v-if="!isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" disabled />
       </el-form-item>
@@ -106,7 +106,6 @@ import SingleEmojiEditor from './SingleEmojiEditor.vue'
 import NewEmojiUploader from './NewEmojiUploader.vue'
 
 export default {
-
   components: { SingleEmojiEditor, NewEmojiUploader },
   props: {
     name: {
@@ -137,6 +136,21 @@ export default {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '90px'
+      } else if (this.isTablet) {
+        return '120px'
+      } else {
+        return '120px'
+      }
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -296,6 +310,12 @@ export default {
     width: 100%;
     margin: 0 0 22px 0;
   }
+  .remote-pack-metadata {
+    .el-form-item__content {
+      line-height: 24px;
+      margin-top: 4px;
+    }
+  }
   .save-pack-button {
     width: 54%;
   }
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index ca2b3c84..8bb431a2 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form :label-position="isDesktop ? 'left' : 'top'" label-width="130px" size="small" class="new-emoji-uploader-form">
+  <el-form :label-position="isMobile ? 'top' : 'left'" 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>
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 83e859b9..d66bd48d 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
+    <div v-if="isLocal" :class="isMobile ? 'emoji-container-flex' : 'emoji-container-grid'">
       <img
         :src="addressOfEmojiInPack(host, packName, file)"
         class="emoji-preview-img">
@@ -8,11 +8,11 @@
       <el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
       <div class="emoji-buttons">
         <el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
-        <el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
+        <el-button class="remove-emoji-button" @click="remove">{{ $t('emoji.remove') }}</el-button>
       </div>
     </div>
 
-    <div v-if="!isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
+    <div v-if="!isLocal" :class="isMobile ? 'emoji-container-flex' : 'remote-emoji-container-grid'">
       <img
         :src="addressOfEmojiInPack(remoteInstance, packName, file)"
         class="emoji-preview-img">
@@ -166,7 +166,7 @@ export default {
 }
 .emoji-container-grid {
   display: grid;
-  grid-template-columns: 75px auto auto 195px;
+  grid-template-columns: 75px auto auto 200px;
   grid-column-gap: 15px;
   margin-bottom: 10px;
 }
@@ -183,6 +183,12 @@ export default {
 .copy-pack-select {
   width: 100%;
 }
+.remote-emoji-container-grid {
+  display: grid;
+  grid-template-columns: 75px auto auto 160px;
+  grid-column-gap: 15px;
+  margin-bottom: 10px;
+}
 @media only screen and (max-width:480px) {
   .emoji-container-flex {
     display: flex;
@@ -209,4 +215,18 @@ export default {
     }
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .emoji-container-grid {
+    grid-column-gap: 10px;
+  }
+  .emoji-buttons {
+    .el-button+.el-button {
+      margin-left: 5px;
+    }
+  }
+  .remote-emoji-container-grid {
+    grid-column-gap: 10px;
+  }
+}
 </style>
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 44630160..e13df39a 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -78,7 +78,7 @@ export default {
       if (this.isMobile) {
         return '105px'
       } else if (this.isTablet) {
-        return '200px'
+        return '180px'
       } else {
         return '240px'
       }