Add Osmose translations link to details footer

Improves structure of the details UI and introduces the use of flexboxes
for this. Does not break UI for other error services with shared classes.

css/80_app.css

@@ -2734,18 +2734,19 @@ input.key-trap {
     padding-top: 20px;
 }
 
-.error-details {
-    padding: 10px;
-}
 .error-details-container {
     background: #ececec;
     padding: 10px;
     margin-top: 20px;
     border-radius: 4px;
     border: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
 }
 .error-details-description {
     margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
 }
 .error-details-description-text::first-letter {
     text-transform: capitalize;
@@ -2755,7 +2756,7 @@ input.key-trap {
 }
 .error-details-subsection h4 {
     padding-top: 10px;
-    padding-bottom: 0px;
+    padding-bottom: 0;
 }
 .error-details code {
     padding: .2em .4em;
@@ -2765,6 +2766,12 @@ input.key-trap {
     background-color: rgba(27,31,35,.05);
     border-radius: 3px;
 }
+.error-details .translation-link {
+    margin-top: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
 
 .note-save .new-comment-input,
 .error-save .new-comment-input {

data/core.yaml

@@ -833,6 +833,7 @@ en:
       elems_title: Issue Elements
       fix_title: Fix Guidelines
       trap_title: Common Mistakes
+      translation: Translations supplied by Osmose
     improveOSM:
       title: ImproveOSM Detection
       geometry_types:

dist/locales/en.json

@@ -1036,7 +1036,8 @@
                 "detail_title": "Issue Details",
                 "elems_title": "Issue Elements",
                 "fix_title": "Fix Guidelines",
-                "trap_title": "Common Mistakes"
+                "trap_title": "Common Mistakes",
+                "translation": "Translations supplied by Osmose"
             },
             "improveOSM": {
                 "title": "ImproveOSM Detection",

modules/ui/osmose_details.js

@@ -40,7 +40,7 @@ export function uiOsmoseDetails(context) {
 
         var descriptionEnter = detailsEnter
             .append('div')
-            .attr('class', 'error-details-description');
+            .attr('class', 'error-details-subsection');
 
         // Description
         descriptionEnter
@@ -53,22 +53,22 @@ export function uiOsmoseDetails(context) {
             .html(d => issueString(d, 'detail'));
 
         // Elements (populated later as data is requested)
-        const detailsDiv = descriptionEnter
+        const detailsDiv = detailsEnter
             .append('div')
             .attr('class', 'error-details-subsection');
 
-        const elemsDiv = descriptionEnter
+        const elemsDiv = detailsEnter
             .append('div')
             .attr('class', 'error-details-subsection');
 
         // Suggested Fix (musn't exist for every issue type)
         if (issueString(_error, 'fix') !== unknown) {
-            let div = descriptionEnter
+            let div = detailsEnter
                 .append('div')
-                .attr('class', 'error-details-subsection')
+                .attr('class', 'error-details-subsection');
 
             div.append('h4')
-                .text(() => t('QA.osmose.fix_title'))
+                .text(() => t('QA.osmose.fix_title'));
 
             div.append('p')
                 .html(d => issueString(d, 'fix'));
@@ -76,17 +76,30 @@ export function uiOsmoseDetails(context) {
 
         // Common Pitfalls (musn't exist for every issue type)
         if (issueString(_error, 'trap') !== unknown) {
-            let div = descriptionEnter
+            let div = detailsEnter
                 .append('div')
-                .attr('class', 'error-details-subsection')
+                .attr('class', 'error-details-subsection');
 
             div.append('h4')
-                .text(() => t('QA.osmose.trap_title'))
+                .text(() => t('QA.osmose.trap_title'));
 
             div.append('p')
                 .html(d => issueString(d, 'trap'));
         }
 
+        detailsEnter
+            .append('div')
+            .attr('class', 'translation-link')
+            .append('a')
+            .attr('target', '_blank')
+            .attr('rel', 'noopener noreferrer') // security measure
+            .attr('href', 'https://www.transifex.com/openstreetmap-france/osmose')
+            .text(d => t('QA.osmose.translation'))
+            .append('svg')
+            .attr('class', 'icon inline')
+            .append('use')
+            .attr('href', '#iD-icon-out-link');
+
         services.osmose.loadErrorDetail(_error, (err, d) => {
             // No details to add if there are no associated issue elements
             if (!d.elems || d.elems.length === 0) return;
@@ -96,7 +109,7 @@ export function uiOsmoseDetails(context) {
                 detailsDiv
                     .append('h4')
                     .attr('class', 'error-details-subtitle')
-                    .text(() => t('QA.osmose.detail_title'))
+                    .text(() => t('QA.osmose.detail_title'));
 
                 detailsDiv
                     .append('p')