From 58852cb5662a58a694ca559ac79363aa0007f284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 12 Mar 2019 21:38:52 +0100
Subject: [PATCH] Visually distinguish disabled content

with beautiful orange border :laughing:

cc @appinteractive
---
 assets/styles/main.scss     |  5 +++++
 components/PostCard.vue     |  3 ++-
 graphql/UserProfileQuery.js |  1 +
 pages/index.vue             |  1 +
 pages/post/_slug/index.vue  | 10 ++++++----
 pages/profile/_slug.vue     |  5 ++++-
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 662b8bb0d..f7c3d72ba 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -4,6 +4,11 @@
 // Transition Easing
 $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
 
+.disabled-content {
+  border-style: solid;
+  border-color: $color-warning;
+}
+
 .layout-enter-active {
   transition: opacity 80ms ease-out;
   transition-delay: 80ms;
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 403990748..88b663392 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -2,7 +2,7 @@
   <ds-card
     :header="post.title"
     :image="post.image"
-    class="post-card"
+    :class="{'post-card': true, 'disabled-content': post.disabled}"
   >
     <a
       v-router-link
@@ -126,6 +126,7 @@ export default {
     z-index: 1;
   }
 }
+
 .post-link {
   display: block;
   position: absolute;
diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 30431602b..f6e25081b 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -14,6 +14,7 @@ export default app => {
           name: name${lang}
         }
         createdAt
+        disabled
         badges {
           id
           key
diff --git a/pages/index.vue b/pages/index.vue
index f4785b3ac..86311bf7e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -97,6 +97,7 @@ export default {
               title
               contentExcerpt
               createdAt
+              disabled
               slug
               image
               author {
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 16d7fce73..d7015e6fe 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -7,7 +7,7 @@
       v-if="post && ready"
       :image="post.image"
       :header="post.title"
-      class="post-card"
+      :class="{'post-card': true, 'disabled-content': post.disabled}"
     >
       <hc-author :post="post" />
       <no-ssr>
@@ -73,7 +73,7 @@
           <span>
             <ds-icon name="comments" />
             <ds-tag
-              v-if="post.commentsCount"
+              v-if="post.comments"
               style="margin-top: -4px; margin-left: -12px; position: absolute;"
               color="primary"
               size="small"
@@ -85,14 +85,14 @@
         </h3>
         <ds-space margin-bottom="large" />
         <div
-          v-if="post.commentsCount"
+          v-if="post.comments"
           id="comments"
           class="comments"
         >
           <div
             v-for="comment in post.comments"
             :key="comment.id"
-            class="comment"
+            :class="{comment: true, 'disabled-content': comment.disabled}"
           >
             <ds-space margin-bottom="x-small">
               <hc-author :post="comment" />
@@ -176,6 +176,7 @@ export default {
           title
           content
           createdAt
+          disabled
           slug
           image
           author {
@@ -205,6 +206,7 @@ export default {
             id
             contentExcerpt
             createdAt
+            disabled
             deleted
             author {
               id
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index a8ee89385..eedabfaae 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -10,7 +10,10 @@
       gutter="base"
     >
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <ds-card style="position: relative; height: auto;">
+        <ds-card
+          :class="{'disabled-content': user.disabled}"
+          style="position: relative; height: auto;"
+        >
           <ds-avatar
             :image="user.avatar"
             :name="user.name || 'Anonymus'"