Translated report dialog and improved popover

assets/styles/imports/_tooltip.scss

@@ -90,7 +90,7 @@
       color: $text-color-base;
       border-radius: $border-radius-base;
       padding: $space-x-small $space-small;
-      box-shadow: $box-shadow-large;
+      box-shadow: $box-shadow-x-large;
 
       nav {
         margin-left: -$space-small;
@@ -113,12 +113,12 @@
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .1s, visibility .1s;
+    transition: opacity 60ms;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .1s;
+    transition: opacity 60ms;
   }
 }

assets/styles/main.scss

@@ -139,7 +139,7 @@ hr {
   }
 }
 
-    #overlay {
+#overlay {
   display: block;
   opacity: 0;
   width: 100%;
@@ -156,5 +156,6 @@ hr {
   .dropdown-open & {
     opacity: 1;
     transition-delay: 0;
+    transition: opacity 80ms ease-out;
   }
 }

components/ReportModal.vue

@@ -8,7 +8,8 @@
     @confirm="report"
     @cancel="close"
   >
-    <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-html="$t(`report.${data.context}.message`, { name: name })" />
     <template
       slot="footer"
       slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
@@ -51,6 +52,9 @@ export default {
     title() {
       return this.$t(`report.${this.data.context}.title`)
     },
+    name() {
+      return this.$filters.truncate(this.data.name, 30)
+    },
     isOpen() {
       return this.$store.getters['modal/open'] === 'report'
     }

locales/de.json

@@ -101,13 +101,16 @@
     "submit": "Meldung senden",
     "cancel": "Abbrechen",
     "user": {
-      "title": "Nutzer melden"
+      "title": "Nutzer melden",
+      "message": "Bist du sicher, dass du den Nutzer \"<b>{name}</b>\" melden möchtest?"
     },
     "contribution": {
-      "title": "Beitrag melden"
+      "title": "Beitrag melden",
+      "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" melden möchtest?"
     },
     "comment": {
-      "title": "Kommentar melden"
+      "title": "Kommentar melden",
+      "message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" melden möchtest?"
     }
   },
   "quotes": {

locales/en.json

@@ -101,13 +101,16 @@
     "submit": "Send Report",
     "cancel": "Cancel",
     "user": {
-      "title": "Report User"
+      "title": "Report User",
+      "message": "Do you really want to report the user \"<b>{name}</b>\"?"
     },
     "contribution": {
-      "title": "Report Contribution"
+      "title": "Report Contribution",
+      "message": "Do you really want to report the contribution \"<b>{name}</b>\"?"
     },
     "comment": {
-      "title": "Report Comment"
+      "title": "Report Comment",
+      "message": "Do you really want to report the comment from \"<b>{name}</b>\"?"
     }
   },
   "quotes": {