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] 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">