Add: Show Review message

src/comp/page/post/post.svelte

@@ -3,11 +3,10 @@
   import Ago from "$comp/ago.svelte";
   import Avatar from "$comp/avatar.svelte";
   import CommentList from "$comp/page/post/commentlist.svelte";
-    import Iconvalue from "$comp/iconvalue.svelte";
+  import Iconvalue from "$comp/iconvalue.svelte";
   import Mention from "$comp/mention.svelte";
-    import Tablericon from "$comp/tablericon.svelte";
-    import { round10 } from "expected-round";
-    import moment from "moment";
+  import { round10 } from "expected-round";
+  import Cardicon from "$comp/cardicon.svelte";
 
   /**
    * @type {import("$types/base").Post}
@@ -41,7 +40,13 @@
     display: flex;
     flex-direction: column;
 
-    gap: 16px
+    gap: 32px
+  }
+  
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
 
   .titleBar {
@@ -117,58 +122,80 @@
     text-align: left;
     padding-left: 0.1em;
   }
+
+  .notReviewed {
+    display: flex;
+    flex-flow: column nowrap;
+    min-height: 100%;
+    justify-content: center;
+    
+    h6 {
+      font-size: 1.2rem;
+    }
+  }
 </style>
 
 <div class="body">
   <article class="post">
-    <div class="postHead">
-      <Avatar size={64} user={post.author}></Avatar>
-      <div class="titleBar">
-        <div class="postInfo">
-          <Mention user={post.author}></Mention>
-          <Ago date={post.postDate}></Ago>
-        </div>
-        <h1 class="typeHead title">{post.name}</h1>
+    {#if !post.reviewed}
+    <Cardicon iconName="search" colorBackground="var(--yellow-transparent)" colorIcon="var(--yellow)">
+      <div class="notReviewed">
+        <h6 class="typeTitle">Not Reviewed</h6>
+        <span>This post will remain hidden from the public until a moderator approves its contents</span>
       </div>
-    </div>
-  
-    <p class="postContent">
-      {post.content}
-    </p>
-  
-    <Actionbar message={post}>
-      {#if showMetrics && post.metrics}
-      <Iconvalue name="Comment Count" iconName="message">{post.metrics.commentCount}</Iconvalue>
-      <Iconvalue name="User Count" iconName="user">{post.metrics.userCount}</Iconvalue>
-      <Iconvalue name="Relevancy" iconName="chart-bar">{round10(post.metrics.relevancy, -2)}</Iconvalue>
-      {/if}
-      <div class="metricsSpacer"></div>
-      <button class="button transparent" on:click={togglePostStats}>
-        <Iconvalue name="More detailed metrics" iconName="database">stats</Iconvalue>
-      </button>
-    </Actionbar>
-
-    {#if showStats}
-    <div class="stats">
-      <h6 class="statsTitle">Debug stats</h6>
-      <table>
-        <tr><td>ID</td><td>{post.id}</td></tr>
-        <tr><td>Author</td><td>{post.author?.id}</td></tr>
-        <tr><td>Created Date</td><td>{post.postDate}</td></tr>
-        <tr><td>Score</td><td>{post.rating.likes - post.rating.dislikes}</td></tr>
-        <tr><td>Edited</td><td>{post.edited ? "Yes" : "No"}</td></tr>
-        <tr><td>Edit Count</td><td>{post.editCount}</td></tr>
-        {#if post.metrics}
-        <tr><td>Comment Count</td><td>{post.metrics.commentCount}</td></tr>
-        <tr><td>User Count</td><td>{post.metrics.userCount}</td></tr>
-        <tr><td>Latest Activity</td><td>{post.metrics.latestActivity}</td></tr>
-        <tr><td>Engagement</td><td>{post.metrics.engagement}</td></tr>
-        <tr><td>Age</td><td>{post.metrics.age}</td></tr>
-        <tr><td>Relevancy</td><td>{round10(post.metrics.relevancy, -5)}</td></tr>
-        {/if}
-      </table>
-    </div>
+    </Cardicon>
     {/if}
+
+    <div class="content">
+      <div class="postHead">
+        <Avatar size={64} user={post.author}></Avatar>
+        <div class="titleBar">
+          <div class="postInfo">
+            <Mention user={post.author}></Mention>
+            <Ago date={post.postDate}></Ago>
+          </div>
+          <h1 class="typeHead title">{post.name}</h1>
+        </div>
+      </div>
+    
+      <p class="postContent">
+        {post.content}
+      </p>
+    
+      <Actionbar message={post}>
+        {#if showMetrics && post.metrics}
+        <Iconvalue name="Comment Count" iconName="message">{post.metrics.commentCount}</Iconvalue>
+        <Iconvalue name="User Count" iconName="user">{post.metrics.userCount}</Iconvalue>
+        <Iconvalue name="Relevancy" iconName="chart-bar">{round10(post.metrics.relevancy, -2)}</Iconvalue>
+        {/if}
+        <div class="metricsSpacer"></div>
+        <button class="button transparent" on:click={togglePostStats}>
+          <Iconvalue name="More detailed metrics" iconName="database">stats</Iconvalue>
+        </button>
+      </Actionbar>
+  
+      {#if showStats}
+      <div class="stats">
+        <h6 class="statsTitle">Debug stats</h6>
+        <table>
+          <tr><td>ID</td><td>{post.id}</td></tr>
+          <tr><td>Author</td><td>{post.author?.id}</td></tr>
+          <tr><td>Created Date</td><td>{post.postDate}</td></tr>
+          <tr><td>Score</td><td>{post.rating.likes - post.rating.dislikes}</td></tr>
+          <tr><td>Edited</td><td>{post.edited ? "Yes" : "No"}</td></tr>
+          <tr><td>Edit Count</td><td>{post.editCount}</td></tr>
+          {#if post.metrics}
+          <tr><td>Comment Count</td><td>{post.metrics.commentCount}</td></tr>
+          <tr><td>User Count</td><td>{post.metrics.userCount}</td></tr>
+          <tr><td>Latest Activity</td><td>{post.metrics.latestActivity}</td></tr>
+          <tr><td>Engagement</td><td>{post.metrics.engagement}</td></tr>
+          <tr><td>Age</td><td>{post.metrics.age}</td></tr>
+          <tr><td>Relevancy</td><td>{round10(post.metrics.relevancy, -5)}</td></tr>
+          {/if}
+        </table>
+      </div>
+      {/if}
+    </div>
   </article>
   
   {#if commentTree}