129cb5986f
Improves the custom map interface with a redesigned filter section, quick action buttons, advanced filters, and a statistics display. Adds a loading spinner, disables the submit button during map load, and provides success/error feedback with failsafe timeout. Integrates new CSS for better map and legend styling, and updates JS to support callbacks for AJAX success/error, improving user experience and reliability.
74 行
无行尾
1.6 KiB
CSS
74 行
无行尾
1.6 KiB
CSS
/* Custom Map Interface Enhancements */
|
|
|
|
/* Ensure grid square labels stay together (fix for separated letters) */
|
|
.leaflet-marker-icon.my-div-icon,
|
|
.my-div-icon .grid-text,
|
|
.my-div-icon .grid-text font,
|
|
span.grid-text,
|
|
span.grid-text > font {
|
|
letter-spacing: 0 !important;
|
|
word-spacing: 0 !important;
|
|
white-space: nowrap !important;
|
|
font-family: monospace !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
/* Map container enhancements */
|
|
#custommap {
|
|
border-radius: 0 0 0.375rem 0.375rem;
|
|
overflow: hidden;
|
|
transition: height 0.3s ease;
|
|
width: 100%;
|
|
height: 1000px !important; /* Maintain original screenshot-friendly height */
|
|
}
|
|
|
|
/* Fullscreen map styling */
|
|
#custommap:fullscreen {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Statistics badges */
|
|
.custom-map-QSOs .badge {
|
|
font-size: 0.85em;
|
|
padding: 0.5em 0.75em;
|
|
}
|
|
|
|
|
|
/* Legend styling */
|
|
.custom-map-QSOs .fas {
|
|
width: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive improvements */
|
|
@media (max-width: 768px) {
|
|
.custom-map-QSOs .card-body {
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
|
|
.custom-map-QSOs .btn-group .btn {
|
|
padding: 0.375rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Keep map height at 1000px even on mobile for screenshots */
|
|
#custommap {
|
|
height: 1000px !important;
|
|
min-height: 1000px !important;
|
|
}
|
|
}
|
|
|
|
/* Animation for statistics updates */
|
|
.custom-map-QSOs .badge {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.custom-map-QSOs .badge.updated {
|
|
animation: pulse 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
} |