관제 화면 문구와 화물 패널 정리
This commit is contained in:
@@ -33,6 +33,7 @@ const elements = {
|
||||
driversTab: document.getElementById("driversTab"),
|
||||
locationsPanel: document.getElementById("locationsPanel"),
|
||||
driversPanel: document.getElementById("driversPanel"),
|
||||
mapPanel: document.querySelector(".map-panel"),
|
||||
vehicleList: document.getElementById("vehicleList"),
|
||||
mapMessage: document.getElementById("mapMessage"),
|
||||
totalCount: document.getElementById("totalCount"),
|
||||
@@ -1359,7 +1360,7 @@ function createDestinationMarkerElement(location) {
|
||||
function createDestinationMarkerHtml(location) {
|
||||
const metrics = getRouteMetrics(location);
|
||||
const destinationName = getDestinationName(location) || "목적지";
|
||||
const etaText = metrics ? formatEtaTime(metrics.estimatedArrivalAt) : "ETA";
|
||||
const etaText = metrics ? formatEtaTime(metrics.estimatedArrivalAt) : "도착시간 미정";
|
||||
|
||||
return `
|
||||
<span class="route-destination-pin">도착</span>
|
||||
@@ -1380,7 +1381,7 @@ function refreshSelectedDetail(location) {
|
||||
}
|
||||
|
||||
if (state.activeDetailMode === "cargo") {
|
||||
renderCargoFocusPanel(location);
|
||||
hideRouteFocusPanel();
|
||||
showInfoOverlay(location);
|
||||
return;
|
||||
}
|
||||
@@ -1436,14 +1437,14 @@ function renderMarkerActionPanel(location) {
|
||||
const distance = metrics ? formatDistance(metrics.remainingDistanceKm) : "-";
|
||||
const eta = metrics ? formatEtaTime(metrics.estimatedArrivalAt) : "-";
|
||||
|
||||
elements.markerActionEyebrow.textContent = "차량 선택";
|
||||
elements.markerActionEyebrow.textContent = "차량";
|
||||
elements.markerActionTitle.textContent = `${title} · ${vehicleType.label}`;
|
||||
elements.markerActionMeta.textContent = [driver, status.label, formatSpeed(location.speed)].filter(Boolean).join(" · ");
|
||||
elements.markerActionSummary.replaceChildren(
|
||||
createMarkerActionSummaryItem("화물", getCargoSummary(location)),
|
||||
createMarkerActionSummaryItem("목적지", getRouteSummary(location)),
|
||||
createMarkerActionSummaryItem("남은 거리", distance),
|
||||
createMarkerActionSummaryItem("도착 예정", eta)
|
||||
createMarkerActionSummaryItem("도착 시간", eta)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1501,7 +1502,7 @@ function showVehicleCargo(location) {
|
||||
hideMarkerActionPanel();
|
||||
elements.historyDrawer.classList.add("is-hidden");
|
||||
clearRouteOverlay();
|
||||
renderCargoFocusPanel(location);
|
||||
hideRouteFocusPanel();
|
||||
render();
|
||||
updateMarkerSelectionClasses();
|
||||
showInfoOverlay(location);
|
||||
@@ -1549,35 +1550,27 @@ function setRouteFocusContent(eyebrow, title, meta) {
|
||||
elements.routeFocusMeta.textContent = meta;
|
||||
}
|
||||
|
||||
function renderCargoFocusPanel(location) {
|
||||
const vehicleType = getVehicleType(location);
|
||||
const product = getCargoName(location) || "미등록";
|
||||
const quantity = getCargoQuantity(location) || "수량 미등록";
|
||||
const weight = getCargoWeight(location) || "중량 미등록";
|
||||
const route = getRouteSummary(location);
|
||||
setRouteFocusContent(
|
||||
"화물 정보",
|
||||
`${location.vehicleNo || location.driverId} · ${vehicleType.label}`,
|
||||
`${product} · ${quantity} · ${weight} · ${route}`
|
||||
);
|
||||
function hideRouteFocusPanel() {
|
||||
elements.routeFocusPanel.classList.remove("is-active");
|
||||
setRouteFocusEyebrow("차량 정보");
|
||||
elements.routeFocusTitle.textContent = "";
|
||||
elements.routeFocusMeta.textContent = "";
|
||||
}
|
||||
|
||||
function renderCurrentLocationPanel(location) {
|
||||
const vehicleType = getVehicleType(location);
|
||||
const coordinate = `${formatCoordinate(location.latitude)}, ${formatCoordinate(location.longitude)}`;
|
||||
setRouteFocusContent(
|
||||
"현재 위치",
|
||||
"지도 중심",
|
||||
`${location.vehicleNo || location.driverId} · ${vehicleType.label}`,
|
||||
`${formatSpeed(location.speed)} · ${coordinate} · ${formatDateTime(location.receivedAt)}`
|
||||
);
|
||||
}
|
||||
|
||||
function renderRouteFocusPanel(location) {
|
||||
setRouteFocusEyebrow("선택 경로");
|
||||
setRouteFocusEyebrow("차량 정보");
|
||||
if (!location) {
|
||||
elements.routeFocusPanel.classList.remove("is-active");
|
||||
elements.routeFocusTitle.textContent = "차량 선택";
|
||||
elements.routeFocusMeta.textContent = "선택하면 경로와 도착 예정 시간이 표시됩니다.";
|
||||
hideRouteFocusPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1615,7 +1608,7 @@ async function loadLocationHistory(location) {
|
||||
state.activeDetailMode = "history";
|
||||
hideMarkerActionPanel();
|
||||
elements.historyDrawer.classList.remove("is-hidden");
|
||||
elements.historyTitle.textContent = `${location.vehicleNo || location.driverId} 위치 이력`;
|
||||
elements.historyTitle.textContent = `${location.vehicleNo || location.driverId} 수신 이력`;
|
||||
elements.historySummary.textContent = "조회 중";
|
||||
elements.historyList.replaceChildren();
|
||||
|
||||
@@ -1674,48 +1667,34 @@ function closeHistoryDrawer() {
|
||||
}
|
||||
|
||||
function showInfoOverlay(location) {
|
||||
if (!state.map || !state.mapProvider) return;
|
||||
if (!elements.mapPanel) return;
|
||||
|
||||
if (shouldSuppressMapPopup()) {
|
||||
if (shouldSuppressInfoPanel()) {
|
||||
clearInfoOverlay();
|
||||
return;
|
||||
}
|
||||
|
||||
const status = getLocationStatus(location);
|
||||
const content = createPopupElement(location, status);
|
||||
const placement = getInfoPanelPlacement(location);
|
||||
|
||||
if (state.mapProvider === "leaflet") {
|
||||
if (state.infoOverlay) {
|
||||
state.infoOverlay
|
||||
.setLatLng([location.latitude, location.longitude])
|
||||
.setContent(content);
|
||||
return;
|
||||
}
|
||||
|
||||
state.infoOverlay = L.popup({
|
||||
closeButton: true,
|
||||
offset: [0, -24]
|
||||
})
|
||||
.setLatLng([location.latitude, location.longitude])
|
||||
.setContent(content)
|
||||
.openOn(state.map);
|
||||
return;
|
||||
if (!(state.infoOverlay instanceof HTMLElement)) {
|
||||
clearInfoOverlay();
|
||||
state.infoOverlay = document.createElement("section");
|
||||
state.infoOverlay.setAttribute("aria-label", "화물 상세");
|
||||
elements.mapPanel.append(state.infoOverlay);
|
||||
}
|
||||
|
||||
const position = new kakao.maps.LatLng(location.latitude, location.longitude);
|
||||
|
||||
if (!state.infoOverlay) {
|
||||
state.infoOverlay = new kakao.maps.CustomOverlay({ yAnchor: 1.35 });
|
||||
}
|
||||
state.infoOverlay.setContent(content);
|
||||
state.infoOverlay.setPosition(position);
|
||||
state.infoOverlay.setMap(state.map);
|
||||
state.infoOverlay.className = `map-info-panel ${placement}`;
|
||||
state.infoOverlay.replaceChildren(content);
|
||||
}
|
||||
|
||||
function clearInfoOverlay() {
|
||||
if (!state.infoOverlay) return;
|
||||
|
||||
if (typeof state.infoOverlay.setMap === "function") {
|
||||
if (state.infoOverlay instanceof HTMLElement) {
|
||||
state.infoOverlay.remove();
|
||||
} else if (typeof state.infoOverlay.setMap === "function") {
|
||||
state.infoOverlay.setMap(null);
|
||||
} else if (state.mapProvider === "leaflet" && state.map?.closePopup) {
|
||||
state.map.closePopup(state.infoOverlay);
|
||||
@@ -1724,14 +1703,43 @@ function clearInfoOverlay() {
|
||||
state.infoOverlay = null;
|
||||
}
|
||||
|
||||
function shouldSuppressMapPopup() {
|
||||
function shouldSuppressInfoPanel() {
|
||||
return window.matchMedia("(max-width: 560px)").matches;
|
||||
}
|
||||
|
||||
function getInfoPanelPlacement(location) {
|
||||
const center = getCurrentMapCenter();
|
||||
if (!center) return "is-top-right";
|
||||
|
||||
return location.longitude >= center.longitude ? "is-bottom-left" : "is-top-right";
|
||||
}
|
||||
|
||||
function getCurrentMapCenter() {
|
||||
if (!state.map || !state.mapProvider) return null;
|
||||
|
||||
if (state.mapProvider === "kakao" && typeof state.map.getCenter === "function") {
|
||||
const center = state.map.getCenter();
|
||||
return {
|
||||
latitude: center.getLat(),
|
||||
longitude: center.getLng()
|
||||
};
|
||||
}
|
||||
|
||||
if (state.mapProvider === "leaflet" && typeof state.map.getCenter === "function") {
|
||||
const center = state.map.getCenter();
|
||||
return {
|
||||
latitude: center.lat,
|
||||
longitude: center.lng
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function createPopupElement(location, status) {
|
||||
const vehicleType = getVehicleType(location);
|
||||
const container = document.createElement("div");
|
||||
container.className = "kakao-popup";
|
||||
container.className = "map-info-card";
|
||||
|
||||
const title = document.createElement("strong");
|
||||
title.className = "popup-title";
|
||||
@@ -1775,12 +1783,10 @@ function createRouteInfoElement(location) {
|
||||
return routeInfo;
|
||||
}
|
||||
|
||||
const source = firstString(location.routeSource, location.routingProvider) || "simulated";
|
||||
routeInfo.append(
|
||||
createPopupRouteLine("남은 거리", formatDistance(metrics.remainingDistanceKm)),
|
||||
createPopupRouteLine("예상 도착", formatEtaTime(metrics.estimatedArrivalAt)),
|
||||
createPopupRouteLine("소요 시간", formatDuration(metrics.etaMinutes)),
|
||||
createPopupRouteLine("경로", source === "simulated" ? "모의 경로" : source)
|
||||
createPopupRouteLine("도착 시간", formatEtaTime(metrics.estimatedArrivalAt)),
|
||||
createPopupRouteLine("남은 시간", formatDuration(metrics.etaMinutes))
|
||||
);
|
||||
return routeInfo;
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-context">
|
||||
<span class="topbar-chip">시범 관제</span>
|
||||
<span class="topbar-chip">관제 데스크</span>
|
||||
<time id="systemClock" datetime="">--:--</time>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
@@ -41,7 +41,7 @@
|
||||
<path d="M15 18v-2" />
|
||||
</svg>
|
||||
</span>
|
||||
샘플 전송
|
||||
테스트 전송
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -49,12 +49,12 @@
|
||||
<main class="workspace">
|
||||
<aside class="sidebar" aria-label="차량 목록">
|
||||
<section class="ops-brief" aria-label="운영 브리핑">
|
||||
<span class="section-eyebrow">오늘의 관제</span>
|
||||
<span class="section-eyebrow">운영 현황</span>
|
||||
<strong id="opsHeadline">전국 운송 상태 확인 중</strong>
|
||||
<p id="opsSubline">실시간 위치 수신을 기다리고 있습니다.</p>
|
||||
<div class="ops-brief-grid">
|
||||
<span>
|
||||
<small>평균 ETA</small>
|
||||
<small>평균 남은 시간</small>
|
||||
<strong id="averageEta">-</strong>
|
||||
</span>
|
||||
<span>
|
||||
@@ -62,7 +62,7 @@
|
||||
<strong id="cargoTypeCount">-</strong>
|
||||
</span>
|
||||
<span>
|
||||
<small>경로 표시</small>
|
||||
<small>경로 보유</small>
|
||||
<strong id="routePreviewCount">-</strong>
|
||||
</span>
|
||||
</div>
|
||||
@@ -153,23 +153,23 @@
|
||||
<div id="map"></div>
|
||||
<div id="mapMessage" class="map-message">지도 로딩 중</div>
|
||||
<section class="map-status-panel" aria-label="지도 운영 상태">
|
||||
<span class="section-eyebrow">실시간 지도</span>
|
||||
<strong id="mapStatusTitle">화물 이동 현황</strong>
|
||||
<span class="section-eyebrow">운행 지도</span>
|
||||
<strong id="mapStatusTitle">운행 현황</strong>
|
||||
<div class="map-status-grid">
|
||||
<span><b id="mapActiveCount">0</b> 수신 중</span>
|
||||
<span><b id="mapEtaSummary">-</b> 평균 ETA</span>
|
||||
<span><b id="mapEtaSummary">-</b> 평균 남은 시간</span>
|
||||
<span><b id="mapUpdatedAt">-</b> 최근 수신</span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="routeFocusPanel" class="route-focus-panel" aria-live="polite">
|
||||
<span class="section-eyebrow">선택 경로</span>
|
||||
<span class="section-eyebrow">차량 정보</span>
|
||||
<strong id="routeFocusTitle">차량 선택</strong>
|
||||
<p id="routeFocusMeta">선택하면 경로와 도착 예정 시간이 표시됩니다.</p>
|
||||
<p id="routeFocusMeta">차량을 선택하면 운행 경로와 도착 시간을 확인할 수 있습니다.</p>
|
||||
</section>
|
||||
<section id="markerActionPanel" class="marker-action-panel is-hidden" aria-label="차량 빠른 선택">
|
||||
<div class="marker-action-head">
|
||||
<div>
|
||||
<span id="markerActionEyebrow" class="section-eyebrow">차량 선택</span>
|
||||
<span id="markerActionEyebrow" class="section-eyebrow">차량</span>
|
||||
<strong id="markerActionTitle">-</strong>
|
||||
<p id="markerActionMeta">-</p>
|
||||
</div>
|
||||
@@ -177,10 +177,10 @@
|
||||
</div>
|
||||
<div id="markerActionSummary" class="marker-action-summary"></div>
|
||||
<div class="marker-action-buttons">
|
||||
<button type="button" data-marker-action="route">전체 경로</button>
|
||||
<button type="button" data-marker-action="cargo">화물 정보</button>
|
||||
<button type="button" data-marker-action="history">위치 이력</button>
|
||||
<button type="button" data-marker-action="center">현재 위치</button>
|
||||
<button type="button" data-marker-action="route">경로 보기</button>
|
||||
<button type="button" data-marker-action="cargo">화물 확인</button>
|
||||
<button type="button" data-marker-action="history">수신 이력</button>
|
||||
<button type="button" data-marker-action="center">지도 중심</button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="map-legend" aria-label="지도 범례">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #eef3f7;
|
||||
--bg: #f3f5f7;
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #eef2f5;
|
||||
--border: #d9e0e7;
|
||||
@@ -12,8 +12,8 @@
|
||||
--red: #b42318;
|
||||
--navy: #162231;
|
||||
--cyan: #0e7490;
|
||||
--shadow: 0 12px 30px rgba(25, 37, 52, 0.08);
|
||||
--shadow-strong: 0 18px 46px rgba(18, 30, 44, 0.16);
|
||||
--shadow: 0 1px 3px rgba(25, 37, 52, 0.08);
|
||||
--shadow-strong: 0 6px 18px rgba(18, 30, 44, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -31,8 +31,10 @@ body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family:
|
||||
"Segoe UI",
|
||||
"Malgun Gothic",
|
||||
"Apple SD Gothic Neo",
|
||||
"Noto Sans KR",
|
||||
"Segoe UI",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
@@ -48,7 +50,7 @@ button {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -93,7 +95,7 @@ button:hover {
|
||||
background: #142033;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 950;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -107,7 +109,7 @@ button:hover {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.topbar-context {
|
||||
@@ -118,15 +120,15 @@ button:hover {
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.topbar-chip {
|
||||
padding: 6px 9px;
|
||||
border: 1px solid rgba(14, 116, 144, 0.18);
|
||||
border-radius: 999px;
|
||||
background: rgba(14, 116, 144, 0.08);
|
||||
color: var(--cyan);
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #cbd5df;
|
||||
border-radius: 4px;
|
||||
background: #f6f8fa;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@@ -167,7 +169,7 @@ button:hover {
|
||||
background: var(--surface-muted);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-pill.is-online {
|
||||
@@ -202,11 +204,10 @@ button:hover {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 20px;
|
||||
color: #496173;
|
||||
color: #536476;
|
||||
font-size: 11px;
|
||||
font-weight: 950;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.ops-brief {
|
||||
@@ -215,7 +216,7 @@ button:hover {
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(22, 34, 49, 0.08);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
@@ -234,7 +235,7 @@ button:hover {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
word-break: keep-all;
|
||||
}
|
||||
@@ -262,7 +263,7 @@ button:hover {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -283,7 +284,7 @@ button:hover {
|
||||
min-width: 0;
|
||||
padding: 11px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(23, 33, 43, 0.02);
|
||||
}
|
||||
@@ -292,7 +293,7 @@ button:hover {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metric strong {
|
||||
@@ -331,7 +332,7 @@ button:hover {
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
@@ -361,7 +362,7 @@ button:hover {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -383,7 +384,7 @@ button:hover {
|
||||
.search-field span {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-field input {
|
||||
@@ -451,7 +452,7 @@ button:hover {
|
||||
.driver-form span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.driver-form input,
|
||||
@@ -588,14 +589,14 @@ button:hover {
|
||||
margin-top: 8px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vehicle-cargo-line {
|
||||
margin-top: 3px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.vehicle-progress {
|
||||
@@ -620,7 +621,7 @@ button:hover {
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge.active {
|
||||
@@ -647,7 +648,7 @@ button:hover {
|
||||
background: #e8eef6;
|
||||
color: #2c3b4f;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vehicle-type-chip.type-trailer,
|
||||
@@ -683,7 +684,7 @@ button:hover {
|
||||
.speed span {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.speed small {
|
||||
@@ -691,7 +692,7 @@ button:hover {
|
||||
overflow: hidden;
|
||||
color: #174ea6;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -710,7 +711,7 @@ button:hover {
|
||||
|
||||
.map-message {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
z-index: 760;
|
||||
top: 14px;
|
||||
left: 50%;
|
||||
max-width: min(420px, calc(100% - 28px));
|
||||
@@ -721,7 +722,7 @@ button:hover {
|
||||
color: var(--muted);
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
@@ -735,52 +736,58 @@ button:hover {
|
||||
.route-focus-panel,
|
||||
.map-legend {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
border: 1px solid rgba(22, 34, 49, 0.12);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
z-index: 720;
|
||||
border: 1px solid #cbd5df;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow-strong);
|
||||
backdrop-filter: blur(10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-status-panel {
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
left: 76px;
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
width: min(330px, calc(100% - 36px));
|
||||
padding: 14px;
|
||||
gap: 8px;
|
||||
width: min(350px, calc(100% - 36px));
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.map-status-panel > strong {
|
||||
color: var(--navy);
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.map-status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
gap: 0;
|
||||
border: 1px solid #e1e6eb;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-status-grid span {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border-radius: 7px;
|
||||
background: #f5f8fb;
|
||||
padding: 7px 8px;
|
||||
border-right: 1px solid #e1e6eb;
|
||||
background: #fafbfc;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.map-status-grid span:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.map-status-grid b {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.15;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -792,8 +799,12 @@ button:hover {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
width: min(390px, calc(100% - 36px));
|
||||
padding: 13px 14px 14px;
|
||||
border-left: 4px solid #aebccc;
|
||||
padding: 12px 13px;
|
||||
border-left: 3px solid #aebccc;
|
||||
}
|
||||
|
||||
.route-focus-panel:not(.is-active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.route-focus-panel.is-active {
|
||||
@@ -814,7 +825,7 @@ button:hover {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
word-break: keep-all;
|
||||
}
|
||||
@@ -823,16 +834,15 @@ button:hover {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 104px;
|
||||
z-index: 6;
|
||||
z-index: 750;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
width: min(380px, calc(100% - 36px));
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(22, 34, 49, 0.14);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
border: 1px solid #cbd5df;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow-strong);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.marker-action-panel.is-hidden {
|
||||
@@ -861,7 +871,7 @@ button:hover {
|
||||
margin: 5px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
word-break: keep-all;
|
||||
}
|
||||
@@ -871,25 +881,37 @@ button:hover {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
border-radius: 5px;
|
||||
background: #f6f8fb;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.marker-action-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
gap: 0;
|
||||
border: 1px solid #e1e6eb;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.marker-action-summary span {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border-radius: 7px;
|
||||
background: #f4f7fa;
|
||||
border-right: 1px solid #e1e6eb;
|
||||
border-bottom: 1px solid #e1e6eb;
|
||||
background: #fbfcfd;
|
||||
}
|
||||
|
||||
.marker-action-summary span:nth-child(2n) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.marker-action-summary span:nth-last-child(-n + 2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.marker-action-summary b,
|
||||
@@ -905,7 +927,7 @@ button:hover {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.marker-action-summary em {
|
||||
@@ -913,31 +935,41 @@ button:hover {
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.marker-action-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.marker-action-buttons button {
|
||||
min-width: 0;
|
||||
min-height: 38px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(31, 111, 235, 0.18);
|
||||
border-radius: 7px;
|
||||
background: #eef5ff;
|
||||
color: #174ea6;
|
||||
border: 1px solid #cbd5df;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
color: #253241;
|
||||
font-size: 13px;
|
||||
font-weight: 950;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.marker-action-buttons button:first-child {
|
||||
border-color: #174ea6;
|
||||
background: #174ea6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.marker-action-buttons button:hover,
|
||||
.marker-action-head button:hover {
|
||||
filter: brightness(0.98);
|
||||
background: #f6f8fb;
|
||||
}
|
||||
|
||||
.marker-action-buttons button:first-child:hover {
|
||||
background: #123f86;
|
||||
}
|
||||
|
||||
.map-legend {
|
||||
@@ -956,7 +988,7 @@ button:hover {
|
||||
gap: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -983,7 +1015,7 @@ button:hover {
|
||||
|
||||
.history-drawer {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
z-index: 740;
|
||||
right: min(424px, 48%);
|
||||
bottom: 14px;
|
||||
left: 14px;
|
||||
@@ -1046,7 +1078,7 @@ button:hover {
|
||||
|
||||
.history-row time {
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.truck-marker {
|
||||
@@ -1200,12 +1232,9 @@ button:hover {
|
||||
width: 52px;
|
||||
height: 27px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.1);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
|
||||
box-shadow:
|
||||
0 6px 14px rgba(15, 23, 42, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1243,12 +1272,12 @@ button:hover {
|
||||
min-height: 23px;
|
||||
padding: 2px 7px 2px 4px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||
border-radius: 7px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);
|
||||
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
|
||||
color: var(--navy);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
@@ -1328,7 +1357,7 @@ button:hover {
|
||||
background: var(--marker-chip);
|
||||
color: var(--marker-dark);
|
||||
font-size: 9px;
|
||||
font-weight: 950;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.truck-marker__plate {
|
||||
@@ -1345,13 +1374,29 @@ button:hover {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
.kakao-popup {
|
||||
min-width: 180px;
|
||||
.map-info-panel {
|
||||
position: absolute;
|
||||
z-index: 730;
|
||||
width: min(330px, calc(100% - 36px));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-info-panel.is-top-right {
|
||||
top: 64px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.map-info-panel.is-bottom-left {
|
||||
bottom: 18px;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.map-info-card {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
box-shadow: var(--shadow-strong);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
@@ -1360,12 +1405,12 @@ button:hover {
|
||||
.popup-title {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.popup-cargo {
|
||||
margin-top: 6px;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popup-route {
|
||||
@@ -1373,9 +1418,9 @@ button:hover {
|
||||
gap: 4px;
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(31, 111, 235, 0.18);
|
||||
border-radius: 6px;
|
||||
background: rgba(31, 111, 235, 0.07);
|
||||
border: 1px solid #e1e6eb;
|
||||
border-radius: 4px;
|
||||
background: #fbfcfd;
|
||||
}
|
||||
|
||||
.popup-route div {
|
||||
@@ -1387,7 +1432,7 @@ button:hover {
|
||||
.popup-route span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.popup-route strong {
|
||||
@@ -1428,7 +1473,7 @@ button:hover {
|
||||
background: #1f6feb;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.route-destination-marker strong,
|
||||
@@ -1446,7 +1491,7 @@ button:hover {
|
||||
.route-destination-leaflet small {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
|
||||
Reference in New Issue
Block a user