From f5052149d145416805403e0c9d7c843692b51d55 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 24 Sep 2021 13:10:31 +0000 Subject: [PATCH] Updated styles --- examples/resources/layout.css | 8 +++++--- src/ol/control/Attribution.js | 4 ++-- src/ol/control/OverviewMap.js | 8 ++++---- src/ol/control/Zoom.js | 4 ++-- src/ol/ol.css | 11 ++++++++--- 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/examples/resources/layout.css b/examples/resources/layout.css index 1532574dd3..a9611d3547 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -122,13 +122,15 @@ ol.inline>li { background: url(map-background.jpg) repeat; margin-bottom: 10px; } + +.ol-control { + line-height: normal; +} + .ol-attribution.ol-logo-only, .ol-attribution.ol-uncollapsible { max-width: calc(100% - 3em); } -.ol-attribution ul { - font-size: 14px; -} .iframe-info iframe { width: 100%; } diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index 9803d5f619..1ab49c7d36 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -25,7 +25,7 @@ import {removeChildren, replaceNode} from '../dom.js'; * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [expandClassName=className + '-expand'] CSS class name for the * collapsed attributions button. - * @property {string|HTMLElement} [collapseLabel='»'] Text label to use + * @property {string|HTMLElement} [collapseLabel='›'] Text label to use * for the expanded attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [collapseClassName=className + '-collapse'] CSS class name for the @@ -105,7 +105,7 @@ class Attribution extends Control { : className + '-expand'; const collapseLabel = - options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; + options.collapseLabel !== undefined ? options.collapseLabel : '\u203A'; const collapseClassName = options.collapseClassName !== undefined diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index 454076deea..4de309c8e0 100644 --- a/src/ol/control/OverviewMap.js +++ b/src/ol/control/OverviewMap.js @@ -48,10 +48,10 @@ class ControlledMap extends PluggableMap { * @typedef {Object} Options * @property {string} [className='ol-overviewmap'] CSS class name. * @property {boolean} [collapsed=true] Whether the control should start collapsed or not (expanded). - * @property {string|HTMLElement} [collapseLabel='«'] Text label to use for the + * @property {string|HTMLElement} [collapseLabel='‹'] Text label to use for the * expanded overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used. * @property {boolean} [collapsible=true] Whether the control can be collapsed or not. - * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed + * @property {string|HTMLElement} [label='›'] Text label to use for the collapsed * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used. * @property {Array|import("../Collection.js").default} [layers] * Layers for the overview map. @@ -127,7 +127,7 @@ class OverviewMap extends Control { options.tipLabel !== undefined ? options.tipLabel : 'Overview map'; const collapseLabel = - options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB'; + options.collapseLabel !== undefined ? options.collapseLabel : '\u2039'; if (typeof collapseLabel === 'string') { /** @@ -140,7 +140,7 @@ class OverviewMap extends Control { this.collapseLabel_ = collapseLabel; } - const label = options.label !== undefined ? options.label : '\u00BB'; + const label = options.label !== undefined ? options.label : '\u203A'; if (typeof label === 'string') { /** diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index a8dff2825b..e85231e252 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -14,7 +14,7 @@ import {easeOut} from '../easing.js'; * @property {string} [zoomOutClassName=className + '-out'] CSS class name for the zoom-out button. * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in * button. Instead of text, also an element (e.g. a `span` element) can be used. - * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button. + * @property {string|HTMLElement} [zoomOutLabel='–'] Text label to use for the zoom-out button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [zoomInTipLabel='Zoom in'] Text label to use for the button tip. * @property {string} [zoomOutTipLabel='Zoom out'] Text label to use for the button tip. @@ -61,7 +61,7 @@ class Zoom extends Control { const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; const zoomOutLabel = - options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212'; + options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2013'; const zoomInTipLabel = options.zoomInTipLabel !== undefined ? options.zoomInTipLabel : 'Zoom in'; diff --git a/src/ol/ol.css b/src/ol/ol.css index 0e5d3e2768..4eee268df1 100644 --- a/src/ol/ol.css +++ b/src/ol/ol.css @@ -1,7 +1,8 @@ .ol-box { box-sizing: border-box; border-radius: 2px; - border: 2px solid blue; + border: 1.5px solid rgb(179,197,219); + background-color: rgba(255,255,255,0.4); } .ol-mouse-position { @@ -130,7 +131,6 @@ margin: 1px; padding: 0; color: white; - font-size: 1.14em; font-weight: bold; text-decoration: none; text-align: center; @@ -180,13 +180,18 @@ max-width: calc(100% - 1.3em); display: flex; flex-flow: row-reverse; - align-items: flex-end; + align-items: center; +} +.ol-attribution a { + color: rgba(0,60,136,0.7); + text-decoration: none; } .ol-attribution ul { margin: 0; padding: 1px .5em; color: #000; text-shadow: 0 0 2px #fff; + font-size: 12px; } .ol-attribution li { display: inline;