diff --git a/meshview/templates/nodelist.html b/meshview/templates/nodelist.html index 5c4b8d2..f89849c 100644 --- a/meshview/templates/nodelist.html +++ b/meshview/templates/nodelist.html @@ -8,7 +8,7 @@ table { margin: 1em auto; } -/* Ensure table is centered visually */ +/* Ensure table centered visually */ #node-list { display: flex; justify-content: center; @@ -19,7 +19,6 @@ table { margin-right: auto; } - th, td { padding: 10px; border: 1px solid #333; @@ -98,6 +97,7 @@ select, .export-btn, .search-box, .clear-btn { color: white; } +/* Favorite stars */ .favorite-star { cursor: pointer; font-size: 1.2em; @@ -113,6 +113,7 @@ select, .export-btn, .search-box, .clear-btn { color: #ffd700; } +/* Favorite filter button */ .favorites-btn { background-color: #ffd700; color: #000; @@ -127,6 +128,55 @@ select, .export-btn, .search-box, .clear-btn { background-color: #ff6b6b; color: white; } + +/* --------------------------------------------- */ +/* MOBILE CARD VIEW */ +/* --------------------------------------------- */ +@media (max-width: 768px) { + + /* Hide desktop table */ + #node-list table { + display: none; + } + + /* Show mobile card list */ + #mobile-node-list { + display: block !important; + width: 100%; + padding: 0 10px; + } + + .node-card { + background: #1e1e1e; + border: 1px solid #333; + border-radius: 8px; + padding: 12px 15px; + margin-bottom: 12px; + color: white; + } + + .node-card-header { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 1.2em; + font-weight: bold; + margin-bottom: 8px; + } + + .node-card-field { + margin: 4px 0; + font-size: 0.9em; + } + + .node-card-field b { + color: #9fd4ff; + } + + .favorite-star { + font-size: 1.4em; + } +} {% endblock %} @@ -176,6 +226,7 @@ select, .export-btn, .search-box, .clear-btn { nodes +
@@ -202,6 +253,9 @@ select, .export-btn, .search-box, .clear-btn {
+ + +