Fix settings menu

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Moderation/Logs.vue

@@ -1,146 +1,160 @@
 <template>
-  <section>
-    <ul v-if="actionLogs.length > 0">
-      <li v-for="log in actionLogs" :key="log.id">
-        <div class="box">
-          <img class="image" :src="log.actor.avatar.url" v-if="log.actor.avatar" />
-          <i18n
-            v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
-            tag="span"
-            path="{moderator} closed {report}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+  <div>
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+        </li>
+        <li class="is-active">
+          <router-link :to="{ name: RouteName.REPORT_LOGS }">{{
+            $t("Moderation log")
+          }}</router-link>
+        </li>
+      </ul>
+    </nav>
+    <section>
+      <ul v-if="actionLogs.length > 0">
+        <li v-for="log in actionLogs" :key="log.id">
+          <div class="box">
+            <img class="image" :src="log.actor.avatar.url" v-if="log.actor.avatar" />
+            <i18n
+              v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
+              tag="span"
+              path="{moderator} closed {report}"
             >
-            <router-link
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
-            tag="span"
-            path="{moderator} reopened {report}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
+              tag="span"
+              path="{moderator} reopened {report}"
             >
-            <router-link
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
-            tag="span"
-            path="{moderator} marked {report} as resolved"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
+              tag="span"
+              path="{moderator} marked {report} as resolved"
             >
-            <router-link
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.NOTE_CREATION"
-            tag="span"
-            path="{moderator} added a note on {report}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.NOTE_CREATION"
+              tag="span"
+              path="{moderator} added a note on {report}"
             >
-            <router-link
-              v-if="log.object.report"
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.report.id }) }}
-            </router-link>
-            <span v-else slot="report">{{ $t("a non-existent report") }}</span>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.EVENT_DELETION"
-            tag="span"
-            path='{moderator} deleted an event named "{title}"'
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                v-if="log.object.report"
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.report.id }) }}
+              </router-link>
+              <span v-else slot="report">{{ $t("a non-existent report") }}</span>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.EVENT_DELETION"
+              tag="span"
+              path='{moderator} deleted an event named "{title}"'
             >
-            <b slot="title">{{ log.object.title }}</b>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.ACTOR_SUSPENSION"
-            tag="span"
-            path="{moderator} suspended profile {profile}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <b slot="title">{{ log.object.title }}</b>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.ACTOR_SUSPENSION"
+              tag="span"
+              path="{moderator} suspended profile {profile}"
             >
-            <router-link
-              slot="profile"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
-              >{{ displayNameAndUsername(log.object) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.ACTOR_UNSUSPENSION"
-            tag="span"
-            path="{moderator} has unsuspended profile {profile}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                slot="profile"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
+                >{{ displayNameAndUsername(log.object) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.ACTOR_UNSUSPENSION"
+              tag="span"
+              path="{moderator} has unsuspended profile {profile}"
             >
-            <router-link
-              slot="profile"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
-              >{{ displayNameAndUsername(log.object) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.USER_DELETION"
-            tag="span"
-            path="{moderator} has deleted user {user}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                slot="profile"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
+                >{{ displayNameAndUsername(log.object) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.USER_DELETION"
+              tag="span"
+              path="{moderator} has deleted user {user}"
             >
-            <router-link
-              v-if="log.object.confirmedAt"
-              slot="user"
-              :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: log.object.id } }"
-              >{{ log.object.email }}
-            </router-link>
-            <b v-else slot="user">{{ log.object.email }}</b>
-          </i18n>
-          <br />
-          <small>{{ log.insertedAt | formatDateTimeString }}</small>
-        </div>
-      </li>
-    </ul>
-    <div v-else>
-      <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
-    </div>
-  </section>
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                v-if="log.object.confirmedAt"
+                slot="user"
+                :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: log.object.id } }"
+                >{{ log.object.email }}
+              </router-link>
+              <b v-else slot="user">{{ log.object.email }}</b>
+            </i18n>
+            <br />
+            <small>{{ log.insertedAt | formatDateTimeString }}</small>
+          </div>
+        </li>
+      </ul>
+      <div v-else>
+        <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
+      </div>
+    </section>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";