fix: Mobile view of activity actions - meed-2275 (#2716)

This change allows to hide the activity actions label when mobile view
Meeds-io · Aug 14, 2023 · 378ae98 · 378ae98
1 parent 3ebf0cd
commit 378ae98
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/...app/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue b/...app/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/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue b/...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/...ebapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue b/...ebapp/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>