From 377e99240f547920a34dd413862e17734626a539 Mon Sep 17 00:00:00 2001
From: SilentSpike <SilentSpike100+Github@gmail.com>
Date: Mon, 3 Feb 2020 21:04:43 +0000
Subject: [PATCH] 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               | 15 +++++++++++----
 data/core.yaml               |  1 +
 dist/locales/en.json         |  3 ++-
 modules/ui/osmose_details.js | 33 +++++++++++++++++++++++----------
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index b39b66cf3..323b262d0 100644
--- a/css/80_app.css
+++ b/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 {
diff --git a/data/core.yaml b/data/core.yaml
index e24586988..eb571850a 100644
--- a/data/core.yaml
+++ b/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:
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 907d91e51..15822daa3 100644
--- a/dist/locales/en.json
+++ b/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",
diff --git a/modules/ui/osmose_details.js b/modules/ui/osmose_details.js
index c91d51b08..7183810e5 100644
--- a/modules/ui/osmose_details.js
+++ b/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')