Merge pull request #1430 from pixelfed/frontend-ui-refactor

Update PostComponent, hide sensitive comments behind warning

public/mix-manifest.json

@@ -13,6 +13,6 @@
     "/js/loops.js": "/js/loops.js?id=d5c7e9d0d6a44553dd0d",
     "/js/profile.js": "/js/profile.js?id=03815205b1472e5caf24",
     "/js/search.js": "/js/search.js?id=95c893b755e132a1d7e1",
-    "/js/status.js": "/js/status.js?id=9ff4b1402d0616ec7d95",
+    "/js/status.js": "/js/status.js?id=f18eb709c4c4abecf034",
-    "/js/timeline.js": "/js/timeline.js?id=31977aa6a7448134f135"
+    "/js/timeline.js": "/js/timeline.js?id=18063ce62e0e78634c54"
 }

resources/assets/js/components/PostComponent.vue

@@ -113,15 +113,23 @@
                   </p>
 
                   <div v-if="showComments">
+                    <hr>
                     <div class="postCommentsLoader text-center">
                       <div class="spinner-border" role="status">
                         <span class="sr-only">Loading...</span>
                       </div>
                     </div>
-                    <div class="postCommentsContainer d-none pt-3">
+                    <div class="postCommentsContainer d-none">
                       <p v-if="status.reply_count > 10"class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
                       <div class="comments">
                         <div v-for="(reply, index) in results" class="pb-3" :key="'tl' + reply.id + '_' + index">
+                          <div v-if="reply.sensitive == true">
+                            <div class="card card-body shadow-none border border-left-blue py-3 px-1 text-center small">
+                              <p class="mb-0">This comment may contain sensitive material</p>
+                              <p class="font-weight-bold text-primary cursor-pointer mb-0" @click="reply.sensitive = false;">Show</p>
+                            </div>
+                          </div>
+                          <div v-else>
                             <p class="d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
                               <span>
                                 <a class="text-dark font-weight-bold mr-1" :href="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
@@ -163,6 +171,7 @@
                         </div>
                       </div>
                     </div>
+                  </div>
 
                 </div>
               </div>