Эх сурвалжийг харах

Tidy track type display: emoji prefix in name, no separate type row

- Track info panel: remove the 'Type' row; prepend the type emoji
  directly before the track name in <h3> with a title tooltip showing
  the formatted type name (e.g. 'Hiking')
- Folder list: item-icon is always 🗺️; type emoji (when set) appears
  as a prefix inside item-name with the same title tooltip, so it reads
  naturally as part of the name and updates automatically on reload
  after an edit

No backend restart required (frontend-only change).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
k4be 6 цаг өмнө
parent
commit
634efab246

+ 5 - 0
gpx-vis-frontend/css/style.css

@@ -517,6 +517,11 @@ form button[type="submit"]:hover {
   background: #d6ecf8;
 }
 
+/* ===== Track type emoji ===== */
+.type-emoji {
+  cursor: default;
+}
+
 /* ===== Local (guest) active track ===== */
 .track-item.local-active {
   background: #e8f4fd;

+ 17 - 9
gpx-vis-frontend/js/browser.js

@@ -154,11 +154,17 @@ const Browser = (() => {
     for (const track of tracks) {
       const dist = track.totalDistance ? formatDistance(track.totalDistance) : '';
       const isSel = selectedTrackIds.has(track.id);
-      const typeEmoji = TRACK_TYPE_EMOJI[track.trackType] || '🗺️';
+      const typeEmoji = TRACK_TYPE_EMOJI[track.trackType];
+      const typeTitle = track.trackType
+        ? track.trackType.charAt(0).toUpperCase() + track.trackType.slice(1)
+        : '';
+      const emojiPrefix = typeEmoji
+        ? `<span class="type-emoji" title="${escAttr(typeTitle)}">${typeEmoji}</span> `
+        : '';
       html += `<div class="tree-item track-item${isSel ? ' multi-selected' : ''}" data-id="${track.id}" draggable="true"
         data-name="${escAttr(track.name)}" style="padding-left:${28 + baseIndent}px">
-        <span class="item-icon" title="${escAttr(track.trackType || '')}">${typeEmoji}</span>
-        <span class="item-name">${escHtml(track.name)}</span>
+        <span class="item-icon">🗺️</span>
+        <span class="item-name">${emojiPrefix}${escHtml(track.name)}</span>
         <span class="item-meta">${dist}</span>
         <span class="item-date">${formatDate(track.trackDate || track.uploadDate)}</span>
         <span class="item-actions">
@@ -511,17 +517,19 @@ const Browser = (() => {
 
   function showTrackInfo(meta) {
     if (!meta) return;
-    const typeEmoji = TRACK_TYPE_EMOJI[meta.trackType] || null;
-    const typeLabel = meta.trackType
-      ? `${typeEmoji ? typeEmoji + ' ' : ''}${meta.trackType.charAt(0).toUpperCase() + meta.trackType.slice(1)}`
-      : null;
+    const typeEmoji = TRACK_TYPE_EMOJI[meta.trackType];
+    const typeTitle = meta.trackType
+      ? meta.trackType.charAt(0).toUpperCase() + meta.trackType.slice(1)
+      : '';
+    const emojiPrefix = typeEmoji
+      ? `<span class="type-emoji" title="${escAttr(typeTitle)}" style="margin-right:4px">${typeEmoji}</span>`
+      : '';
     const panel = document.getElementById('track-info-panel');
     document.getElementById('track-info-content').innerHTML = `
-      <h3>${escHtml(meta.name || 'Track')}</h3>
+      <h3>${emojiPrefix}${escHtml(meta.name || 'Track')}</h3>
       <div class="info-row"><label>Distance</label><span>${formatDistance(meta.totalDistance)}</span></div>
       <div class="info-row"><label>Points</label><span>${meta.pointCount || 0}</span></div>
       ${meta.trackDate ? `<div class="info-row"><label>Date</label><span>${formatDate(meta.trackDate)}</span></div>` : ''}
-      ${typeLabel ? `<div class="info-row"><label>Type</label><span>${escHtml(typeLabel)}</span></div>` : ''}
     `;
     panel.style.display = 'block';
     document.getElementById('track-info-close').onclick = () => { panel.style.display = 'none'; };