admin/Smart-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zeitleiste: Karte je Eintrag mit Bearbeiten, Pausieren/Fortsetzen, Loeschen

Browse Source 
Ein Klick auf einen Eintrag oeffnete bisher gleich den Editor - pausieren
und loeschen ging nur in der Liste. Jetzt oeffnet sich eine kleine Karte:
was die Automatik tut, wann, wie sie heute steht, die Bedingung, und die
Knoepfe Bearbeiten, Pausieren bzw. Fortsetzen und Loeschen. Auch die
Eintraege in den Baendern "Jederzeit" und "Pausiert" oeffnen sie.

Pausieren und Loeschen gehen ueber toggleAutomation und deleteAutomation
aus autoActionFuncs.js - dieselben Wege wie in der Liste, samt Rueckfrage
bei abhaengigen Automatiken. Die Karte schliesst per Kreuz, Esc oder Klick
daneben; solange sie offen ist, leuchtet die Kette des Eintrags.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
admin
2026-09-15 13:43:11 +02:00
co-authored by Claude Opus 5
parent d291f063f5
commit 2aadb667fb
2 changed files with 161 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/solar.css
+58
View File
@@ -3100,6 +3100,64 @@ input[type='range']::-webkit-slider-runnable-track {
.zl-l-balken { width: 22px; height: 7px; border-radius: 4px; background: rgba(95, 176, 220, .22); border: 1px solid rgba(95, 176, 220, .4); }
.zl-l-kette { width: 22px; border-top: 1.2px dashed rgba(154, 166, 173, .7); }
/* Karte zu einem Eintrag: schwebt ueber der Zeitleiste, Akzent der Bahn. */
.zl { position: relative; }
.zl-karte {
position: absolute;
z-index: 20;
width: min(22rem, 100%);
padding: .7rem .85rem .75rem;
border-radius: var(--ton-radius-klein, .5rem);
border: 1px solid rgba(var(--zl-farbe-rgb), .45);
border-top: 3px solid var(--zl-farbe);
background: var(--ton-flaeche-2, #2b3237);
box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
font-size: .8rem;
}
.zl-karte-kopf {
display: flex;
align-items: center;
gap: .45rem;
margin-bottom: .45rem;
}
.zl-karte-kopf .bi { color: var(--zl-farbe); }
.zl-karte-name {
flex: 1 1 auto;
font: 500 .92rem var(--font-anzeige, inherit);
color: var(--ton-schrift, #e8ede9);
}
.zl-karte .btn-close.zl-karte-zu { font-size: .6rem; opacity: .6; }
.zl-karte-zeile {
display: flex;
gap: .5rem;
align-items: baseline;
padding: .12rem 0;
color: var(--ton-schrift, #e8ede9);
}
.zl-karte-zeile .bi { color: var(--ton-schrift-3, #6f7a81); flex: none; }
.zl-karte-stand.gut, .zl-karte-stand.gut .bi { color: var(--ton-gut, #4caf7d); }
.zl-karte-stand.leise { color: var(--ton-schrift-2, #9aa6ad); }
.zl-karte-wenn {
margin-top: .35rem;
padding-top: .35rem;
border-top: 1px solid var(--zl-linie);
color: var(--ton-schrift-3, #6f7a81);
font-size: .72rem;
line-height: 1.4;
max-height: 5.6em;
overflow: auto;
}
.zl-karte-knoepfe {
display: flex;
gap: .35rem;
margin-top: .65rem;
}
.zl-karte-knoepfe .btn.zl-karte-weg {
margin-left: auto;
color: var(--ton-schrift-3, #6f7a81);
}
.zl-karte-knoepfe .btn.zl-karte-weg:hover { color: var(--ton-schlecht, #e06060); }
/* Ansicht umschalten: eine Klasse mehr als Bootstrap (solar.css laedt vorher). */
.zl-ansicht .btn.active {
background: rgba(0, 120, 143, .25);