mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-02 12:43:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(LocationMap): remove unused marker styles and functions; update location map container styles

Browse Source
This commit is contained in:
alexsparkes
2026-05-06 10:28:09 +01:00
parent 6180bb4eb1
commit 6801f9eb6f
2 changed files with 36 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/features/background/components/LocationMap.jsx
View File

@@ -13,16 +13,6 @@ const COMPACT_ZOOM = 1.2;
const COUNTRY_ZOOM_PADDING = 5;
const COUNTRY_BOUNDS_CACHE = new Map();
const MARKER_COLORS = {
light: '#555555',
dark: '#2d3e5f',
};
const MARKER_BORDERS = {
light: 'rgba(255, 255, 255, 0.95)',
dark: 'rgba(255, 255, 255, 0.95)',
};
const getResolvedTheme = () => {
const theme = localStorage.getItem('theme') || 'auto';
if (theme === 'auto') {
@@ -34,21 +24,6 @@ const getResolvedTheme = () => {
return theme === 'dark' ? 'dark' : 'light';
};
const createCircleMarker = (theme, compact) => {
const markerElement = document.createElement('div');
markerElement.className = `location-map-marker${compact ? ' location-map-marker--compact' : ''}`;
markerElement.style.width = compact ? '8px' : '12px';
markerElement.style.height = compact ? '8px' : '12px';
markerElement.style.borderRadius = '50%';
markerElement.style.borderStyle = 'solid';
markerElement.style.borderWidth = compact ? '1.5px' : '2px';
markerElement.style.boxShadow = compact ? '0 0 0 1px rgba(0, 0, 0, 0.2)' : '0 0 0 2px rgba(0, 0, 0, 0.2)';
markerElement.style.opacity = compact && theme === 'light' ? '0.82' : '1';
markerElement.style.backgroundColor = MARKER_COLORS[theme] || MARKER_COLORS.light;
markerElement.style.borderColor = MARKER_BORDERS[theme] || MARKER_BORDERS.light;
return markerElement;
};
const hideCompactMapLabels = (mapInstance) => {
const layers = mapInstance.getStyle()?.layers || [];
layers.forEach((layer) => {
@@ -210,13 +185,6 @@ function LocationMap({ latitude, longitude, compact = false }) {
});
});
new maplibregl.Marker({
element: createCircleMarker(resolvedTheme, compact),
anchor: 'center',
})
.setLngLat([longitude, latitude])
.addTo(mapInstance);
return () => {
mapInstance.remove();
if (map.current === mapInstance) {

48
src/features/background/scss/_photoinformation.scss
View File

@@ -620,6 +620,7 @@
}
.location-map-container {
position: relative;
width: 100%;
height: 150px;
border-radius: 12px;
@@ -634,6 +635,41 @@
.maplibregl-canvas {
transition: filter 0.2s ease;
}
&::before,
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: rgb(255 255 255 / 92%);
box-shadow: 0 0 3px rgb(0 0 0 / 40%);
border-radius: 1px;
z-index: 1;
pointer-events: none;
}
&::before {
width: 18px;
height: 1.5px;
transform: translate(-50%, -50%);
}
&::after {
width: 1.5px;
height: 18px;
transform: translate(-50%, -50%);
}
}
.location-map-container--compact {
&::before {
width: 12px;
}
&::after {
height: 12px;
}
}
&--compact {
@@ -673,18 +709,6 @@
border-color: rgb(255 255 255 / 28%);
}
.location-map-marker {
width: 12px;
height: 12px;
border: 2px solid;
border-radius: 50%;
box-shadow: 0 0 0 2px rgb(0 0 0 / 20%);
&--compact {
width: 8px;
height: 8px;
}
}
// Smooth expansion animations
.extra-content {