Expand/contract extended description

css/80_app.css

@@ -412,7 +412,7 @@ li.hide {
 
 button {
     text-align: center;
-    line-height:20px;
+    line-height: 20px;
     border:0;
     background: white;
     font-weight: bold;
@@ -3613,6 +3613,7 @@ img.tile-debug {
 .save-success h3 {
     font-size: 14px;
     margin-top: 15px;
+    line-height: 1.5;
     padding-bottom: 0;
 }
 .save-success td {
@@ -3628,8 +3629,8 @@ img.tile-debug {
     padding-bottom: 20px;
 }
 
-.summary-detail-view,
-.community-detail-name {
+.summary-view-on-osm,
+.community-name {
     font-size: 14px;
     font-weight: bold;
 }
@@ -3638,6 +3639,20 @@ img.tile-debug {
     white-space: nowrap;
 }
 
+.community-detail a.hide-toggle,
+.community-detail a:visited.hide-toggle {
+    font-size: 12px;
+    font-weight: normal;
+}
+.community-detail .hide-toggle svg.icon.pre-text {
+    width: 12px;
+    height: 15px;
+}
+.community-detail .disclosure-wrap .community-extended-description {
+    background-color: #efefef;
+    padding: 8px;
+    border-radius: 4px;
+}
 
 /* Splash Modal
 ------------------------------------------------------- */

data/core.yaml

@@ -536,6 +536,7 @@ en:
     view_on_osm: "View Changes on OSM"
     changeset_id: "Changeset #: {changeset_id}"
     like_osm: "Like OpenStreetMap? Connect with others:"
+    more: More
   confirm:
     okay: "OK"
     cancel: "Cancel"

dist/locales/en.json

@@ -652,7 +652,8 @@
             "help_link_url": "https://wiki.openstreetmap.org/wiki/FAQ#I_have_just_made_some_changes_to_the_map._How_do_I_get_to_see_my_changes.3F",
             "view_on_osm": "View Changes on OSM",
             "changeset_id": "Changeset #: {changeset_id}",
-            "like_osm": "Like OpenStreetMap? Connect with others:"
+            "like_osm": "Like OpenStreetMap? Connect with others:",
+            "more": "More"
         },
         "confirm": {
             "okay": "OK",

modules/ui/success.js

@@ -6,6 +6,7 @@ import { select as d3_select } from 'd3-selection';
 import { t } from '../util/locale';
 import { data } from '../../data';
 import { svgIcon } from '../svg';
+import { uiDisclosure } from '../ui';
 import { utilRebind } from '../util/rebind';
 
 
@@ -84,7 +85,7 @@ export function uiSuccess(context) {
 
         summaryDetail
             .append('a')
-            .attr('class', 'cell-detail summary-detail-view')
+            .attr('class', 'cell-detail summary-view-on-osm')
             .attr('target', '_blank')
             .attr('href', changesetURL)
             .text(t('success.view_on_osm'));
@@ -153,21 +154,30 @@ export function uiSuccess(context) {
 
             selection
                 .append('div')
-                .attr('class', 'community-detail-name')
+                .attr('class', 'community-name')
                 .append('a')
                 .attr('target', '_blank')
                 .attr('href', d.url)
                 .text(t('community.' + d.id + '.name'));
 
-            selection
+            var description = selection
                 .append('div')
-                .attr('class', 'community-detail-description')
+                .attr('class', 'community-description')
                 .html(t('community.' + d.id + '.description', replacements));
 
             if (d.extendedDescription) {
                 selection
                     .append('div')
-                    .attr('class', 'community-detail-extendedDescription')
+                    .call(uiDisclosure(context, 'community-ext-' + d.id, false)
+                        .title(t('success.more'))
+                        .content(extendedDescription)
+                    );
+            }
+
+            function extendedDescription(selection) {
+                selection
+                    .append('div')
+                    .attr('class', 'community-extended-description')
                     .html(t('community.' + d.id + '.extendedDescription', replacements));
             }