Responsive improvements
This commit is contained in:
parent
d4f7f4a684
commit
8de6a218f5
@ -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>
|
@ -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'),
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
/*******************
|
||||
|
Loading…
Reference in New Issue
Block a user