Add content warning to modlog and fix modlog routing bug (#994)

* Add content warning to modlog and fix modlog routing bug

* Add translation logic

src/assets/css/main.css

@@ -99,7 +99,7 @@
   border-bottom: 2px solid var(--dark);
 }
 
-.md-div table tbody+tbody {
+.md-div table tbody + tbody {
   border-top: 2px solid var(--dark);
 }
 
@@ -140,8 +140,8 @@
 }
 
 .icon-emoji-admin {
-  max-width: 24px; 
+  max-width: 24px;
-  max-height: 24px; 
+  max-height: 24px;
   display: inline-block;
 }
 
@@ -164,7 +164,7 @@
     left: 0;
   }
 
-  .emoji-picker-container>section {
+  .emoji-picker-container > section {
     width: 100% !important;
   }
 }
@@ -175,7 +175,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0, 0, 0, 0.3);
   z-index: 999;
 }
 
@@ -256,6 +256,10 @@ hr {
   text-overflow: ellipsis;
 }
 
+.text-xs-center {
+  text-align: center;
+}
+
 .overflow-wrap-anywhere {
   overflow-wrap: anywhere;
 }
@@ -435,6 +439,6 @@ br.big {
 .lang-select-action:focus {
   width: auto;
 }
-em-emoji-picker{
+em-emoji-picker {
-  width:100%;
+  width: 100%;
 }

src/shared/components/community/sidebar.tsx

@@ -262,7 +262,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <li className="list-inline-item">
           <Link
             className="badge badge-primary"
-            to={`/modlog/community/${this.props.community_view.community.id}`}
+            to={`/modlog/${this.props.community_view.community.id}`}
           >
             {i18n.t("modlog")}
           </Link>

src/shared/components/modlog.tsx

@@ -1,5 +1,6 @@
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
@@ -57,7 +58,7 @@ import {
   wsSubscribe,
 } from "../utils";
 import { HtmlTags } from "./common/html-tags";
-import { Spinner } from "./common/icon";
+import { Icon, Spinner } from "./common/icon";
 import { MomentTime } from "./common/moment-time";
 import { Paginator } from "./common/paginator";
 import { SearchableSelect } from "./common/searchable-select";
@@ -782,6 +783,19 @@ export class Modlog extends Component<
         />
 
         <div>
+          <div
+            className="alert alert-warning text-sm-start text-xs-center"
+            role="alert"
+          >
+            <Icon
+              icon="alert-triangle"
+              inline
+              classes="mr-sm-2 mx-auto d-sm-inline d-block"
+            />
+            <T i18nKey="modlog_content_warning" class="d-inline">
+              #<strong>#</strong>#
+            </T>
+          </div>
           <h5>
             {communityName && (
               <Link className="text-body" to={`/c/${communityName}`}>

src/shared/routes.ts

@@ -92,12 +92,12 @@ export const routes: IRoutePropsWithFetch[] = [
     component: Settings,
   },
   {
-    path: `/modlog`,
+    path: `/modlog/:communityId`,
     component: Modlog,
     fetchInitialData: Modlog.fetchInitialData,
   },
   {
-    path: `/modlog/:communityId`,
+    path: `/modlog`,
     component: Modlog,
     fetchInitialData: Modlog.fetchInitialData,
   },