PhongPham
c65cc97a33
✨ MAJOR FEATURES: • Auto-zoom intelligence với smart bounds fitting • Enhanced 3D GPS markers với pulsing effects • Professional route display với 6-layer rendering • Status-based parking icons với availability indicators • Production-ready build optimizations 🗺️ AUTO-ZOOM FEATURES: • Smart bounds fitting cho GPS + selected parking • Adaptive padding (50px) cho visual balance • Max zoom control (level 16) để tránh quá gần • Dynamic centering khi không có selection 🎨 ENHANCED VISUALS: • 3D GPS marker với multi-layer pulse effects • Advanced parking icons với status colors • Selection highlighting với animation • Dimming system cho non-selected items 🛣️ ROUTE SYSTEM: • OpenRouteService API integration • Multi-layer route rendering (glow, shadow, main, animated) • Real-time distance & duration calculation • Visual route info trong popup 📱 PRODUCTION READY: • SSR safe với dynamic imports • Build errors resolved • Global deployment via Vercel • Optimized performance 🌍 DEPLOYMENT: • Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app • Bundle size: 22.8 kB optimized • Global CDN distribution • HTTPS enabled 💾 VERSION CONTROL: • MapView-v2.0.tsx backup created • MAPVIEW_VERSIONS.md documentation • Full version history tracking
100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
JavaScript
import { styled } from './utils';
|
|
export var Panel = styled('div', function (_props, theme) {
|
|
return {
|
|
fontSize: 'clamp(12px, 1.5vw, 14px)',
|
|
fontFamily: "sans-serif",
|
|
display: 'flex',
|
|
backgroundColor: theme.background,
|
|
color: theme.foreground
|
|
};
|
|
}, {
|
|
'(max-width: 700px)': {
|
|
flexDirection: 'column'
|
|
},
|
|
'(max-width: 600px)': {
|
|
fontSize: '.9em' // flexDirection: 'column',
|
|
|
|
}
|
|
});
|
|
export var ActiveQueryPanel = styled('div', function () {
|
|
return {
|
|
flex: '1 1 500px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'auto',
|
|
height: '100%'
|
|
};
|
|
}, {
|
|
'(max-width: 700px)': function maxWidth700px(_props, theme) {
|
|
return {
|
|
borderTop: "2px solid " + theme.gray
|
|
};
|
|
}
|
|
});
|
|
export var Button = styled('button', function (props, theme) {
|
|
return {
|
|
appearance: 'none',
|
|
fontSize: '.9em',
|
|
fontWeight: 'bold',
|
|
background: theme.gray,
|
|
border: '0',
|
|
borderRadius: '.3em',
|
|
color: 'white',
|
|
padding: '.5em',
|
|
opacity: props.disabled ? '.5' : undefined,
|
|
cursor: 'pointer'
|
|
};
|
|
});
|
|
export var QueryKeys = styled('span', {
|
|
display: 'inline-block',
|
|
fontSize: '0.9em'
|
|
});
|
|
export var QueryKey = styled('span', {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
padding: '.2em .4em',
|
|
fontWeight: 'bold',
|
|
textShadow: '0 0 10px black',
|
|
borderRadius: '.2em'
|
|
});
|
|
export var Code = styled('code', {
|
|
fontSize: '.9em',
|
|
color: 'inherit',
|
|
background: 'inherit'
|
|
});
|
|
export var Input = styled('input', function (_props, theme) {
|
|
return {
|
|
backgroundColor: theme.inputBackgroundColor,
|
|
border: 0,
|
|
borderRadius: '.2em',
|
|
color: theme.inputTextColor,
|
|
fontSize: '.9em',
|
|
lineHeight: "1.3",
|
|
padding: '.3em .4em'
|
|
};
|
|
});
|
|
export var Select = styled('select', function (_props, theme) {
|
|
return {
|
|
display: "inline-block",
|
|
fontSize: ".9em",
|
|
fontFamily: "sans-serif",
|
|
fontWeight: 'normal',
|
|
lineHeight: "1.3",
|
|
padding: ".3em 1.5em .3em .5em",
|
|
height: 'auto',
|
|
border: 0,
|
|
borderRadius: ".2em",
|
|
appearance: "none",
|
|
WebkitAppearance: 'none',
|
|
backgroundColor: theme.inputBackgroundColor,
|
|
backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "right .55em center",
|
|
backgroundSize: ".65em auto, 100%",
|
|
color: theme.inputTextColor
|
|
};
|
|
}, {
|
|
'(max-width: 500px)': {
|
|
display: 'none'
|
|
}
|
|
}); |