From 751bbbf889c1c64bf6d6ae951f0521f91237a9f4 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 2 Aug 2019 16:10:19 +0200
Subject: [PATCH] Make mobile responsive

---
 .../EmotionsButtons/EmotionsButtons.vue       | 46 +++++++++---------
 webapp/components/ShoutButton.vue             |  5 +-
 webapp/pages/post/_id/_slug/index.vue         | 48 ++++++++++++-------
 3 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/webapp/components/EmotionsButtons/EmotionsButtons.vue b/webapp/components/EmotionsButtons/EmotionsButtons.vue
index 55f1262a9..8f4774d26 100644
--- a/webapp/components/EmotionsButtons/EmotionsButtons.vue
+++ b/webapp/components/EmotionsButtons/EmotionsButtons.vue
@@ -1,27 +1,21 @@
 <template>
-  <ds-space margin="large" style="text-align: center">
-    <ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
-      <div v-for="emotion in Object.keys(postsEmotionsCountByEmotion)" :key="emotion">
-        <ds-flex-item :width="{ lg: '100%' }">
-          <ds-button size="large" ghost @click="toggleEmotion(emotion)" class="emotions-buttons">
-            <img :src="iconPath(emotion)" width="53" />
-          </ds-button>
-          <ds-space margin-bottom="xx-small" />
-          <div>
-            <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
-            <ds-heading
-              style="display: inline"
-              tag="h3"
-              :key="postsEmotionsCountByEmotion[emotion]"
-            >
-              {{ postsEmotionsCountByEmotion[emotion] }}x
-            </ds-heading>
-            {{ $t('contribution.emotions-label.emoted') }}
-          </div>
-        </ds-flex-item>
-      </div>
-    </ds-flex>
-  </ds-space>
+  <ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
+    <div v-for="emotion in Object.keys(postsEmotionsCountByEmotion)" :key="emotion">
+      <ds-flex-item :width="{ lg: '100%' }">
+        <ds-button size="large" ghost @click="toggleEmotion(emotion)" class="emotions-buttons">
+          <img :src="iconPath(emotion)" width="53" />
+        </ds-button>
+        <ds-space margin-bottom="xx-small" />
+        <div class="emotions-mobile-space">
+          <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
+          <ds-heading style="display: inline" tag="h3" :key="postsEmotionsCountByEmotion[emotion]">
+            {{ postsEmotionsCountByEmotion[emotion] }}x
+          </ds-heading>
+          {{ $t('contribution.emotions-label.emoted') }}
+        </div>
+      </ds-flex-item>
+    </div>
+  </ds-flex>
 </template>
 <script>
 import gql from 'graphql-tag'
@@ -122,6 +116,7 @@ export default {
 <style lang="scss">
 .emotions-flex {
   justify-content: space-evenly;
+  text-align: center;
 }
 
 .emotions-label {
@@ -133,4 +128,9 @@ export default {
     background-color: $background-color-base;
   }
 }
+@media only screen and (max-width: 960px) {
+  .emotions-mobile-space {
+    margin-bottom: 32px;
+  }
+}
 </style>
diff --git a/webapp/components/ShoutButton.vue b/webapp/components/ShoutButton.vue
index 3f24ee6c8..94d76005b 100644
--- a/webapp/components/ShoutButton.vue
+++ b/webapp/components/ShoutButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-space margin="large" style="text-align: center">
+  <ds-space margin="xx-small" class="text-align-center">
     <ds-button
       :loading="loading"
       :disabled="disabled"
@@ -88,4 +88,7 @@ export default {
 .shout-button-text {
   user-select: none;
 }
+.text-align-center {
+  text-align: center;
+}
 </style>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index a4b7b37e3..5aaea93ca 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -43,22 +43,30 @@
         <ds-space margin="xx-small" />
         <hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" />
       </div>
-      <ds-flex :gutter="{ lg: 'small' }">
-        <ds-flex-item :width="{ lg: '75%' }">
-          <hc-emotions-buttons :post="post" />
-        </ds-flex-item>
-        <ds-flex-item :width="{ lg: '10%' }" />
-        <!-- Shout Button -->
-        <ds-flex-item :width="{ lg: '15%' }">
-          <hc-shout-button
-            v-if="post.author"
-            :disabled="isAuthor(post.author.id)"
-            :count="post.shoutedCount"
-            :is-shouted="post.shoutedByCurrentUser"
-            :post-id="post.id"
-          />
-        </ds-flex-item>
-      </ds-flex>
+      <ds-space margin-top="x-large">
+        <ds-flex :gutter="{ lg: 'small' }">
+          <ds-flex-item
+            :width="{ lg: '75%', md: '75%', sm: '75%' }"
+            class="emotions-buttons-mobile"
+          >
+            <hc-emotions-buttons :post="post" />
+          </ds-flex-item>
+          <ds-flex-item :width="{ lg: '10%', md: '5%', sm: '5%' }" />
+          <!-- Shout Button -->
+          <ds-flex-item
+            :width="{ lg: '15%', md: '20%', sm: '20%', base: '100%' }"
+            class="shout-button"
+          >
+            <hc-shout-button
+              v-if="post.author"
+              :disabled="isAuthor(post.author.id)"
+              :count="post.shoutedCount"
+              :is-shouted="post.shoutedByCurrentUser"
+              :post-id="post.id"
+            />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-space>
       <!-- Comments -->
       <ds-section slot="footer">
         <hc-comment-list :post="post" />
@@ -209,4 +217,12 @@ export default {
     }
   }
 }
+@media only screen and (max-width: 960px) {
+  .shout-button {
+    float: left;
+  }
+  // .emotions-buttons-mobile {
+  //   margin-top: -80px;
+  // }
+}
 </style>