From 39681bc48a5796622a70dd138ee1def0f55c48f6 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Sat, 13 Feb 2021 09:29:49 +0100
Subject: [PATCH] emoji ios styling for list

---
 .../js/components/FilesView/FolderIcon.vue    |  2 +-
 resources/js/components/Others/Emoji.vue      | 37 ++++++++++---------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/FilesView/FolderIcon.vue b/resources/js/components/FilesView/FolderIcon.vue
index b61f7743..0166b699 100644
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
-        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: `${folderColor}`}"/>
+        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: folderColor}"/>
     </div>
 </template>
 
diff --git a/resources/js/components/Others/Emoji.vue b/resources/js/components/Others/Emoji.vue
index 6998f408..1ae35c5d 100644
--- a/resources/js/components/Others/Emoji.vue
+++ b/resources/js/components/Others/Emoji.vue
@@ -1,39 +1,36 @@
 <template>
     <div>
-        <div v-if="transferEmoji && !isApple"  v-html="transferEmoji"/>
-        <span v-if="transferEmoji && isApple" class="apple-emoji">{{transferEmoji}}</span>
+        <span v-if="transferEmoji && !isApple" class="twemoji-emoji" v-html="transferEmoji"></span>
+        <span v-if="transferEmoji && isApple" class="apple-emoji">{{ transferEmoji }}</span>
     </div>
-    
 </template>
 
 <script>
 import twemoji from 'twemoji'
+
 export default {
     name: 'Emoji',
     props: ['emoji'],
     computed: {
-        transferEmoji () {
-            
+        transferEmoji() {
+
             // Transfer single emoji to twemoji
             let tweomjiParse = twemoji.parse(this.emoji.char, {
-                        folder: 'svg',
-                        ext: '.svg',
-                        attributes: () => ({
-                            loading: 'lazy',
-                        }) 
-                    }) 
+                folder: 'svg',
+                ext: '.svg',
+                attributes: () => ({
+                    loading: 'lazy'
+                })
+            })
 
             // Check the OS, if is OS not iOS return transfered emoji to twemoji
             return !this.isApple ? tweomjiParse : this.emoji.char
-        },
-    },
-    data () {
-        return {
-            isApple: false
         }
     },
-    created () {
-        this.isApple = this.$isApple()
+    data() {
+        return {
+            isApple: this.$isApple()
+        }
     }
 }
 </script>
@@ -42,6 +39,10 @@ export default {
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
+.apple-emoji {
+    font-size: 49px;
+    line-height: 1.2;
+}
 
 </style>