From 2407f0b0d1af6925ca7bdad9dbf2fc1a08639260 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 2 Jul 2019 19:14:18 -0300
Subject: [PATCH] Add basic styling for comment list

---
 webapp/components/Comment.vue | 56 ++++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 67bdb92a8..856410320 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -1,30 +1,38 @@
 <template>
-  <div v-if="(comment.deleted || comment.disabled) && !isModerator">
-    <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
-      <ds-icon name="ban" />
-      {{ this.$t('comment.content.unavailable-placeholder') }}
-    </ds-text>
+  <div v-if="(comment.deleted || comment.disabled) && !isModerator" :class="{ comment: true }">
+    <ds-card>
+      <ds-space margin-bottom="base" />
+      <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
+        <ds-icon name="ban" />
+        {{ this.$t('comment.content.unavailable-placeholder') }}
+      </ds-text>
+      <ds-space margin-bottom="base" />
+    </ds-card>
   </div>
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
-    <ds-space margin-bottom="x-small">
-      <hc-user :user="author" :date-time="comment.createdAt" />
-    </ds-space>
-    <!-- Content Menu (can open Modals) -->
-    <no-ssr>
-      <content-menu
-        placement="bottom-end"
-        resource-type="comment"
-        :resource="comment"
-        :modalsData="menuModalsData"
-        style="float-right"
-        :is-owner="isAuthor(author.id)"
-      />
-    </no-ssr>
-    <!-- eslint-disable vue/no-v-html -->
-    <!-- TODO: replace editor content with tiptap render view -->
-    <ds-space margin-bottom="small" />
-    <div style="padding-left: 40px;" v-html="comment.contentExcerpt" />
-    <!-- eslint-enable vue/no-v-html -->
+    <ds-card>
+      <ds-space margin-bottom="small" />
+      <ds-space margin-bottom="small">
+        <hc-user :user="author" :date-time="comment.createdAt" />
+      </ds-space>
+      <!-- Content Menu (can open Modals) -->
+      <no-ssr>
+        <content-menu
+          placement="bottom-end"
+          resource-type="comment"
+          :resource="comment"
+          :modalsData="menuModalsData"
+          style="float-right"
+          :is-owner="isAuthor(author.id)"
+        />
+      </no-ssr>
+      <!-- eslint-disable vue/no-v-html -->
+      <!-- TODO: replace editor content with tiptap render view -->
+      <ds-space margin-bottom="small" />
+      <div style="padding-left: 40px;" v-html="comment.contentExcerpt" />
+      <!-- eslint-enable vue/no-v-html -->
+      <ds-space margin-bottom="x-small" />
+    </ds-card>
   </div>
 </template>