Compacted sidebar, fixed search/toggle at top, narrower width
Deploy TrassenPlaner / deploy (push) Waiting to run
Details
Deploy TrassenPlaner / deploy (push) Waiting to run
Details
This commit is contained in:
parent
e775b187b0
commit
e20ebbfcf3
44
index.html
44
index.html
|
|
@ -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;">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue