Responsive improvements

This commit is contained in:
James Lyne 2020-12-20 14:45:04 +00:00
parent d4f7f4a684
commit 8de6a218f5
4 changed files with 83 additions and 1 deletions

View File

@ -112,6 +112,20 @@ export default defineComponent({
margin-left: 1rem;
}
}
@media (max-width: 30rem) {
flex-direction: column;
align-items: flex-end;
margin: 0;
position: absolute;
right: 0.5rem;
top: 0.5rem;
button + button {
margin-left: 0;
margin-top: 1rem;
}
}
}
.sidebar__section {
@ -137,5 +151,18 @@ export default defineComponent({
will-change: transform;
}
}
@media (max-width: 30rem), (max-height: 30rem) {
padding: 0.5rem;
}
@media (max-width: 30rem) {
padding-right: 6.5rem;
}
@media (max-width: 20rem) {
box-sizing: border-box;
width: 100%;
}
}
</style>

View File

@ -17,7 +17,7 @@
* limitations under the License.
*/
import {Util, Control, DomEvent, LeafletEvent, Map, Layer} from 'leaflet';
import {Util, Control, DomEvent, LeafletEvent, Map, Layer, DomUtil} from 'leaflet';
import layers from '@/assets/icons/layers.svg';
import LayersObject = Control.LayersObject;
import LayersOptions = Control.LayersOptions;
@ -53,6 +53,15 @@ export class DynmapLayerControl extends Control.Layers {
return !!super._getLayer(Util.stamp(layer));
}
expand() {
// @ts-ignore
DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
// @ts-ignore
super._checkDisabledLayers();
return this;
}
_addItem(obj: any) {
const container = obj.overlay ? this._overlaysList : this._baseLayersList,
item = document.createElement('label'),

View File

@ -102,6 +102,18 @@
margin-left: 2rem;
}
}
@media (max-width: 37.5rem) {
.region {
display: none;
}
}
@media (max-width: 24rem) {
.chunk {
display: none;
}
}
}
.leaflet-control-layers {
@ -115,6 +127,9 @@
.leaflet-control-layers-list {
padding: 0.7rem 1.5rem;
height: 100%;
box-sizing: border-box;
overflow: auto;
.layer {
cursor: pointer;
@ -126,6 +141,7 @@
.leaflet-control-logo {
width: 5rem;
height: 5rem;
flex-shrink: 0;
a {
height: 100%;
@ -147,6 +163,10 @@
.leaflet-control {
margin: 0;
}
@media (max-width: 25rem), (max-height: 30rem) {
padding-left: 0.5rem;
}
}
.leaflet-top {
@ -190,6 +210,23 @@
margin-top: auto;
order: 1000;
}
.leaflet-control-zoom {
flex-shrink: 0;
@media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) {
display: none;
& + .leaflet-control {
margin-top: 0;
}
}
}
@media (max-width: 25rem), (max-height: 30rem) {
padding-top: 0.5rem;
bottom: 6.5rem;
}
}
.leaflet-bottom {
@ -199,6 +236,10 @@
&.leaflet-left .leaflet-control + .leaflet-control {
margin-left: 1rem;
}
@media (max-width: 25rem), (max-height: 30rem) {
padding-bottom: 0.5rem;
}
}
.leaflet-center {

View File

@ -276,6 +276,11 @@ button {
font-size: 3rem;
}
}
@media (max-width: 30rem), (max-height: 30rem) {
transform: scale(calc((1/6)*5));
transform-origin: top center
}
}
/*******************