translate and style user count

webapp/components/_new/features/ReportsTable/ReportsTable.vue

@@ -6,15 +6,17 @@
     cellpadding="0"
   >
     <colgroup>
-      <col width="5%" />
+      <col width="4%" />
+      <col width="12%" />
       <col width="40%" />
-      <col width="20%" />
+      <col width="16%" />
-      <col width="20%" />
+      <col width="16%" />
-      <col width="15%" />
+      <col width="12%" />
     </colgroup>
     <thead class="ds-table-col ds-table-head-col">
       <tr valign="top">
         <th class="ds-table-head-col"></th>
+        <th class="ds-table-head-col">{{ $t('moderation.reports.submitter') }}</th>
         <th class="ds-table-head-col">{{ $t('moderation.reports.content') }}</th>
         <th class="ds-table-head-col">{{ $t('moderation.reports.author') }}</th>
         <th class="ds-table-head-col">{{ $t('moderation.reports.status') }}</th>
@@ -43,6 +45,14 @@
               />
             </ds-text>
           </td>
+          <td class="ds-table-col">
+            <span class="user-count">
+              {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
+            </span>
+            <ds-button size="small" @click="showFiledReports = !showFiledReports">
+              {{ $t('moderation.reports.moreDetails') }}
+            </ds-button>
+          </td>
           <td class="ds-table-col">
             <div v-if="isPost(report.resource) || isComment(report.resource)">
               <nuxt-link
@@ -71,13 +81,6 @@
                 />
               </client-only>
             </div>
-            <div class="nested-table-toggle">
-              <counter-icon icon="flag" :count="report.filed.length">
-                <ds-button ghost primary @click="showFiledReports = !showFiledReports">
-                  {{ $t('moderation.reports.moreDetails') }}
-                </ds-button>
-              </counter-icon>
-            </div>
           </td>
           <td class="ds-table-col">
             <client-only>
@@ -219,6 +222,11 @@ export default {
   }
 }
 
+.user-count {
+  display: block;
+  margin-bottom: $space-xx-small;
+}
+
 .nested-table-toggle {
   position: absolute;
   left: 0;

webapp/locales/de.json

@@ -334,6 +334,15 @@
             "reasonCategory": "Kategorie",
             "reasonDescription": "Beschreibung",
             "submitter": "Gemeldet von",
+            "numberOfUsers": "{count} Nutzern",
+            "filterLabel": {
+              "all": "Alle",
+              "unreviewed": "Nicht bearbeitet",
+              "reviewed": "Bearbeitet",
+              "closed": "Abgeschlossen"
+            },
+            "reportedOn": "Datum",
+            "moreDetails": "Details öffnen",
             "decideModal": {
               "submit": "Bestätige Entscheidung",
               "cancel": "Abbruch",

webapp/locales/en.json

@@ -500,6 +500,7 @@
       "reasonCategory": "Category",
       "reasonDescription": "Description",
       "submitter": "Reported by",
+      "numberOfUsers": "{count} users",
       "filterLabel": {
         "all": "All",
         "unreviewed": "Unreviewed",
@@ -507,7 +508,7 @@
         "closed": "Closed"
       },
       "reportedOn": "Date",
-      "moreDetails": "Report Details",
+      "moreDetails": "View Details",
       "decideModal": {
         "submit": "Confirm decision",
         "cancel": "Cancel",