Enhance Map Zoom Control and Improve Map Page Layout
Some checks failed
build.yaml / Enhance Map Zoom Control and Improve Map Page Layout (push) Failing after 0s
Some checks failed
build.yaml / Enhance Map Zoom Control and Improve Map Page Layout (push) Failing after 0s
- Refactored zoom control component for better accessibility and styling. - Added hover effects and improved button states for zoom in/out buttons. - Updated map page layout with enhanced dataset card design and responsive styles. - Introduced empty state for no datasets found and improved results header. - Added icons for dataset cards and improved author display.
This commit is contained in:
parent
88e37bfee8
commit
4229001572
7 changed files with 1520 additions and 452 deletions
|
|
@ -1,14 +1,29 @@
|
|||
<template>
|
||||
<div ref="drawControl" class="gba-control-draw btn-group-vertical map-control">
|
||||
<!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
|
||||
<fa-icon [icon]="faSearchLocation"></fa-icon>
|
||||
</button> -->
|
||||
<!-- -->
|
||||
<button ref="inputDraw"
|
||||
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
|
||||
type="button" :class="[_enabled ? 'cursor-not-allowed bg-cyan-200' : 'bg-teal-50 is-active']"
|
||||
@click.prevent="toggleDraw">
|
||||
<BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
|
||||
<div class="draw-control-container">
|
||||
<button
|
||||
ref="drawButton"
|
||||
class="draw-button"
|
||||
:class="{ 'is-active': enabled }"
|
||||
type="button"
|
||||
@click.stop.prevent="toggleDraw"
|
||||
:aria-label="enabled ? 'Stop drawing' : 'Start drawing'"
|
||||
:aria-pressed="enabled"
|
||||
>
|
||||
<!-- Icon changes based on state -->
|
||||
<!-- <BaseIcon
|
||||
v-if="enabled"
|
||||
:path="mdiClose"
|
||||
:size="20"
|
||||
/> -->
|
||||
<BaseIcon
|
||||
:path="mdiVectorRectangle"
|
||||
:size="20"
|
||||
/>
|
||||
|
||||
<!-- Status indicator -->
|
||||
<!-- <span class="draw-status-badge" :class="{ 'is-active': enabled }">
|
||||
{{ enabled ? 'Active' : 'Draw' }}
|
||||
</span> -->
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,16 +32,14 @@
|
|||
import { Component, Vue, Prop } from 'vue-facing-decorator';
|
||||
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
import { mdiDrawPen } from '@mdi/js';
|
||||
import { mdiVectorRectangle, mdiClose } from '@mdi/js';
|
||||
import { MapService } from '@/Stores/map.service';
|
||||
import { Map } from 'leaflet/src/map/index';
|
||||
// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
|
||||
// import { LatLngBounds, Rectangle } from 'leaflet';
|
||||
import { Map } from 'leaflet';
|
||||
import { on, off, preventDefault } from 'leaflet/src/dom/DomEvent';
|
||||
import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
|
||||
import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
|
||||
|
||||
import { Rectangle } from 'leaflet';
|
||||
import { LatLngBounds } from 'leaflet';
|
||||
import { LatLng } from 'leaflet';
|
||||
import { LeafletMouseEvent } from 'leaflet';
|
||||
|
||||
@Component({
|
||||
name: 'draw-control',
|
||||
|
|
@ -34,19 +47,19 @@ import { LeafletMouseEvent } from 'leaflet';
|
|||
BaseIcon,
|
||||
},
|
||||
})
|
||||
export default class DrawControlComponent extends Vue {
|
||||
export class DrawControlComponent extends Vue {
|
||||
public TYPE = 'rectangle';
|
||||
mdiDrawPen = mdiDrawPen;
|
||||
// private featuresLayer;
|
||||
mdiVectorRectangle = mdiVectorRectangle;
|
||||
mdiClose = mdiClose;
|
||||
|
||||
options = {
|
||||
shapeOptions: {
|
||||
stroke: true,
|
||||
color: '#22C55E',
|
||||
color: '#65DC21',
|
||||
weight: 4,
|
||||
opacity: 0.5,
|
||||
fill: true,
|
||||
fillColor: '#22C55E', //same as color by default
|
||||
fillColor: '#65DC21',
|
||||
fillOpacity: 0.2,
|
||||
clickable: true,
|
||||
},
|
||||
|
|
@ -56,7 +69,6 @@ export default class DrawControlComponent extends Vue {
|
|||
};
|
||||
|
||||
@Prop() public mapId: string;
|
||||
// @Prop() public map: Map;
|
||||
@Prop public southWest: LatLng;
|
||||
@Prop public northEast: LatLng;
|
||||
@Prop({
|
||||
|
|
@ -65,13 +77,17 @@ export default class DrawControlComponent extends Vue {
|
|||
public preserve: boolean;
|
||||
|
||||
mapService = MapService();
|
||||
public _enabled: boolean;
|
||||
private _enabled: boolean;
|
||||
private _map: Map;
|
||||
private _isDrawing: boolean = false;
|
||||
private _startLatLng: LatLng;
|
||||
private _mapDraggable: boolean;
|
||||
private _shape: Rectangle | undefined;
|
||||
|
||||
get enabled() {
|
||||
return this._enabled;
|
||||
}
|
||||
|
||||
enable() {
|
||||
if (this._enabled) {
|
||||
return this;
|
||||
|
|
@ -93,49 +109,35 @@ export default class DrawControlComponent extends Vue {
|
|||
return this;
|
||||
}
|
||||
|
||||
enabled() {
|
||||
return !!this._enabled;
|
||||
}
|
||||
|
||||
// @Ref('inputDraw') private _inputDraw: HTMLElement;
|
||||
// enabled() {
|
||||
// return !!this._enabled;
|
||||
// }
|
||||
|
||||
private addHooks() {
|
||||
// L.Draw.Feature.prototype.addHooks.call(this);
|
||||
this._map = this.mapService.getMap(this.mapId);
|
||||
if (this._map) {
|
||||
this._mapDraggable = this._map.dragging.enabled();
|
||||
if (this._mapDraggable) {
|
||||
this._map.dragging.disable();
|
||||
}
|
||||
//TODO refactor: move cursor to styles
|
||||
// this._map.domElement.style.cursor = 'crosshair';
|
||||
this._map._container.style.cursor = 'crosshair';
|
||||
// this._tooltip.updateContent({text: this._initialLabelText});
|
||||
this._map.getContainer().style.cursor = 'crosshair';
|
||||
|
||||
this._map
|
||||
.on('mousedown', this._onMouseDown, this)
|
||||
.on('mousemove', this._onMouseMove, this)
|
||||
.on('touchstart', this._onMouseDown, this)
|
||||
.on('touchmove', this._onMouseMove, this);
|
||||
// we should prevent default, otherwise default behavior (scrolling) will fire,
|
||||
// and that will cause document.touchend to fire and will stop the drawing
|
||||
// (circle, rectangle) in touch mode.
|
||||
// (update): we have to send passive now to prevent scroll, because by default it is {passive: true} now, which means,
|
||||
// handler can't event.preventDefault
|
||||
// check the news https://developers.google.com/web/updates/2016/06/passive-event-listeners
|
||||
// document.addEventListener('touchstart', preventDefault, { passive: false });
|
||||
.on('touchmove', this._onMouseMove, this);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private removeHooks() {
|
||||
// L.Draw.Feature.prototype.removeHooks.call(this);
|
||||
if (this._map) {
|
||||
if (this._mapDraggable) {
|
||||
this._map.dragging.enable();
|
||||
}
|
||||
|
||||
//TODO refactor: move cursor to styles
|
||||
this._map._container.style.cursor = '';
|
||||
this._map.getContainer().style.cursor = '';
|
||||
|
||||
this._map
|
||||
.off('mousedown', this._onMouseDown, this)
|
||||
|
|
@ -146,46 +148,36 @@ export default class DrawControlComponent extends Vue {
|
|||
off(document, 'mouseup', this._onMouseUp, this);
|
||||
off(document, 'touchend', this._onMouseUp, this);
|
||||
|
||||
// document.removeEventListener('touchstart', preventDefault);
|
||||
|
||||
// If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return
|
||||
if (this._shape && this.preserve == false) {
|
||||
this._map.removeLayer(this._shape);
|
||||
// delete this._shape;
|
||||
this._shape = undefined;
|
||||
}
|
||||
}
|
||||
this._isDrawing = false;
|
||||
}
|
||||
|
||||
private _onMouseDown(e: LeafletMouseEvent) {
|
||||
// private _onMouseDown(e: LeafletMouseEvent) {
|
||||
private _onMouseDown(e: any) {
|
||||
this._isDrawing = true;
|
||||
this._startLatLng = e.latlng;
|
||||
|
||||
// DomEvent.on(document, 'mouseup', this._onMouseUp, this)
|
||||
// .on(document, 'touchend', this._onMouseUp, this)
|
||||
// .preventDefault(e.originalEvent);
|
||||
on(document, 'mouseup', this._onMouseUp, this);
|
||||
on(document, 'touchend', this._onMouseUp, this);
|
||||
preventDefault(e.originalEvent);
|
||||
}
|
||||
|
||||
private _onMouseMove(e: LeafletMouseEvent) {
|
||||
// private _onMouseMove(e: LeafletMouseEvent) {
|
||||
private _onMouseMove(e: any) {
|
||||
var latlng = e.latlng;
|
||||
|
||||
// this._tooltip.updatePosition(latlng);
|
||||
if (this._isDrawing) {
|
||||
// this._tooltip.updateContent(this._getTooltipText());
|
||||
this._drawShape(latlng);
|
||||
}
|
||||
}
|
||||
|
||||
private _onMouseUp() {
|
||||
if (this._shape) {
|
||||
this._fireCreatedEvent(this._shape);
|
||||
}
|
||||
|
||||
// this.removeHooks();
|
||||
this.disable();
|
||||
if (this.options.repeatMode) {
|
||||
this.enable();
|
||||
|
|
@ -194,14 +186,12 @@ export default class DrawControlComponent extends Vue {
|
|||
|
||||
private _fireCreatedEvent(shape: Rectangle) {
|
||||
var rectangle = new Rectangle(shape.getBounds(), this.options.shapeOptions);
|
||||
// L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, rectangle);
|
||||
this._map.fire('Draw.Event.CREATED', { layer: rectangle, type: this.TYPE });
|
||||
}
|
||||
|
||||
public removeShape() {
|
||||
if (this._shape) {
|
||||
this._map.removeLayer(this._shape);
|
||||
// delete this._shape;
|
||||
this._shape = undefined;
|
||||
}
|
||||
}
|
||||
|
|
@ -210,7 +200,6 @@ export default class DrawControlComponent extends Vue {
|
|||
if (!this._shape) {
|
||||
const bounds = new LatLngBounds(southWest, northEast);
|
||||
this._shape = new Rectangle(bounds, this.options.shapeOptions);
|
||||
// this._map.addLayer(this._shape);
|
||||
this._map = this.mapService.getMap(this.mapId);
|
||||
this._shape.addTo(this._map);
|
||||
} else {
|
||||
|
|
@ -218,12 +207,10 @@ export default class DrawControlComponent extends Vue {
|
|||
}
|
||||
}
|
||||
|
||||
// from Draw Rectangle
|
||||
private _drawShape(latlng: LatLng) {
|
||||
if (!this._shape) {
|
||||
const bounds = new LatLngBounds(this._startLatLng, latlng);
|
||||
this._shape = new Rectangle(bounds, this.options.shapeOptions);
|
||||
// this._map.addLayer(this._shape);
|
||||
this._shape.addTo(this._map);
|
||||
} else {
|
||||
this._shape.setBounds(new LatLngBounds(this._startLatLng, latlng));
|
||||
|
|
@ -237,44 +224,336 @@ export default class DrawControlComponent extends Vue {
|
|||
this.enable();
|
||||
}
|
||||
}
|
||||
|
||||
// private enable() {
|
||||
// //if (this.map.mapTool) this.map.mapTool.on('editable:drawing:start', this.disable.bind(this));
|
||||
// // dom.addClass(this.map.container, 'measure-enabled');
|
||||
// //this.fireAndForward('showmeasure');
|
||||
// this._startMarker(this.southWest, this.options);
|
||||
// }
|
||||
|
||||
// private disable() {
|
||||
// //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
|
||||
// // dom.removeClass(this.map.container, 'measure-enabled');
|
||||
// // this.featuresLayer.clearLayers();
|
||||
// // //this.fireAndForward('hidemeasure');
|
||||
// // if (this._drawingEditor) {
|
||||
// // this._drawingEditor.cancelDrawing();
|
||||
// // }
|
||||
// }
|
||||
}
|
||||
export default DrawControlComponent;
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.gba-control-draw {
|
||||
<style scoped>
|
||||
.draw-control-container {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 8rem;
|
||||
z-index: 1000;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 100px;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.btn-group-vertical button {
|
||||
display: block;
|
||||
.draw-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 0.625rem;
|
||||
background: white;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
outline: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
margin-left: 0;
|
||||
margin-top: 0.5em;
|
||||
.dark .draw-button {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
color: #d1d5db;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Inactive state hover */
|
||||
.draw-button:not(.is-active):hover {
|
||||
background: #f9fafb;
|
||||
border-color: #65DC21;
|
||||
color: #357C06;
|
||||
transform: translateY(-2px);
|
||||
/* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */
|
||||
width: auto;
|
||||
padding: 0.625rem 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dark .draw-button:not(.is-active):hover {
|
||||
background: #111827;
|
||||
border-color: #65DC21;
|
||||
color: #65DC21;
|
||||
}
|
||||
|
||||
/* Active state */
|
||||
.draw-button.is-active {
|
||||
background: linear-gradient(135deg, #65DC21 0%, #357C06 100%);
|
||||
border-color: #357C06;
|
||||
color: white;
|
||||
box-shadow: 0 10px 15px -3px rgba(101, 220, 33, 0.4), 0 4px 6px -2px rgba(101, 220, 33, 0.2);
|
||||
width: auto;
|
||||
padding: 0.625rem 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dark .draw-button.is-active {
|
||||
box-shadow: 0 10px 15px -3px rgba(101, 220, 33, 0.5), 0 4px 6px -2px rgba(101, 220, 33, 0.3);
|
||||
}
|
||||
|
||||
/* Active state hover */
|
||||
.draw-button.is-active:hover {
|
||||
background: linear-gradient(135deg, #429E04 0%, #295B09 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 25px -5px rgba(101, 220, 33, 0.4), 0 10px 10px -5px rgba(101, 220, 33, 0.2);
|
||||
}
|
||||
|
||||
/* Active state press */
|
||||
.draw-button:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
/* Focus state */
|
||||
.draw-button:focus-visible {
|
||||
outline: 3px solid rgba(101, 220, 33, 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Icon styling */
|
||||
.draw-button :deep(svg) {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* .draw-button.is-active :deep(svg) {
|
||||
transform: rotate(90deg);
|
||||
} */
|
||||
|
||||
/* Status badge */
|
||||
.draw-status-badge {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
transition: all 0.3s ease;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Show badge on hover when inactive */
|
||||
.draw-button:not(.is-active):hover .draw-status-badge {
|
||||
max-width: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Show badge when active */
|
||||
.draw-button.is-active .draw-status-badge {
|
||||
max-width: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Pulse animation for active state */
|
||||
.draw-button.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: pulse 2s ease-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* @keyframes pulse {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Glow effect for active state */
|
||||
.draw-button.is-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(135deg, #65DC21, #357C06);
|
||||
border-radius: 0.75rem;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s ease;
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
.draw-button.is-active:hover::after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Inactive state indicator */
|
||||
.draw-button:not(.is-active) .draw-status-badge {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.dark .draw-button:not(.is-active) .draw-status-badge {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.draw-button:not(.is-active):hover .draw-status-badge {
|
||||
color: #357C06;
|
||||
}
|
||||
|
||||
.dark .draw-button:not(.is-active):hover .draw-status-badge {
|
||||
color: #65DC21;
|
||||
}
|
||||
|
||||
/* Active state indicator */
|
||||
.draw-button.is-active .draw-status-badge {
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Tooltip on hover */
|
||||
.draw-button:hover::after {
|
||||
content: attr(aria-label);
|
||||
position: absolute;
|
||||
bottom: calc(100% + 0.5rem);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #1f2937;
|
||||
color: white;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 1001;
|
||||
animation: fadeInTooltip 0.2s ease 0.5s forwards;
|
||||
}
|
||||
|
||||
/* @keyframes fadeInTooltip {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
} */
|
||||
|
||||
/* Ripple effect on click */
|
||||
.draw-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.draw-button:active::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.draw-control-container {
|
||||
right: 0.75rem;
|
||||
top: 0.75rem;
|
||||
}
|
||||
|
||||
.draw-button {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.draw-button:not(.is-active):hover,
|
||||
.draw-button.is-active {
|
||||
padding: 0.5rem 0.875rem;
|
||||
}
|
||||
|
||||
.draw-button :deep(svg) {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.draw-status-badge {
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
/* Hide tooltip on mobile */
|
||||
.draw-button:hover::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* @media (max-width: 640px) {
|
||||
.draw-control-container {
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.draw-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.draw-button:not(.is-active):hover,
|
||||
.draw-button.is-active {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.draw-button :deep(svg) {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Accessibility: reduce motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.draw-button,
|
||||
.draw-button :deep(svg),
|
||||
.draw-status-badge {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.draw-button.is-active::before,
|
||||
.draw-button.is-active::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Global styles for draw mode */
|
||||
.leaflet-container.draw-mode-active {
|
||||
cursor: crosshair !important;
|
||||
}
|
||||
|
||||
.leaflet-container.draw-mode-active * {
|
||||
cursor: crosshair !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue