gitea-enwelo-jba
/
bwsamern-ohne_standortplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Compacting sidebar, removing auto-load section, and optimizing input layouts
Deploy Bürgerwind / deploy (push) Successful in 17s Details

This commit is contained in:
Johannes Baumeister 2026-05-13 09:03:45 +02:00
parent 636286024c
commit a47047d34d
2 changed files with 75 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
index.html
View File

@ -44,99 +44,81 @@
<div class="section"> <div class="section">
<h2>Anlagen-Konfiguration</h2> <h2>Anlagen-Konfiguration</h2>
<div class="control-group"> <div style="display: flex; gap: 8px; margin-bottom: 6px;">
<label for="turbineManufacturer">Hersteller</label> <div style="flex: 1;">
<select id="turbineManufacturer" class="input-styled"> <label for="turbineManufacturer" class="label-small">Hersteller</label>
<option value="Enercon">Enercon</option> <select id="turbineManufacturer" class="input-styled input-small">
<option value="Nordex">Nordex</option> <option value="Enercon">Enercon</option>
<option value="Vestas">Vestas</option> <option value="Nordex">Nordex</option>
<option value="GE">GE</option> <option value="Vestas">Vestas</option>
</select> <option value="GE">GE</option>
</select>
</div>
<div style="flex: 1;">
<label for="turbineType" class="label-small">Anlagentyp</label>
<input type="text" id="turbineType" class="input-styled input-small" placeholder="z.B. V162">
</div>
</div> </div>
<div class="control-group"> <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
<label for="turbineType">Anlagentyp</label> <label for="rotorDiameter" class="label-small" style="flex: 1; margin: 0;">Rotordurchmesser (m)</label>
<input type="text" id="turbineType" class="input-styled" placeholder="z.B. V162"> <input type="number" id="rotorDiameter" class="input-styled input-small" value="160" style="width: 60px;">
</div> </div>
<div class="control-group"> <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
<label for="rotorDiameter">Rotordurchmesser (m)</label> <label for="hubHeight" class="label-small" style="flex: 1; margin: 0;">Nabenhöhe (m)</label>
<input type="number" id="rotorDiameter" class="input-styled" value="160"> <input type="number" id="hubHeight" class="input-styled input-small" value="165" style="width: 60px;">
</div> </div>
<div class="control-group"> <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
<label for="hubHeight">Nabenhöhe (m)</label> <label for="foundationRadius" class="label-small" style="flex: 1; margin: 0;">Fundament Radius (m)</label>
<input type="number" id="hubHeight" class="input-styled" value="165"> <input type="number" id="foundationRadius" class="input-styled input-small" value="15" style="width: 60px;">
</div>
<div class="control-group">
<label for="foundationRadius">Fundament Radius (m)</label>
<input type="number" id="foundationRadius" class="input-styled" value="15">
</div> </div>
</div>
<div class="section"> <div class="section">
<h2>Werkzeuge</h2> <h2>Werkzeuge</h2>
<div class="control-group" style="display: flex; gap: 8px; flex-wrap: wrap;"> <div class="control-group" style="display: flex; gap: 6px; flex-wrap: wrap;">
<button class="btn-primary" id="btnPlaceTurbine" style="flex: 1; min-width: 140px;"> <button class="btn-primary btn-mini" id="btnPlaceTurbine" style="flex: 1.2; min-width: 100px;">
<span>📍</span> Anlage setzen <span>📍</span> Anlage setzen
</button> </button>
<button class="btn-secondary" id="btnManageOwners" <button class="btn-secondary btn-mini" id="btnManageOwners"
style="flex: 1; min-width: 140px; margin-top: 0;"> style="flex: 1.2; min-width: 100px; margin-top: 0;">
<span>👥</span> Eigentümer verwalten <span>👥</span> Eigentümer
</button> </button>
<button class="btn-secondary" id="btnMeasureDist" title="Distanz messen" <button class="btn-secondary btn-mini" id="btnMeasureDist" title="Distanz messen"
style="flex: 0.5; padding: 10px; margin-top: 0;">📏</button> style="flex: 0.4; padding: 6px; margin-top: 0;">📏</button>
<button class="btn-secondary" id="btnMeasureArea" title="Fläche messen" <button class="btn-secondary btn-mini" id="btnMeasureArea" title="Fläche messen"
style="flex: 0.5; padding: 10px; margin-top: 0;">📐</button> style="flex: 0.4; padding: 6px; margin-top: 0;">📐</button>
</div> </div>
</div> </div>
<!-- UTM Coordinate Input --> <!-- UTM Coordinate Input -->
<div class="section" <div class="section"
style="border: 1px solid var(--border-color); padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.02);"> style="border: 1px solid var(--border-color); padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.02);">
<h2 style="margin-bottom: 10px;">Manuelle Koordinaten (UTM)</h2> <h2 style="margin-bottom: 6px;">UTM-Position</h2>
<div style="display: flex; gap: 8px; margin-bottom: 10px;"> <div style="display: flex; gap: 6px; margin-bottom: 6px;">
<div style="flex: 1;"> <div style="flex: 1;">
<label <label class="label-small">Rechts (E)</label>
style="font-size: 0.75rem; color: var(--text-dim); display: block; margin-bottom: 3px;">Rechtswert <input type="number" id="utm-e" class="input-styled input-small" placeholder="32..." step="0.01">
(E)</label>
<input type="number" id="utm-e" class="input-styled" placeholder="32..." step="0.01">
</div> </div>
<div style="flex: 1;"> <div style="flex: 1;">
<label <label class="label-small">Hoch (N)</label>
style="font-size: 0.75rem; color: var(--text-dim); display: block; margin-bottom: 3px;">Hochwert <input type="number" id="utm-n" class="input-styled input-small" placeholder="5..." step="0.01">
(N)</label>
<input type="number" id="utm-n" class="input-styled" placeholder="5..." step="0.01">
</div> </div>
</div> </div>
<button class="btn-primary" id="btnCreateAtUTM" style="font-size: 0.8rem; padding: 8px;"> <button class="btn-primary btn-mini" id="btnCreateAtUTM" style="font-size: 0.75rem;">
An UTM-Position erzeugen An UTM erzeugen
</button> </button>
</div> </div>
<!-- Daten-Laden Section -->
<div class="section" id="importSection">
<h2>Daten-Laden & Automatik</h2>
<div
style="background: rgba(255, 136, 0, 0.1); border: 1px dashed #ff8800; padding: 10px; border-radius: 8px;">
<p style="font-size: 0.75rem; color: #ff8800; margin-bottom: 8px;">
<b>1. Einmalig:</b> Dateien (.shp + .dbf) wählen ODER auf Karte ziehen.<br>
<b>2. Dauerhaft machen:</b> Unten auf "Daten-Bundle speichern" klicken und in /data als
<i>baked_layers.js</i> speichern.
</p>
<button class="btn-secondary" id="btnManualImport"
style="border-color: #ff8800; color: #ff8800;">
📂 Dateien wählen
</button>
<input type="file" id="manualShpInput" style="display: none;" multiple accept=".shp,.dbf">
<button class="btn-secondary" id="btnExportBundle"
style="margin-top: 10px; background: #ff8800; color: white; border: none;">
💾 Daten-Bundle speichern
</button>
</div>
</div>
<div class="section"> <div class="section">
<h2>Projektverwaltung</h2> <h2>Projekt</h2>
<button class="btn-secondary" id="btnSaveProject">Projekt speichern (Lokal)</button> <div style="display: flex; flex-direction: column; gap: 4px;">
<button class="btn-primary" id="btnSaveDB">In Datenbank speichern</button> <button class="btn-primary btn-mini" id="btnSaveDB">In DB speichern</button>
<button class="btn-secondary" id="btnLoadProject">Projekt laden (Lokal)</button> <div style="display: flex; gap: 4px;">
<button class="btn-secondary btn-mini" id="btnSaveProject" style="flex: 1;">Sichern</button>
<button class="btn-secondary btn-mini" id="btnLoadProject" style="flex: 1;">Laden</button>
</div>
</div>
<input type="file" id="projectInput" style="display: none;" accept=".json"> <input type="file" id="projectInput" style="display: none;" accept=".json">
</div> </div>

