Compacted sidebar, fixed search/toggle at top, narrower width
Deploy TrassenPlaner / deploy (push) Waiting to run Details

This commit is contained in:
Johannes Baumeister 2026-04-15 20:44:39 +02:00
parent e775b187b0
commit e20ebbfcf3
1 changed files with 22 additions and 22 deletions

View File

@ -27,8 +27,8 @@
--bg-glass: rgba(255, 253, 235, 0.85); --bg-glass: rgba(255, 253, 235, 0.85);
/* Warm base */ /* Warm base */
--border-glass: rgba(204, 163, 0, 0.2); --border-glass: rgba(204, 163, 0, 0.2);
--sidebar-width: 380px; --sidebar-width: 300px;
--panel-width: 320px; --panel-width: 310px;
--success: #299500; --success: #299500;
/* CMYK 75 10 100 35 */ /* CMYK 75 10 100 35 */
--danger: #ef4444; --danger: #ef4444;
@ -96,14 +96,14 @@
/* Sidebar CRM Elements */ /* Sidebar CRM Elements */
.sidebar-header { .sidebar-header {
padding: 24px; padding: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
.sidebar-content { .sidebar-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 12px 16px;
} }
.search-box { .search-box {
@ -141,9 +141,9 @@
.owner-card { .owner-card {
background: white; background: white;
border-radius: 12px; border-radius: 10px;
padding: 16px; padding: 10px 12px;
margin-bottom: 12px; margin-bottom: 8px;
border: 1px solid rgba(204, 163, 0, 0.1); border: 1px solid rgba(204, 163, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
@ -583,30 +583,30 @@
<aside id="sidebar"> <aside id="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<img src="Logos/20201202-ENWELO-Logo-4c_ohne_Claim.png" alt="ENWELO" <img src="Logos/20201202-ENWELO-Logo-4c_ohne_Claim.png" alt="ENWELO"
style="width: 100%; max-width: 220px; margin-bottom: 20px;"> style="width: 100%; max-width: 180px; margin-bottom: 12px;">
<div style="display: flex; flex-direction: column;"> <div style="display: flex; flex-direction: column; margin-bottom: 12px;">
<h1 <h1
style="font-size: 20px; display: flex; align-items: center; gap: 10px; color: white; margin: 0; font-weight: 800; letter-spacing: -0.5px;"> style="font-size: 18px; display: flex; align-items: center; gap: 8px; color: white; margin: 0; font-weight: 800; letter-spacing: -0.5px;">
<i data-lucide="map-pin"></i> TrassenPlaner Basic <i data-lucide="map-pin"></i> TrassenPlaner
</h1> </h1>
<span <span
style="font-size: 11px; color: var(--info); opacity: 0.9; margin-left: 34px; margin-top: -2px; font-weight: 600;">v1.0.4</span> style="font-size: 10px; color: var(--info); opacity: 0.9; margin-left: 30px; margin-top: -2px; font-weight: 600;">v1.0.5</span>
</div> </div>
</div>
<div class="sidebar-content"> <div id="quick-toggles" style="padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 12px; margin-top: 8px;">
<div id="quick-toggles" style="padding: 0 0 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 15px;"> <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: white; font-size: 12px; font-weight: 600; padding: 4px 0;">
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; color: white; font-size: 13px; font-weight: 600; padding: 4px 0;"> <input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked); document.getElementById('status-legend').style.display = this.checked ? 'block' : 'none';" style="width: 14px; height: 14px; cursor: pointer;">
<input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked); document.getElementById('status-legend').style.display = this.checked ? 'block' : 'none';" style="width: 16px; height: 16px; cursor: pointer;"> <span style="display: flex; align-items: center; gap: 6px;">
<span style="display: flex; align-items: center; gap: 8px;"> <i data-lucide="shield-check" style="width: 16px; color: var(--info);"></i> Sicherungsstand aktiv
<i data-lucide="shield-check" style="width: 18px; color: var(--info);"></i> Sicherungsstand anzeigen
</span> </span>
</label> </label>
</div> </div>
<div id="owner-search-container" style="margin-top: 0px; margin-bottom: 15px;"> <div id="owner-search-container" style="margin-top: 8px;">
<input type="text" class="search-box" id="owner-search" placeholder="Eigentümer suchen..." <input type="text" class="search-box" id="owner-search" placeholder="Eigentümer suchen..."
style="margin-bottom: 0px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: white;"> style="margin-bottom: 0; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: white; font-size: 13px;">
</div> </div>
</div>
<div class="sidebar-content">
<div id="owner-list"> <div id="owner-list">
<div style="text-align: center; color: #888; margin-top: 40px;"> <div style="text-align: center; color: #888; margin-top: 40px;">