refactor EmotionButton

webapp/components/EmotionButton/EmotionButton.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="emotion-button">
+    <base-button :id="emotion" circle ghost @click="$emit('toggleEmotion', emotion)">
+      <img :src="emojiPath" />
+    </base-button>
+    <label class="label" :for="emotion">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
+    <p v-if="count !== null" class="count">{{ emotionCount }}x</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    emojiPath: {
+      type: String,
+      required: true,
+    },
+    emotion: {
+      type: String,
+      required: true,
+    },
+    emotionCount: {
+      type: Number,
+      default: null,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.emotion-button {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > .base-button {
+    padding: 0;
+
+    &:hover {
+      padding: $space-xxx-small;
+    }
+  }
+
+  > .label {
+    margin-top: $space-xx-small;
+    font-size: $font-size-small;
+    cursor: pointer;
+  }
+
+  > .count {
+    margin: $space-xx-small 0;
+  }
+}
+</style>

webapp/components/Emotions/Emotions.vue

@@ -1,29 +1,26 @@
 <template>
-  <ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
+  <div class="emotions-button-group">
-    <ds-flex-item
+    <emotion-button
       v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)"
       :key="emotion"
-      :width="{ lg: '100%' }"
+      :emojiPath="iconPath(emotion)"
-    >
-      <hc-emotions-button
-        @toggleEmotion="toggleEmotion"
-        :PostsEmotionsCountByEmotion="PostsEmotionsCountByEmotion"
-        :iconPath="iconPath(emotion)"
       :emotion="emotion"
+      :emotionCount="PostsEmotionsCountByEmotion[emotion]"
+      @toggleEmotion="toggleEmotion"
     />
-    </ds-flex-item>
+  </div>
-  </ds-flex>
 </template>
+
 <script>
 import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
-import HcEmotionsButton from '~/components/EmotionsButton/EmotionsButton'
+import EmotionButton from '~/components/EmotionButton/EmotionButton'
 import { PostsEmotionsByCurrentUser } from '~/graphql/PostQuery.js'
 import PostMutations from '~/graphql/PostMutations.js'
 
 export default {
   components: {
-    HcEmotionsButton,
+    EmotionButton,
   },
   props: {
     post: { type: Object, default: () => {} },
@@ -115,3 +112,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.emotions-button-group {
+  display: flex;
+}
+</style>

webapp/components/EmotionsButton/EmotionsButton.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="emotions-button">
-    <base-button circle ghost @click="toggleEmotion(emotion)">
-      <img :src="iconPath" />
-    </base-button>
-    <ds-space margin-bottom="xx-small" />
-    <div class="emotions-mobile-space">
-      <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
-      <p style="display: inline" :key="PostsEmotionsCountByEmotion[emotion]">
-        {{ PostsEmotionsCountByEmotion[emotion] }}x
-      </p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    iconPath: { type: String, default: null },
-    PostsEmotionsCountByEmotion: { type: Object, default: () => {} },
-    emotion: { type: String, default: null },
-  },
-  methods: {
-    toggleEmotion(emotion) {
-      this.$emit('toggleEmotion', emotion)
-    },
-  },
-}
-</script>
-<style lang="scss">
-.emotions-button {
-  > .base-button {
-    padding: 0;
-
-    &:hover {
-      padding: 2px;
-    }
-  }
-}
-
-.emotions-flex {
-  width: 100%;
-  justify-content: space-evenly;
-  text-align: center;
-}
-
-.emotions-label {
-  font-size: $font-size-small;
-}
-
-@media only screen and (max-width: 960px) {
-  .emotions-mobile-space {
-    margin-bottom: 32px;
-  }
-}
-</style>

webapp/pages/post/_id/_slug/index.vue

@@ -47,13 +47,9 @@
       </div>
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">
-          <ds-flex-item
+          <ds-flex-item :width="{ lg: '75%', md: '75%', sm: '75%', base: '100%' }">
-            :width="{ lg: '75%', md: '75%', sm: '75%', base: '100%' }"
-            class="emotions-buttons-mobile"
-          >
             <hc-emotions :post="post" />
           </ds-flex-item>
-          <ds-flex-item :width="{ lg: '10%', md: '3%', sm: '3%' }" />
           <!-- Shout Button -->
           <ds-flex-item
             :width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"