34
style.css
View File

@ -46,7 +46,7 @@ body {
} }
.sidebar-header { .sidebar-header {
padding: 15px; padding: 10px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@ -62,33 +62,39 @@ body {
.sidebar-content { .sidebar-content {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 12px; padding: 8px;
} }
.section { .section {
margin-bottom: 15px; margin-bottom: 8px;
} }
.section h2 { .section h2 {
font-size: 0.75rem; font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: var(--text-dim); color: var(--text-dim);
margin-bottom: 8px; margin-bottom: 4px;
} }
/* Control Elements */ /* Control Elements */
.control-group { .control-group {
margin-bottom: 12px; margin-bottom: 6px;
} }
.control-group label { .control-group label {
display: block; display: block;
font-size: 0.8rem; font-size: 0.75rem;
margin-bottom: 4px; margin-bottom: 2px;
color: var(--text-main); color: var(--text-main);
} }
.label-small {
font-size: 0.7rem !important;
color: var(--text-dim);
margin-bottom: 2px;
}
.input-styled { .input-styled {
width: 100%; width: 100%;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -100,6 +106,11 @@ body {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.input-small {
padding: 4px 6px !important;
font-size: 0.8rem !important;
}
.input-styled option { .input-styled option {
background: #1e1e1e; background: #1e1e1e;
color: white; color: white;
@ -107,7 +118,7 @@ body {
/* Compact number inputs */ /* Compact number inputs */
.input-number { .input-number {
width: 80px !important; width: 60px !important;
} }
.input-styled:focus { .input-styled:focus {
@ -133,6 +144,11 @@ body {
gap: 6px; gap: 6px;
} }
.btn-mini {
padding: 4px 8px !important;
font-size: 0.75rem !important;
}
.btn-primary:hover { .btn-primary:hover {
background: var(--primary-hover); background: var(--primary-hover);
transform: translateY(-1px); transform: translateY(-1px);