Relay 0.7.1: de twee eigenaarskaders opgeruimd
Vier punten van de gebruiker na een dag met 0.7.0. Drie zijn woordkeuze: "Accepted owners" en "Waiting list" heten "Accepted" en "Waiting", de badge "Waiting" is weg en de regel onder het adres is weg. De badge kon eruit zonder verlies, want het onderscheid waarvoor hij er was blijft staan: een geblokkeerde eigenaar is nu precies de regel met badge. Het vierde punt was echt werk: elke rij is nu even hoog. Een rij werd hoger op het moment dat je hem een naam gaf, want het label duwde het id naar een derde regel. Nu deelt het id de onderregel met de tijden, afgekapt met een puntje en volledig in de tooltip. Een vaste hoogte in CSS laat witruimte achter onder een rij zonder label en leest dan als een weergavefout. Nagekeken in voorbeeld/: vijf rijen, alle vijf 68px, ook tijdens het labelen. Op het apparaat nog ongezien, want er is geen image: VERSION, het manifest en de compose staan op 0.7.1 zonder digest. Suite groen: 42, 90, 36, 22, 54 en 68 goed, 0 fout. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harmen
@@ -431,32 +431,33 @@ body {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* De regel onder het adres: hoe het van buiten heet. Geen kader eromheen, want
|
||||
het is uitleg bij de waarde erboven en geen tweede waarde. */
|
||||
.note {
|
||||
margin: 0.7rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-sec);
|
||||
}
|
||||
.note code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.95em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Lijstregels ────────────────────────────────────────────────────────── */
|
||||
.list-item {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.list-item:last-child { border-bottom: none; }
|
||||
.list-item-title { font-size: 0.88rem; font-weight: 500; overflow-wrap: anywhere; }
|
||||
/* Elke rij is twee regels hoog, in alle lijsten, en dat wordt hier dichtgehouden
|
||||
op de drie manieren waarop het alsnog kon verschuiven: een lange waarde die
|
||||
afbreekt naar een derde regel (afkappen met een puntje, de volledige waarde
|
||||
blijft als tooltip), een onderregel zonder inhoud (min-height reserveert de
|
||||
regel), en het invoerveld tijdens labelen, dat lager is dan twee regels tekst
|
||||
(min-height op owner-who). Waarom dit een eis is: de hoogte veranderde zodra je
|
||||
een rij labelde. Verzoek van de gebruiker, 10-09-2026. */
|
||||
.list-item-title {
|
||||
font-size: 0.88rem; font-weight: 500; line-height: 1.5;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.list-item-title.mono { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400; }
|
||||
.list-item-sub { font-size: 0.72rem; color: var(--text-sec); margin-top: 0.1rem; overflow-wrap: anywhere; }
|
||||
.list-item-sub {
|
||||
font-size: 0.72rem; color: var(--text-sec); margin-top: 0.1rem; line-height: 1.5;
|
||||
min-height: 1.5em;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.list-item-sub.mono { font-family: var(--font-mono); }
|
||||
.list-empty { font-size: 0.78rem; color: var(--text-ter); padding: 0.7rem 0; }
|
||||
.owner-who { min-width: 0; }
|
||||
/* 0.88 × 1.5 voor de titel, 0.72 × 1.5 plus 0.1 marge voor de onderregel. */
|
||||
.owner-who { min-width: 0; min-height: 2.5rem; }
|
||||
/* De badge duwt zichzelf naar rechts en de knoppen komen erachter. Zo staat de
|
||||
badge op elke regel op dezelfde plek, ook op een regel zonder knoppen in beeld. */
|
||||
.owner-tags { display: flex; gap: 0.5rem; flex-shrink: 0; margin-left: auto; }
|
||||
@@ -533,7 +534,6 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
}
|
||||
.badge-pos { background: var(--pos-bg); color: var(--pos); }
|
||||
.badge-neg { background: var(--neg-bg); color: var(--neg); }
|
||||
.badge-neutral { background: var(--neutral-bg); color: var(--text-sec); }
|
||||
|
||||
/* ── Het menu rechtsboven ───────────────────────────────────────────────── */
|
||||
.menu { position: relative; flex-shrink: 0; }
|
||||
@@ -765,7 +765,7 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
|
||||
<!-- ── De twee lijsten ───────────────────────────────────────────────── -->
|
||||
<div class="card col-6">
|
||||
<div class="card-head"><h2 class="t-h3">Accepted owners</h2></div>
|
||||
<div class="card-head"><h2 class="t-h3">Accepted</h2></div>
|
||||
<div id="allowed"></div>
|
||||
</div>
|
||||
|
||||
@@ -782,7 +782,7 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
heet in owners.json nog `rejected`; hernoemen zou een migratie zijn voor
|
||||
een woord dat niemand ziet. -->
|
||||
<div class="card col-6">
|
||||
<div class="card-head"><h2 class="t-h3">Waiting list</h2></div>
|
||||
<div class="card-head"><h2 class="t-h3">Waiting</h2></div>
|
||||
<div id="refused"></div>
|
||||
</div>
|
||||
|
||||
@@ -791,16 +791,11 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
de rij bovenin is wat je nakomt. -->
|
||||
<div class="card col-full">
|
||||
<div class="card-head"><h2 class="t-h3">Relay address</h2></div>
|
||||
<!-- Hieronder stond in 0.7.0 een regel over de vorm achter een reverse
|
||||
proxy (wss://, zonder poort). Eruit op verzoek van de gebruiker,
|
||||
10-09-2026: dit kader is het adres en niets anders. Wat er over
|
||||
bereikbaarheid van buiten te zeggen valt, staat in "About this app". -->
|
||||
<div class="url-box" id="relay-url">unknown</div>
|
||||
<!-- De tweede regel is er sinds 0.7.0. Het adres hierboven werkt binnen je
|
||||
eigen netwerk; van buiten loopt het via een reverse proxy, en dan is de
|
||||
vorm anders én is dit de meest gemaakte fout: het schema wordt wss://
|
||||
en de poort valt weg, want de proxy luistert op 443. -->
|
||||
<p class="note">
|
||||
That address works inside your own network. Through a reverse proxy with a certificate it
|
||||
becomes <code>wss://your.domain</code>, <strong>without</strong> a port number: the proxy
|
||||
listens on 443 and forwards to this one.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1112,12 +1107,33 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
|
||||
// Met een label staat het label bovenaan en het id eronder; zonder label is
|
||||
// het id de titel. Zo staat het meest zeggende altijd op de eerste regel.
|
||||
//
|
||||
// ALTIJD TWEE REGELS, en dat is de kern van deze opzet (verzoek gebruiker,
|
||||
// 10-09-2026). Tot 0.7.0 kwam er een derde regel bij zodra er een label
|
||||
// stond, want de tweede was dan het id; het gevolg was dat een rij hoger
|
||||
// werd op het moment dat je hem labelde en dat de rijen in de twee lijsten
|
||||
// niet meer gelijk stonden. Nu deelt het id de onderregel met de tijden. Een
|
||||
// vaste hoogte in CSS zou hetzelfde lijken te doen, maar dan staat er witruimte
|
||||
// onder een rij zonder label en dat leest als een weergavefout.
|
||||
if (entry.label) {
|
||||
title.className = 'list-item-title';
|
||||
title.textContent = entry.label;
|
||||
sub.className = 'list-item-sub mono';
|
||||
sub.textContent = shorten(entry.id);
|
||||
sub.title = entry.id;
|
||||
title.title = entry.label;
|
||||
sub.className = 'list-item-sub';
|
||||
// Het id houdt zijn eigen letter, ook op een gedeelde regel: het is het
|
||||
// enige hier dat je teken voor teken vergelijkt.
|
||||
var idDeel = document.createElement('span');
|
||||
idDeel.className = 'mono';
|
||||
idDeel.textContent = shorten(entry.id);
|
||||
idDeel.title = entry.id;
|
||||
sub.appendChild(idDeel);
|
||||
var rest = describe(entry, kind);
|
||||
if (rest) {
|
||||
var restDeel = document.createElement('span');
|
||||
restDeel.textContent = ' · ' + rest;
|
||||
restDeel.title = describeExact(entry);
|
||||
sub.appendChild(restDeel);
|
||||
}
|
||||
} else {
|
||||
title.className = 'list-item-title mono';
|
||||
title.textContent = shorten(entry.id);
|
||||
@@ -1129,16 +1145,6 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
who.appendChild(title);
|
||||
who.appendChild(sub);
|
||||
|
||||
// Met een label is er een derde regel nodig voor de tijden, want de tweede is
|
||||
// dan het id.
|
||||
if (entry.label) {
|
||||
var extra = document.createElement('div');
|
||||
extra.className = 'list-item-sub';
|
||||
extra.textContent = describe(entry, kind);
|
||||
extra.title = describeExact(entry);
|
||||
who.appendChild(extra);
|
||||
}
|
||||
|
||||
row.appendChild(who);
|
||||
|
||||
// De badge staat BUITEN het hover-blok, en dat is geen slordigheid maar het
|
||||
@@ -1146,10 +1152,14 @@ body.is-busy .list-item button { cursor: progress; }
|
||||
// is niet te zien wélke van de twee soorten een regel is zolang je er niet
|
||||
// overheen gaat: precies de informatie waarvoor de twee kaders zijn
|
||||
// samengevoegd.
|
||||
//
|
||||
// Alleen "Blocked" nog, sinds 10-09-2026 op verzoek van de gebruiker. Een
|
||||
// badge "Waiting" in een kader dat "Waiting" heet zegt niets extra; het
|
||||
// onderscheid dat de badge moest maken blijft staan, want een geblokkeerde
|
||||
// regel is nu precies de regel mét badge.
|
||||
var tags = document.createElement('div');
|
||||
tags.className = 'owner-tags';
|
||||
if (kind === 'blocked') { tags.appendChild(badge('Blocked', 'badge-neg')); }
|
||||
if (kind === 'rejected') { tags.appendChild(badge('Waiting', 'badge-neutral')); }
|
||||
row.appendChild(tags);
|
||||
|
||||
var actions = document.createElement('div');
|
||||
|
||||
Reference in New Issue
Block a user