Invario/Inventarsystem
3
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 392 Wiki Activity

Enhance bulk delete drawer UI with improved styles and button text

Browse Source
This commit is contained in:
AIIrondev
2026-04-10 23:08:02 +02:00
parent 06ab3e1f4d
commit 1755ec222d
1 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main_admin.html
+34 -14
View File
@@ -32,16 +32,17 @@
top: 46%; top: 46%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 220; z-index: 220;
border: none; border: 1px solid #0b5ed7;
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
padding: 10px 10px 10px 8px; padding: 10px 10px 10px 8px;
background: #dc3545; background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
font-size: 0.85rem; font-size: 0.85rem;
letter-spacing: 0.02em; letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
box-shadow: 0 8px 18px rgba(220, 53, 69, 0.22); box-shadow: 0 8px 18px rgba(13, 110, 253, 0.26);
transition: transform 0.15s ease, box-shadow 0.2s ease;
} }
.bulk-delete-drawer-toggle .drawer-icon { .bulk-delete-drawer-toggle .drawer-icon {
@@ -49,6 +50,14 @@
margin-right: 4px; margin-right: 4px;
} }
.bulk-delete-drawer-toggle:hover {
box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
}
.bulk-delete-drawer-toggle:active {
transform: translateY(-50%) scale(0.98);
}
.bulk-delete-drawer { .bulk-delete-drawer {
position: fixed; position: fixed;
right: 12px; right: 12px;
@@ -56,11 +65,11 @@
transform: translate(120%, -50%); transform: translate(120%, -50%);
width: min(360px, calc(100vw - 24px)); width: min(360px, calc(100vw - 24px));
z-index: 219; z-index: 219;
border: 1px solid #f2c4c4; border: 1px solid #dbe3ee;
background: #fff8f8; background: #ffffff;
border-radius: 14px; border-radius: 14px;
padding: 14px; padding: 14px;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.15);
transition: transform 0.25s ease; transition: transform 0.25s ease;
} }
@@ -74,13 +83,13 @@
} }
.bulk-delete-summary { .bulk-delete-summary {
color: #7a4a4a; color: #334155;
font-size: 0.92rem; font-size: 0.92rem;
margin-top: 4px; margin-top: 4px;
} }
.bulk-delete-drawer small { .bulk-delete-drawer small {
color: #7a4a4a; color: #64748b;
display: block; display: block;
margin-top: 2px; margin-top: 2px;
line-height: 1.35; line-height: 1.35;
@@ -94,21 +103,32 @@
} }
.bulk-delete-actions button { .bulk-delete-actions button {
border: 1px solid #cfd8dc; border: 1px solid #dbe3ee;
border-radius: 8px; border-radius: 8px;
padding: 9px 12px; padding: 9px 12px;
cursor: pointer; cursor: pointer;
background: #fff; background: #f8fafc;
color: #1e293b;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
} }
.bulk-delete-actions button:hover {
background: #eef4ff;
border-color: #bfdbfe;
}
.bulk-delete-actions .danger { .bulk-delete-actions .danger {
background: #dc3545; background: #dc3545;
color: #fff; color: #fff;
border-color: #c82333; border-color: #c82333;
} }
.bulk-delete-actions .danger:hover {
background: #c82333;
border-color: #b21f2d;
}
/* Filter styles */ /* Filter styles */
.filter-container { .filter-container {
display: flex; display: flex;
@@ -359,7 +379,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 0.9rem; font-size: 0.9rem;
color: #6b1f1f; color: #475569;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
@@ -374,7 +394,7 @@
.bulk-delete-drawer-overlay { .bulk-delete-drawer-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(15, 23, 42, 0.18); background: rgba(15, 23, 42, 0.14);
z-index: 218; z-index: 218;
display: none; display: none;
} }
@@ -2239,7 +2259,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
</h1> </h1>
<div id="items-indicator" class="items-indicator">Objekte im System: 0</div> <div id="items-indicator" class="items-indicator">Objekte im System: 0</div>
<button type="button" id="bulk-delete-drawer-toggle" class="bulk-delete-drawer-toggle" aria-expanded="false" onclick="toggleBulkDeleteDrawer()"> <button type="button" id="bulk-delete-drawer-toggle" class="bulk-delete-drawer-toggle" aria-expanded="false" onclick="toggleBulkDeleteDrawer()">
<span class="drawer-icon">🗑</span> Löschen <span class="drawer-icon">⚙</span> Auswahl
</button> </button>
<div id="bulk-delete-drawer-overlay" class="bulk-delete-drawer-overlay" onclick="setBulkDeleteDrawer(false)"></div> <div id="bulk-delete-drawer-overlay" class="bulk-delete-drawer-overlay" onclick="setBulkDeleteDrawer(false)"></div>
<div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true"> <div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
@@ -2993,7 +3013,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
} }
if (toggle) { if (toggle) {
toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false'); toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span> Löschung' : '<span class="drawer-icon">🗑</span> Löschen'; toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span> Auswahl' : '<span class="drawer-icon">⚙</span> Auswahl';
} }
} }