mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-09 08:47:11 -05:00
8934c29fce
* fix: move foreman to global gems to fix startup crash (#1971) * Update exporting code to stream points data to file in batches to red… (#1980) * Update exporting code to stream points data to file in batches to reduce memory usage * Update changelog * Update changelog * Feature/maplibre frontend (#1953) * Add a plan to use MapLibre GL JS for the frontend map rendering, replacing Leaflet * Implement phase 1 * Phases 1-3 + part of 4 * Fix e2e tests * Phase 6 * Implement fog of war * Phase 7 * Next step: fix specs, phase 7 done * Use our own map tiles * Extract v2 map logic to separate manager classes * Update settings panel on v2 map * Update v2 e2e tests structure * Reimplement location search in maps v2 * Update speed routes * Implement visits and places creation in v2 * Fix last failing test * Implement visits merging * Fix a routes e2e test and simplify the routes layer styling. * Extract js to modules from maps_v2_controller.js * Implement area creation * Fix spec problem * Fix some e2e tests * Implement live mode in v2 map * Update icons and panel * Extract some styles * Remove unused file * Start adding dark theme to popups on MapLibre maps * Make popups respect dark theme * Move v2 maps to maplibre namespace * Update v2 references to maplibre * Put place, area and visit info into side panel * Update API to use safe settings config method * Fix specs * Fix method name to config in SafeSettings and update usages accordingly * Add missing public files * Add handling for real time points * Fix remembering enabled/disabled layers of the v2 map * Fix lots of e2e tests * Add settings to select map version * Use maps/v2 as main path for MapLibre maps * Update routing * Update live mode * Update maplibre controller * Update changelog * Remove some console.log statements --------- Co-authored-by: Robin Tuszik <mail@robin.gg>
187 lines
3.3 KiB
CSS
187 lines
3.3 KiB
CSS
/* Maps V2 Styles */
|
|
|
|
/* Loading Overlay */
|
|
.loading-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.loading-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #e5e7eb;
|
|
border-top-color: #3b82f6;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
margin-top: 16px;
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Popup Styles */
|
|
.point-popup {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
.popup-header {
|
|
margin-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.popup-body {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.popup-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.popup-row .label {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.popup-row .value {
|
|
font-weight: 500;
|
|
color: #111827;
|
|
}
|
|
|
|
/* MapLibre Popup Theme Support */
|
|
.maplibregl-popup-content {
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Larger close button */
|
|
.maplibregl-popup-close-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
right: 4px;
|
|
top: 4px;
|
|
padding: 0;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.maplibregl-popup-close-button:hover {
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Light theme (default) */
|
|
.maplibregl-popup-content {
|
|
background-color: #ffffff;
|
|
color: #111827;
|
|
}
|
|
|
|
.maplibregl-popup-close-button {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.maplibregl-popup-close-button:hover {
|
|
background-color: #f3f4f6;
|
|
color: #111827;
|
|
}
|
|
|
|
.maplibregl-popup-tip {
|
|
border-top-color: #ffffff;
|
|
}
|
|
|
|
/* Dark theme */
|
|
html[data-theme="dark"] .maplibregl-popup-content,
|
|
html.dark .maplibregl-popup-content {
|
|
background-color: #1f2937;
|
|
color: #f9fafb;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
html[data-theme="dark"] .maplibregl-popup-close-button,
|
|
html.dark .maplibregl-popup-close-button {
|
|
color: #d1d5db;
|
|
}
|
|
|
|
html[data-theme="dark"] .maplibregl-popup-close-button:hover,
|
|
html.dark .maplibregl-popup-close-button:hover {
|
|
background-color: #374151;
|
|
color: #f9fafb;
|
|
}
|
|
|
|
html[data-theme="dark"] .maplibregl-popup-tip,
|
|
html.dark .maplibregl-popup-tip {
|
|
border-top-color: #1f2937;
|
|
}
|
|
|
|
/* Connection Indicator */
|
|
.connection-indicator {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 8px 16px;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
display: none; /* Hidden by default, shown when family sharing is active */
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
z-index: 20;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
/* Show connection indicator when family sharing is active */
|
|
.connection-indicator.active {
|
|
display: flex;
|
|
}
|
|
|
|
.indicator-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #ef4444;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.connection-indicator.connected .indicator-dot {
|
|
background: #22c55e;
|
|
}
|
|
|
|
.connection-indicator.connected .indicator-text::before {
|
|
content: 'Connected';
|
|
}
|
|
|
|
.connection-indicator.disconnected .indicator-text::before {
|
|
content: 'Connecting...';
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|