Improved moderation list

pages/moderation/index.vue

@@ -4,6 +4,7 @@
       {{ $t('moderation.reports.name') }}
     </ds-heading>
     <ds-table
+      v-if="Report && Report.length"
       :data="Report"
       :fields="fields"
       condensed
@@ -72,43 +73,28 @@
           {{ scope.row.reporter.name }}
         </nuxt-link>
       </template>
-      <template slot="actions">
-        <no-ssr>
-          <dropdown
-            class="moderation-menu"
-            placement="left"
-            offset="5"
-          >
-            <template
-              slot="default"
-              slot-scope="{toggleMenu}"
-            >
-              <a
-                class="moderation-menu-trigger"
-                href="#"
-                @click.prevent="toggleMenu"
-              >
-                <ds-icon name="ellipsis-v" />
-              </a>
-            </template>
-            <template slot="popover">
-              Actions...
-            </template>
-          </dropdown>
-        </no-ssr>
-      </template>
     </ds-table>
+    <ds-section
+      v-else
+      centered
+    >
+      <ds-text>
+        <img
+          src="/img/empty-state.svg"
+          width="80"
+          style="margin-bottom: 5px"
+          alt="Empty"
+        ><br>
+        <b>NO REPORTS</b>
+      </ds-text>
+    </ds-section>
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
-import Dropdown from '~/components/Dropdown'
 
 export default {
-  components: {
-    Dropdown
-  },
   data() {
     return {
       Report: []

static/img/empty-state.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="259" height="213"><g fill="none" fill-rule="evenodd"><ellipse cx="120" cy="204" fill="#ECF1EE" rx="120" ry="9"/><path fill="#3B4340" fill-rule="nonzero" d="M24 136.244v52.761c0 3.305 2.69 5.995 6.01 5.995h179.98a5.994 5.994 0 0 0 6.01-5.995V164a3 3 0 0 1 6 0v25.005c0 6.63-5.37 11.995-12.01 11.995H30.01C23.38 201 18 195.628 18 189.005V129c0-.77.291-1.538.876-2.123a3.003 3.003 0 0 1 4.248.006l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.51-.858 2.99 2.99 0 0 1 2.522.85l14.386 14.385a3 3 0 0 1-4.243 4.243l-12.655-12.655-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857L24 136.244zm0-33.486l18.604 18.605 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 6.763-6.763a2.999 2.999 0 0 1 4.238.005 3.005 3.005 0 0 1 .005 4.237l-8.496 8.496a2.986 2.986 0 0 1-2.515.848 3.005 3.005 0 0 1-2.515-.858l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-21.203-21.203a3.006 3.006 0 0 1-.005-4.248 3.003 3.003 0 0 1 4.248.006l.876.876V104h-6V11.995C18 5.365 23.37 0 30.01 0h179.98C216.62 0 222 5.372 222 11.995V74a3 3 0 0 1-6 0V11.995C216 8.69 213.31 6 209.99 6H30.01A5.994 5.994 0 0 0 24 11.995v90.763zM38 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-4c0-1.657 1.351-3 3-3h104c1.657 0 3 1.347 3 3 0 1.657-1.351 3-3 3H97c-1.657 0-3-1.347-3-3z"/><path fill="#D0021B" d="M212.11 92.023c3.805-6.088 9.974-6.088 13.78 0l31.22 49.954c3.805 6.088 1.071 11.023-6.1 11.023h-64.02c-7.174 0-9.906-4.935-6.1-11.023l31.22-49.954zM215 108v24c0 1.653 1.343 3 3 3 1.653 0 3-1.343 3-3v-24c0-1.653-1.343-3-3-3-1.653 0-3 1.343-3 3zm3 37a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></g></svg>