From 378ae98cb48142bcec01806743b828954f487749 Mon Sep 17 00:00:00 2001
From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com>
Date: Mon, 14 Aug 2023 13:16:45 +0100
Subject: [PATCH] fix: Mobile view of activity actions - meed-2275 (#2716)

This change allows to hide the activity actions label when mobile view
---
 .../activity/footer/actions/ActivityCommentAction.vue      | 4 ++--
 .../activity/footer/actions/ActivityLikeAction.vue         | 7 +++++--
 .../activity/footer/actions/ActivityShareAction.vue        | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue
index 98c28b56322..338582cb761 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue
@@ -17,10 +17,10 @@
             <v-icon
               :class="commentColorClass"
               class="baseline-vertical-align mx-auto"
-              size="14">
+              :size="isMobile && '20' || '14'">
               fa-comment
             </v-icon>
-            <span class="mx-auto mt-1 mt-lg-0 ms-lg-2">
+            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-2">
               {{ $t('UIActivity.label.Comment') }}
             </span>
           </div>
diff --git a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue
index 2d90b40275a..2e1334e29a1 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue
@@ -18,10 +18,10 @@
             <v-icon
               :class="likeColorClass"
               class="baseline-vertical-align"
-              size="14">
+              :size="isMobile && '20' || '14'">
               fa-thumbs-up
             </v-icon>
-            <span class="mx-auto mt-1 mt-lg-0 ms-lg-2">
+            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-2">
               {{ $t('UIActivity.msg.LikeActivity') }}
             </span>
           </div>
@@ -59,6 +59,9 @@ export default {
     likeButtonTitle() {
       return this.hasLiked && this.$t('UIActivity.msg.UnlikeActivity') || this.$t('UIActivity.msg.LikeActivity');
     },
+    isMobile() {
+      return this.$vuetify.breakpoint.name === 'sm' || this.$vuetify.breakpoint.name === 'xs';
+    },
   },
   created() {
     this.computeLikes();
diff --git a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue
index a74366e870e..fed83c2a503 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue
@@ -18,10 +18,10 @@
             <v-icon
               :class="shareIconColorClass"
               class="me-lg-1 baseline-vertical-align"
-              size="14">
+              :size="isMobile && '20' || '14'">
               fa-share
             </v-icon>
-            <span class="mx-auto mt-1 mt-lg-0 ms-lg-2">
+            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-2">
               {{ $t('UIActivity.share') }}
             </span>
           </div>