Merge pull request #7979 from openstreetmap/dynamic-text-sizes-7965

Make the UI scalable for text-only browser zoom

css/00_reset.css

@@ -67,13 +67,17 @@ textarea {
 
 button,
 input {
-    line-height: normal;
+    line-height: inherit;
+	letter-spacing: inherit;
 }
 
 /* Hide default number spinner controls */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-display: none;
+	display: none;
+}
+input[type=number] {
+    -moz-appearance: textfield;
 }
 
 /*

modules/ui/feature_list.js

@@ -41,6 +41,9 @@ export function uiFeatureList(context) {
             .append('div')
             .attr('class', 'search-header');
 
+        searchWrap
+            .call(svgIcon('#iD-icon-search', 'pre-text'));
+
         var search = searchWrap
             .append('input')
             .attr('placeholder', t('inspector.search'))
@@ -50,9 +53,6 @@ export function uiFeatureList(context) {
             .on('keydown', keydown)
             .on('input', inputevent);
 
-        searchWrap
-            .call(svgIcon('#iD-icon-search', 'pre-text'));
-
         var listWrap = selection
             .append('div')
             .attr('class', 'inspector-body');

modules/ui/field_help.js

@@ -57,13 +57,13 @@ export function uiFieldHelp(context, fieldName) {
     var replacements = {
         distField: t('restriction.controls.distance'),
         viaField: t('restriction.controls.via'),
-        fromShadow: icon('#iD-turn-shadow', 'pre-text shadow from'),
-        allowShadow: icon('#iD-turn-shadow', 'pre-text shadow allow'),
-        restrictShadow: icon('#iD-turn-shadow', 'pre-text shadow restrict'),
-        onlyShadow: icon('#iD-turn-shadow', 'pre-text shadow only'),
-        allowTurn: icon('#iD-turn-yes', 'pre-text turn'),
-        restrictTurn: icon('#iD-turn-no', 'pre-text turn'),
-        onlyTurn: icon('#iD-turn-only', 'pre-text turn')
+        fromShadow: icon('#iD-turn-shadow', 'inline shadow from'),
+        allowShadow: icon('#iD-turn-shadow', 'inline shadow allow'),
+        restrictShadow: icon('#iD-turn-shadow', 'inline shadow restrict'),
+        onlyShadow: icon('#iD-turn-shadow', 'inline shadow only'),
+        allowTurn: icon('#iD-turn-yes', 'inline turn'),
+        restrictTurn: icon('#iD-turn-no', 'inline turn'),
+        onlyTurn: icon('#iD-turn-only', 'inline turn')
     };
 
 

modules/ui/fields/check.js

@@ -114,7 +114,7 @@ export function uiFieldCheck(field, context) {
         if (field.type === 'onewayCheck') {
             enter
                 .append('a')
-                .attr('class', 'reverser button' + (reverserHidden() ? ' hide' : ''))
+                .attr('class', 'reverser' + (reverserHidden() ? ' hide' : ''))
                 .attr('href', '#')
                 .append('span')
                 .attr('class', 'reverser-span');

modules/ui/init.js

@@ -157,22 +157,88 @@ export function uiInit(context) {
             .attr('dir', 'ltr')
             .call(map);
 
-        content
+        var overMap = content
+            .append('div')
+            .attr('class', 'over-map');
+
+        overMap
             .append('div')
             .attr('class', 'spinner')
             .call(uiSpinner(context));
 
-        // Add attribution and footer
-        var about = content
-            .append('div')
-            .attr('class', 'map-footer');
-
-        about
+        overMap
             .append('div')
             .attr('class', 'attribution-wrap')
             .attr('dir', 'ltr')
             .call(uiAttribution(context));
 
+        // Map controls
+        var controls = overMap
+            .append('div')
+            .attr('class', 'map-controls');
+
+        controls
+            .append('div')
+            .attr('class', 'map-control zoombuttons')
+            .call(uiZoom(context));
+
+        controls
+            .append('div')
+            .attr('class', 'map-control zoom-to-selection-control')
+            .call(uiZoomToSelection(context));
+
+        controls
+            .append('div')
+            .attr('class', 'map-control geolocate-control')
+            .call(uiGeolocate(context));
+
+        // Add panes
+        // This should happen after map is initialized, as some require surface()
+        var panes = overMap
+            .append('div')
+            .attr('class', 'map-panes');
+
+        var uiPanes = [
+            uiPaneBackground(context),
+            uiPaneMapData(context),
+            uiPaneIssues(context),
+            uiPanePreferences(context),
+            uiPaneHelp(context)
+        ];
+
+        uiPanes.forEach(function(pane) {
+            controls
+                .append('div')
+                .attr('class', 'map-control map-pane-control ' + pane.id + '-control')
+                .call(pane.renderToggleButton);
+
+            panes
+                .call(pane.renderPane);
+        });
+
+        ui.info = uiInfo(context);
+
+        // Add absolutely-positioned elements that sit on top of the map
+        // This should happen after the map is ready (center/zoom)
+        overMap
+            .call(uiMapInMap(context))
+            .call(ui.info)
+            .call(uiNotice(context));
+
+
+        overMap
+            .append('div')
+            .attr('class', 'photoviewer')
+            .classed('al', true)       // 'al'=left,  'ar'=right
+            .classed('hide', true)
+            .call(ui.photoviewer);
+
+
+        // Add footer
+        var about = content
+            .append('div')
+            .attr('class', 'map-footer');
+
         about
             .append('div')
             .attr('class', 'api-status')
@@ -270,73 +336,6 @@ export function uiInit(context) {
             map.centerZoom([0, 0], 2);
         }
 
-
-        var overMap = content
-            .append('div')
-            .attr('class', 'over-map');
-
-        // Map controls
-        var controls = overMap
-            .append('div')
-            .attr('class', 'map-controls');
-
-        controls
-            .append('div')
-            .attr('class', 'map-control zoombuttons')
-            .call(uiZoom(context));
-
-        controls
-            .append('div')
-            .attr('class', 'map-control zoom-to-selection-control')
-            .call(uiZoomToSelection(context));
-
-        controls
-            .append('div')
-            .attr('class', 'map-control geolocate-control')
-            .call(uiGeolocate(context));
-
-        // Add panes
-        // This should happen after map is initialized, as some require surface()
-        var panes = overMap
-            .append('div')
-            .attr('class', 'map-panes');
-
-        var uiPanes = [
-            uiPaneBackground(context),
-            uiPaneMapData(context),
-            uiPaneIssues(context),
-            uiPanePreferences(context),
-            uiPaneHelp(context)
-        ];
-
-        uiPanes.forEach(function(pane) {
-            controls
-                .append('div')
-                .attr('class', 'map-control map-pane-control ' + pane.id + '-control')
-                .call(pane.renderToggleButton);
-
-            panes
-                .call(pane.renderPane);
-        });
-
-        ui.info = uiInfo(context);
-
-        // Add absolutely-positioned elements that sit on top of the map
-        // This should happen after the map is ready (center/zoom)
-        overMap
-            .call(uiMapInMap(context))
-            .call(ui.info)
-            .call(uiNotice(context));
-
-
-        overMap
-            .append('div')
-            .attr('class', 'photoviewer')
-            .classed('al', true)       // 'al'=left,  'ar'=right
-            .classed('hide', true)
-            .call(ui.photoviewer);
-
-
         // Bind events
         window.onbeforeunload = function() {
             return context.save();
@@ -553,19 +552,21 @@ export function uiInit(context) {
     };
 
     ui.togglePanes = function(showPane) {
-        var shownPanes = context.container().selectAll('.map-pane.shown');
+        var hidePanes = context.container().selectAll('.map-pane.shown');
 
         var side = localizer.textDirection() === 'ltr' ? 'right' : 'left';
 
-        shownPanes
-            .classed('shown', false);
+        hidePanes
+            .classed('shown', false)
+            .classed('hide', true);
 
         context.container().selectAll('.map-pane-control button')
             .classed('active', false);
 
         if (showPane) {
-            shownPanes
-                .style('display', 'none')
+            hidePanes
+                .classed('shown', false)
+                .classed('hide', true)
                 .style(side, '-500px');
 
             context.container().selectAll('.' + showPane.attr('pane') + '-control button')
@@ -573,10 +574,9 @@ export function uiInit(context) {
 
             showPane
                 .classed('shown', true)
-                .style('display', 'block');
-            if (shownPanes.empty()) {
+                .classed('hide', false);
+            if (hidePanes.empty()) {
                 showPane
-                    .style('display', 'block')
                     .style(side, '-500px')
                     .transition()
                     .duration(200)
@@ -586,14 +586,17 @@ export function uiInit(context) {
                     .style(side, '0px');
             }
         } else {
-            shownPanes
-                .style('display', 'block')
+            hidePanes
+                .classed('shown', true)
+                .classed('hide', false)
                 .style(side, '0px')
                 .transition()
                 .duration(200)
                 .style(side, '-500px')
                 .on('end', function() {
-                    d3_select(this).style('display', 'none');
+                    d3_select(this)
+                        .classed('shown', false)
+                        .classed('hide', true);
                 });
         }
     };

modules/ui/intro/area.js

@@ -436,7 +436,7 @@ export function uiIntroArea(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'pre-text') }),
+            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'inline') }),
             { duration: 300 }
         );
 

modules/ui/intro/building.js

@@ -300,7 +300,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
+                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 
@@ -628,7 +628,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
+                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 

modules/ui/intro/helper.js

@@ -51,34 +51,34 @@ export function helpString(id, replacements) {
     // only load these the first time
     if (!helpStringReplacements) helpStringReplacements = {
         // insert icons corresponding to various UI elements
-        point_icon: icon('#iD-icon-point', 'pre-text'),
-        line_icon: icon('#iD-icon-line', 'pre-text'),
-        area_icon: icon('#iD-icon-area', 'pre-text'),
-        note_icon: icon('#iD-icon-note', 'pre-text add-note'),
-        plus: icon('#iD-icon-plus', 'pre-text'),
-        minus: icon('#iD-icon-minus', 'pre-text'),
-        move_icon: icon('#iD-operation-move', 'pre-text operation'),
-        merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
-        delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
-        circularize_icon: icon('#iD-operation-circularize', 'pre-text operation'),
-        split_icon: icon('#iD-operation-split', 'pre-text operation'),
-        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
-        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
-        layers_icon: icon('#iD-icon-layers', 'pre-text'),
-        data_icon: icon('#iD-icon-data', 'pre-text'),
-        inspect: icon('#iD-icon-inspect', 'pre-text'),
-        help_icon: icon('#iD-icon-help', 'pre-text'),
-        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
-        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
-        save_icon: icon('#iD-icon-save', 'pre-text'),
-        leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
-        rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
-        mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'pre-text operation'),
-        tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
-        doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
-        longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
-        touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'pre-text operation'),
-        pinch_icon: icon('#iD-walkthrough-pinch-apart', 'pre-text operation'),
+        point_icon: icon('#iD-icon-point', 'inline'),
+        line_icon: icon('#iD-icon-line', 'inline'),
+        area_icon: icon('#iD-icon-area', 'inline'),
+        note_icon: icon('#iD-icon-note', 'inline add-note'),
+        plus: icon('#iD-icon-plus', 'inline'),
+        minus: icon('#iD-icon-minus', 'inline'),
+        move_icon: icon('#iD-operation-move', 'inline operation'),
+        merge_icon: icon('#iD-operation-merge', 'inline operation'),
+        delete_icon: icon('#iD-operation-delete', 'inline operation'),
+        circularize_icon: icon('#iD-operation-circularize', 'inline operation'),
+        split_icon: icon('#iD-operation-split', 'inline operation'),
+        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'inline operation'),
+        disconnect_icon: icon('#iD-operation-disconnect', 'inline operation'),
+        layers_icon: icon('#iD-icon-layers', 'inline'),
+        data_icon: icon('#iD-icon-data', 'inline'),
+        inspect: icon('#iD-icon-inspect', 'inline'),
+        help_icon: icon('#iD-icon-help', 'inline'),
+        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'inline'),
+        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'inline'),
+        save_icon: icon('#iD-icon-save', 'inline'),
+        leftclick: icon('#iD-walkthrough-mouse-left', 'inline operation'),
+        rightclick: icon('#iD-walkthrough-mouse-right', 'inline operation'),
+        mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'inline operation'),
+        tap_icon: icon('#iD-walkthrough-tap', 'inline operation'),
+        doubletap_icon: icon('#iD-walkthrough-doubletap', 'inline operation'),
+        longpress_icon: icon('#iD-walkthrough-longpress', 'inline operation'),
+        touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'inline operation'),
+        pinch_icon: icon('#iD-walkthrough-pinch-apart', 'inline operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),

modules/ui/intro/line.js

@@ -338,7 +338,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'pre-text') }),
+                helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'inline') }),
                 { tooltipClass: 'intro-lines-name_road' }
             );
         }, 500);

modules/ui/intro/navigation.js

@@ -356,7 +356,7 @@ export function uiIntroNavigation(context, reveal) {
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
-            helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') })
+            helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') })
         );
 
         context.on('exit.intro', function() {
@@ -369,7 +369,7 @@ export function uiIntroNavigation(context, reveal) {
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',
-                helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
+                helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') }),
                 { duration: 0 }
             );
         });
@@ -493,7 +493,7 @@ export function uiIntroNavigation(context, reveal) {
 
         reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
             helpString('intro.navigation.editor_street', {
-                button: icon(href, 'pre-text'),
+                button: icon(href, 'inline'),
                 field1: onewayField.label(),
                 field2: maxspeedField.label()
             }));
@@ -509,7 +509,7 @@ export function uiIntroNavigation(context, reveal) {
 
             reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
                 helpString('intro.navigation.editor_street', {
-                    button: icon(href, 'pre-text'),
+                    button: icon(href, 'inline'),
                     field1: onewayField.label(),
                     field2: maxspeedField.label()
                 }), { duration: 0 }

modules/ui/intro/point.js

@@ -254,7 +254,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.points.add_close', { button: icon(href, 'pre-text') })
+            helpString('intro.points.add_close', { button: icon(href, 'inline') })
         );
 
         function continueTo(nextStep) {
@@ -351,7 +351,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'pre-text') })
+                helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 

modules/ui/preset_list.js

@@ -117,6 +117,9 @@ export function uiPresetList(context) {
             .append('div')
             .attr('class', 'search-header');
 
+        searchWrap
+            .call(svgIcon('#iD-icon-search', 'pre-text'));
+
         var search = searchWrap
             .append('input')
             .attr('class', 'preset-search-input')
@@ -127,9 +130,6 @@ export function uiPresetList(context) {
             .on('keypress', keypress)
             .on('input', inputevent);
 
-        searchWrap
-            .call(svgIcon('#iD-icon-search', 'pre-text'));
-
         if (_autofocus) {
             search.node().focus();
         }

modules/ui/scale.js

@@ -53,10 +53,8 @@ export function uiScale(context) {
         selection.select('.scale-path')
             .attr('d', 'M0.5,0.5v' + tickHeight + 'h' + scale.px + 'v-' + tickHeight);
 
-        selection.select('.scale-textgroup')
-            .attr('transform', 'translate(' + (scale.px + 8) + ',' + tickHeight + ')');
-
         selection.select('.scale-text')
+            .style(localizer.textDirection() === 'ltr' ? 'left' : 'right', (scale.px + 16) + 'px')
             .text(scale.text);
     }
 
@@ -77,10 +75,8 @@ export function uiScale(context) {
             .append('path')
             .attr('class', 'scale-path');
 
-        scalegroup
-            .append('g')
-            .attr('class', 'scale-textgroup')
-            .append('text')
+        selection
+            .append('div')
             .attr('class', 'scale-text');
 
         selection.call(update);

modules/ui/sections/background_offset.js

@@ -172,9 +172,10 @@ export function uiSectionBackgroundOffset(context) {
             .append('div')
             .attr('class', 'nudge-inner-rect')
             .append('input')
+            .attr('type', 'text')
             .on('change', inputOffset);
 
-        containerEnter
+        nudgeEnter
             .append('div')
             .selectAll('button')
             .data(_directions).enter()