From 272b1071d47095577bcf57c35dff4042d7fdc67b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 12:14:57 +0100
Subject: [PATCH] Improved content menu and empty profile page

---
 components/ContentMenu.vue |  9 ++++----
 components/Empty.vue       | 15 +++++++++++--
 components/PostCard.vue    | 12 ++++++-----
 pages/post/_slug/index.vue | 11 +++++-----
 pages/profile/_slug.vue    | 44 ++++++++++++++++++++++++++++----------
 5 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index e446420da..7e4f24d9b 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -8,13 +8,14 @@
       slot="default"
       slot-scope="{toggleMenu}"
     >
-      <a
+      <ds-button
         class="content-menu-trigger"
-        href="#"
-        @click.prevent="toggleMenu()"
+        size="small"
+        ghost
+        @click.prevent="toggleMenu"
       >
         <ds-icon name="ellipsis-v" />
-      </a>
+      </ds-button>
     </template>
     <div
       slot="popover"
diff --git a/components/Empty.vue b/components/Empty.vue
index 7d699d7d8..8755a11bd 100644
--- a/components/Empty.vue
+++ b/components/Empty.vue
@@ -1,8 +1,8 @@
 <template>
   <ds-space
     class="hc-empty"
-    margin="x-large"
     centered
+    :margin="margin"
   >
     <ds-text>
       <img
@@ -13,6 +13,7 @@
         alt="Empty"
       ><br>
       <ds-text
+        v-show="message"
         class="hc-empty-message"
         color="softer"
       >
@@ -40,7 +41,17 @@ export default {
     /**
      * Message that appears under the icon
      */
-    message: { type: String, required: true }
+    message: {
+      type: String,
+      default: null
+    },
+    /**
+     * Vertical spacing
+     */
+    margin: {
+      type: [String, Object],
+      default: 'x-large'
+    }
   },
   computed: {
     iconPath() {
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 560eb50f0..25b410257 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -114,11 +114,13 @@ export default {
   .ds-card-footer {
     z-index: 1;
   }
-}
-.content-menu {
-  display: inline-block;
-  margin-left: $space-small;
-  z-index: 1;
+
+  .content-menu {
+    display: inline-block;
+    margin-left: $space-xx-small;
+    margin-right: -$space-x-small;
+    z-index: 1;
+  }
 }
 .post-link {
   display: block;
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 19f697187..b321c6bd1 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -118,11 +118,10 @@
         </div>
         <ds-space margin-bottom="small" />
       </div>
-      <div v-else>
-        <p style="text-align: center; opacity: .5;">
-          NO COMMENTS
-        </p>
-      </div>
+      <hc-empty
+        v-else
+        icon="messages"
+      />
     </ds-section>
   </ds-card>
 </template>
@@ -132,6 +131,7 @@ import gql from 'graphql-tag'
 import ContentMenu from '~/components/ContentMenu'
 import HcAuthor from '~/components/Author.vue'
 import HcShoutButton from '~/components/ShoutButton.vue'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
   transition: {
@@ -141,6 +141,7 @@ export default {
   components: {
     HcAuthor,
     HcShoutButton,
+    HcEmpty,
     ContentMenu
   },
   head() {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 52fee46a6..913efb429 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -19,7 +19,6 @@
           />
           <no-ssr>
             <content-menu
-              style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
               placement="bottom-end"
               context="user"
               :item-id="user.id"
@@ -252,16 +251,26 @@
               </ds-flex>
             </ds-card>
           </ds-flex-item>
-          <ds-flex-item
-            v-for="post in uniq(user.contributions.filter(post => !post.deleted))"
-            :key="post.id"
-            :width="{ base: '100%', md: '100%', xl: '50%' }"
-          >
-            <hc-post-card
-              :post="post"
-              :show-author-popover="false"
-            />
-          </ds-flex-item>
+          <template v-if="activePosts">
+            <ds-flex-item
+              v-for="post in activePosts"
+              :key="post.id"
+              :width="{ base: '100%', md: '100%', xl: '50%' }"
+            >
+              <hc-post-card
+                :post="post"
+                :show-author-popover="false"
+              />
+            </ds-flex-item>
+          </template>
+          <template v-else>
+            <ds-flex-item :width="{ base: '100%' }">
+              <hc-empty
+                margin="xx-large"
+                icon="file"
+              />
+            </ds-flex-item>
+          </template>
         </ds-flex>
         <hc-load-more
           v-if="hasMore"
@@ -282,6 +291,7 @@ import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
+import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
 
 export default {
@@ -292,6 +302,7 @@ export default {
     HcCountTo,
     HcBadges,
     HcLoadMore,
+    HcEmpty,
     ContentMenu
   },
   transition: {
@@ -329,6 +340,9 @@ export default {
         this.user.contributions &&
         this.user.contributions.length < this.user.contributionsCount
       )
+    },
+    activePosts() {
+      return this.uniq(this.user.contributions.filter(post => !post.deleted))
     }
   },
   watch: {
@@ -395,6 +409,14 @@ export default {
   border: #fff 5px solid;
 }
 
+.page-name-profile-slug {
+  .ds-flex-item:first-child .content-menu {
+    position: absolute;
+    top: $space-x-small;
+    right: $space-x-small;
+  }
+}
+
 .profile-top-navigation {
   position: sticky;
   top: 53px;