adam/mc-webui
1
0
Fork 0
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-08-12 11:42:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: Replace map filter checkboxes with clickable badges

Browse Source 
Convert type filter checkboxes to clickable toggle badges on the Map
modal (accessible from main menu). Same UX pattern as pending contacts:
- Active: colored background, white text
- Inactive: colored text/border, white background

Updated in both base.html and contacts_base.html for consistency.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-01-23 08:58:32 +01:00
parent a9dd31b86e
commit d0f1aae963
4 changed files with 78 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/style.css
+56
View File
@@ -846,3 +846,59 @@ main {
justify-content: center;
font-size: 1rem;
}
/* =============================================================================
Map Filter Badges
============================================================================= */
/* Clickable map filter badges */
.map-filter-badge {
display: inline-block;
padding: 0.25rem 0.6rem;
font-size: 0.8rem;
font-weight: 600;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.15s ease-in-out;
user-select: none;
}
.map-filter-badge[data-type="1"] {
color: #2196F3;
background-color: white;
border: 2px solid #2196F3;
}
.map-filter-badge[data-type="1"].active {
color: white;
background-color: #2196F3;
}
.map-filter-badge[data-type="2"] {
color: #4CAF50;
background-color: white;
border: 2px solid #4CAF50;
}
.map-filter-badge[data-type="2"].active {
color: white;
background-color: #4CAF50;
}
.map-filter-badge[data-type="3"] {
color: #9C27B0;
background-color: white;
border: 2px solid #9C27B0;
}
.map-filter-badge[data-type="3"].active {
color: white;
background-color: #9C27B0;
}
.map-filter-badge[data-type="4"] {
color: #FF9800;
background-color: white;
border: 2px solid #FF9800;
}
.map-filter-badge[data-type="4"].active {
color: #212529;
background-color: #FF9800;
}