Schublade in der HoneyBar: Kacheln trugen das Polster der Listenpunkte
.menu a ist spezifischer als .d-app — die Kacheln bekamen dadurch padding 6px 8px und text-align left statt ihrer eigenen Werte. Das faellt in der HoneyBar auf, nicht auf dem Schreibtisch: dort steht die Schublade in .startmenu und wird spezifisch genug angesprochen. Reihenfolge half nicht, nur Spezifitaet. Dazu ein Waechter: Ein Backtick in einem Kommentar von honeybar.js beendet die Vorlagenzeichenkette mitten im CSS und zerlegt die Datei — zweimal passiert, jetzt bricht der Test.
This commit is contained in:
1 parent
c070f301bb
commit
b46b699576
2 files changed
+62
-12
No files matched your search
+20
-12
@@ -188,6 +188,12 @@
|
||||
color: var(--p); text-shadow: var(--glow);
|
||||
}
|
||||
.menu[data-open="1"] { display: flex; }
|
||||
/* Die Listenpunkte des Systemmenues. Sie stehen VOR der Schublade:
|
||||
Die Regel "menu a" ist spezifischer als die Klasse der Kachel, und
|
||||
danach gewaehlt haetten die Kacheln Polster und Ausrichtung der Liste
|
||||
geerbt statt ihrer eigenen. Genau das war passiert. */
|
||||
.menu a, .menu button { text-align: left; padding: 6px 8px; color: var(--p-mid); }
|
||||
.menu a:hover, .menu button:hover { background: var(--p-faint); color: var(--p); }
|
||||
/* Die Schublade: Symbol, Name, Untertitel. Sie wird absichtlich
|
||||
aufgemacht, weil man etwas sucht — also wird gelesen, nicht nur
|
||||
wiedererkannt. Deshalb stehen hier immer Namen, anders als im
|
||||
@@ -196,7 +202,11 @@
|
||||
/* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
|
||||
auseinanderdruecken, und die Schublade wird breiter als der Schirm. */
|
||||
.drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
|
||||
.d-app {
|
||||
/* .menu .d-app, nicht .d-app: Die Kachel ist ein <a> im Menue, und
|
||||
"menu a" oben ist spezifischer als eine einzelne Klasse — die
|
||||
Kacheln trugen dadurch Polster und Ausrichtung der Listenpunkte.
|
||||
Reihenfolge hilft dagegen nicht, nur Spezifitaet. */
|
||||
.menu .d-app {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 5px;
|
||||
padding: 9px 4px; text-align: center; color: var(--p-mid);
|
||||
border: 1px solid transparent; min-width: 0;
|
||||
@@ -204,23 +214,21 @@
|
||||
/* Die Regel fuer a und button oben setzt nowrap — richtig fuer den
|
||||
Streifen, falsch
|
||||
hier: Der Untertitel soll umbrechen statt abgeschnitten zu werden. */
|
||||
.d-name, .d-sub { max-width: 100%; }
|
||||
.d-sub { white-space: normal; }
|
||||
.d-name { overflow: hidden; text-overflow: ellipsis; }
|
||||
.d-app:hover { border-color: var(--p-dim); color: var(--p); }
|
||||
.d-app[aria-current="page"] { border-color: var(--p); color: var(--p); }
|
||||
.d-app .ico { width: 24px; height: 24px; }
|
||||
.d-app .ico svg { width: 24px; height: 24px; }
|
||||
.d-name { letter-spacing: .08em; }
|
||||
.menu .d-name, .menu .d-sub { max-width: 100%; }
|
||||
.menu .d-sub { white-space: normal; }
|
||||
.menu .d-name { overflow: hidden; text-overflow: ellipsis; }
|
||||
.menu .d-app:hover { background: none; border-color: var(--p-dim); color: var(--p); }
|
||||
.menu .d-app[aria-current="page"] { border-color: var(--p); color: var(--p); }
|
||||
.menu .d-app .ico { width: 24px; height: 24px; }
|
||||
.menu .d-app .ico svg { width: 24px; height: 24px; }
|
||||
.menu .d-name { letter-spacing: .08em; }
|
||||
/* Der Untertitel darf umbrechen, aber nicht wachsen — sonst stehen die
|
||||
Kacheln unterschiedlich hoch. */
|
||||
.d-sub {
|
||||
.menu .d-sub {
|
||||
font-size: 10px; line-height: 1.25; color: var(--p-dim);
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.menu a, .menu button { text-align: left; padding: 6px 8px; color: var(--p-mid); }
|
||||
.menu a:hover, .menu button:hover { background: var(--p-faint); color: var(--p); }
|
||||
.menu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
|
||||
.menu .head {
|
||||
padding: 4px 8px; font-size: 10px; letter-spacing: .18em;
|
||||
|
||||
@@ -4,6 +4,8 @@ import (
|
||||
"encoding/json"
|
||||
"net/http"
|
||||
"net/http/httptest"
|
||||
"os"
|
||||
"strings"
|
||||
"testing"
|
||||
|
||||
"honeyos/internal/store"
|
||||
@@ -43,3 +45,43 @@ func TestMitOrtKommtDasWetter(t *testing.T) {
|
||||
t.Fatalf("falsches Wetter: %+v", w)
|
||||
}
|
||||
}
|
||||
|
||||
// Die HoneyBar bringt ihr CSS und ihr Markup in Vorlagenzeichenketten mit.
|
||||
// Ein Backtick in einem Kommentar beendet die Zeichenkette mittendrin — die
|
||||
// Datei ist dann kaputt, und zwar nur in der HoneyBar, nicht auf dem
|
||||
// Schreibtisch. Genau das ist zweimal passiert; deshalb dieser Wächter.
|
||||
func TestHoneyBarOhneBacktickInKommentaren(t *testing.T) {
|
||||
b, err := os.ReadFile("web/honeybar/honeybar.js")
|
||||
if err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
src := string(b)
|
||||
|
||||
imBlock := false
|
||||
for nr, zeile := range strings.Split(src, "\n") {
|
||||
rest := zeile
|
||||
for {
|
||||
if imBlock {
|
||||
ende := strings.Index(rest, "*/")
|
||||
if ende < 0 {
|
||||
if strings.Contains(rest, "`") {
|
||||
t.Errorf("Zeile %d: Backtick in einem Kommentar — das beendet die Vorlagenzeichenkette:\n %s", nr+1, strings.TrimSpace(zeile))
|
||||
}
|
||||
break
|
||||
}
|
||||
if strings.Contains(rest[:ende], "`") {
|
||||
t.Errorf("Zeile %d: Backtick in einem Kommentar — das beendet die Vorlagenzeichenkette:\n %s", nr+1, strings.TrimSpace(zeile))
|
||||
}
|
||||
rest = rest[ende+2:]
|
||||
imBlock = false
|
||||
continue
|
||||
}
|
||||
start := strings.Index(rest, "/*")
|
||||
if start < 0 {
|
||||
break
|
||||
}
|
||||
rest = rest[start+2:]
|
||||
imBlock = true
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user