diff --git a/package-lock.json b/package-lock.json index 6a1a263f2..7ae565e4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14301,9 +14301,9 @@ } }, "mapbox-gl": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.11.1.tgz", - "integrity": "sha512-UjXpPUTUzHTLfhl5dLefwV3Jgu7DN9phpn8RnnkQVe1sOXfVYMS5Vhjn225krhzRc7xnKIBHxLyu0rHZGyeXuQ==", + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.0.tgz", + "integrity": "sha512-g8zlzuJxYJqbOPXT19/UBYpVrcefBQ06F/Cbj0fyEfFnFesDcU3cFTxd75/FZ6Upx2ZEjCsD61CHxrcxZidVpA==", "dev": true, "requires": { "@mapbox/geojson-rewind": "^0.5.0", @@ -14341,18 +14341,6 @@ "minimist": "^1.2.5" } }, - "@mapbox/mapbox-gl-supported": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz", - "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==", - "dev": true - }, - "@mapbox/tiny-sdf": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz", - "integrity": "sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg==", - "dev": true - }, "concat-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz", @@ -14365,12 +14353,6 @@ "typedarray": "^0.0.6" } }, - "earcut": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz", - "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==", - "dev": true - }, "minimist": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", diff --git a/package.json b/package.json index 131c86596..ed72aed04 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "jest": "^25.2.0", "jest-extended": "^0.11.2", "json-loader": "0.5.7", - "mapbox-gl": "^1.11.1", + "mapbox-gl": "^1.13.0", "mapbox-gl-js-mock": "https://github.com/QwantResearch/mapbox-gl-js-mock.git#7eaee7b", "node-sass": "^4.14.1", "postcss-import": "12.0.0", diff --git a/src/scss/includes/app.scss b/src/scss/includes/app.scss index 02cf2506b..452db271e 100644 --- a/src/scss/includes/app.scss +++ b/src/scss/includes/app.scss @@ -49,15 +49,6 @@ noscript { height: 100%; max-height: none; } - - .map_container .map_control__scale_attribute_container { - .mapboxgl-ctrl.map_control__scale { - position: fixed; - left: 32px; - bottom: 8px; - margin: 0; - } - } } .map_container .marker-container { diff --git a/src/scss/includes/map_theme.scss b/src/scss/includes/map_theme.scss index b2e4bb451..f7a3f1661 100644 --- a/src/scss/includes/map_theme.scss +++ b/src/scss/includes/map_theme.scss @@ -1,3 +1,8 @@ +.mapboxgl-ctrl-top-left, +.mapboxgl-ctrl-top-right, +.mapboxgl-ctrl-bottom-left, +.mapboxgl-ctrl-bottom-right { position:absolute; pointer-events:none; } + .map_control_group { margin: 0 10px 5px 0; float: right; @@ -104,8 +109,34 @@ } @media(max-width: 640px) { - .map_control__scale_attribute_container{ - .mapboxgl-ctrl.mapboxgl-ctrl-attrib, .mapboxgl-ctrl.map_control__scale { + .map_control__scale_attribute_container { + .mapboxgl-ctrl-attrib { + position: fixed; + bottom: 2px; + left: 4px; + + .mapboxgl-ctrl-attrib-button { + top: auto; + right: auto; + bottom: 0; + left: 0; + } + + &.mapboxgl-compact-show { + background: rgba(255, 255, 255, 0.9); + padding: 2px 8px 2px 28px; + + .mapboxgl-ctrl-attrib-button { + background-color: transparent; + } + } + } + + .map_control__scale { + position: fixed; + left: 32px; + bottom: 4px; + margin: 0; background: rgba(255, 255, 255, 0.9); } } @@ -145,10 +176,6 @@ } } - .map_control__scale_attribute_container { - background: none; - } - .map_control_group { .map_control_group__button__zoom { display: none; @@ -184,25 +211,6 @@ .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl, .mapboxgl-ctrl.mapboxgl-ctrl-attrib { float: inherit; } - - .mapboxgl-ctrl-attrib.mapboxgl-compact{ - margin: 0; - padding: 0; - border-radius: 12px; - - &::after { - position: absolute; - bottom: 0; - left: 0; - display: inline-block; - vertical-align: middle; - } - - &:hover { - padding: 2px 4px 2px 24px; - } - } - } .compass-origin { diff --git a/src/scss/includes/mapbox-gl-override.scss b/src/scss/includes/mapbox-gl-override.scss deleted file mode 100644 index 646eef2af..000000000 --- a/src/scss/includes/mapbox-gl-override.scss +++ /dev/null @@ -1,12 +0,0 @@ -.mapboxgl-ctrl-top-left, -.mapboxgl-ctrl-top-right, -.mapboxgl-ctrl-bottom-left, -.mapboxgl-ctrl-bottom-right { position:absolute; pointer-events:none; } - -@media (max-width: 640px) { - .map_container .map_control__scale_attribute_container .mapboxgl-ctrl-attrib { - position: fixed; - bottom: 2px; - left: 2px; - } -} diff --git a/src/scss/main.scss b/src/scss/main.scss index a6fac5a38..cc3db20b6 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -9,7 +9,6 @@ $font_system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetic @import "includes/menu"; @import "includes/reset"; @import "./../../node_modules/mapbox-gl/dist/mapbox-gl.css"; -@import "includes/mapbox-gl-override.scss"; @import "includes/popup"; @import "includes/app";