v0.315.0 worked and looked, in the operator's words, messy: boxes of different widths stacked down
the page, with the same card shape around things you act on and things you only read. The mockup
approved on 2026-10-15 replaces it, and each of its three rules has a reason:
ONE COLUMN OF ONE WIDTH (820px). Differing widths read as a page assembled by accident.
SECTIONS ARE HAIRLINES, NOT CARDS. A card says "this is a thing you act on"; most of an app page
is a thing you READ, so a card there is a promise the content cannot keep.
A BOX MEANS SOMETHING. Exactly two remain: blue when the app is waiting for the household,
amber when something is risky. The exception-colour principle applied to shape as well.
What moved:
- the hero loses its box: a 64px logo tile, the name at 26px, the tagline, then hairline chips
(state, lifecycle, update) and meta text (the address, the last automatic update);
- the tabs are links with a 2px blue underline under the open one — no pills, no fills;
- sections are `padding: 28px 0` with a bottom hairline; rows are a 200px label column so every
value on the page starts at the same x, and stack under 720px;
- the after-start callout is now the FIRST thing on Beallitasok. A household opening a Plex that
wants its claim code should meet the code box, not a Restart button;
- "2. mentes beallitasa — <app>" and "<app> — Exportalas" are gone: they were the headings of
pages that no longer exist, on a tab that already says which app this is;
- the settings tab gains "Cim es kulcsok" with one address row, and the disabled subdomain input
that said the same thing is skipped for an installed app (the install wizard still asks);
- the "this app is already installed, the settings are read-only" BANNER becomes the hint under
the fields it is about;
- the install wizard gets the same back link, hero and column, so pressing Telepites does not
land the household on a page that looks like a different product.
THE AUTO-UPDATE SUCCESS BANNER IS GONE. It was a full-width blue box above the tabs, level with
"the update failed" and "your files are missing". A success that asked nothing of the household is
a date, and it is now meta text in the hero. Every banner that DOES need a decision — a failed
update, a hold, lost files, a missing drive, an interrupted install — is untouched, above the tabs,
exactly where R-571 puts it.
Tests: TestAppPage_OneColumnLayout (one column, one aria-current, no card-shaped section, no
success banner), TestAppPage_AutoUpdateSuccessIsMetaNotBanner, TestAppPage_CalloutsOnlyForAskAndWarn
(one blue callout on a waiting app and it comes first; one amber on a same-disk backup; none on the
good case). Four red-proofs recorded in REPORT.
app_row_dedup_gate convicted `.app-row`, correctly: that class already means "a row in the app
list". The app page's label/value row is `.app-field-row`. Restoring the list's own rule after an
over-broad rename was part of the fix.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0117kRTSgs3rJWUFGxyoWN6Y
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<title>PrivateBin — Felhom.eu</title>
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg?v=0.247.0">
|
||||
<link rel="stylesheet" href="/static/style.css?v=0.247.0">
|
||||
<link rel="stylesheet" href="/static/style.css?v=ASSET">
|
||||
<meta name="csrf-token" content="tok">
|
||||
<script>
|
||||
|
||||
@@ -171,37 +171,35 @@
|
||||
|
||||
|
||||
|
||||
<div class="app-page">
|
||||
|
||||
<div class="page-header">
|
||||
<div style="display:flex;align-items:center;gap:1rem">
|
||||
<a href="/stacks" class="btn btn-sm btn-outline">← Alkalmazások</a>
|
||||
<h2>PrivateBin</h2>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:.5rem">
|
||||
|
||||
<span class="stack-state-badge state-run">Fut</span>
|
||||
|
||||
|
||||
<span class="tag tag-error" title="A frissítés megállt: nincs friss mentés.">Megállítva — visszaállítás szükséges</span>
|
||||
<a href="https://paste.example.hu" target="_blank" class="btn btn-sm btn-primary" data-app-open="1">Megnyitás ↗</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a href="/stacks" class="app-back">← Alkalmazások</a>
|
||||
|
||||
<div class="app-info-hero">
|
||||
<img class="app-info-logo" src="/static/assets/privatebin-logo.svg"
|
||||
<div class="app-hero">
|
||||
<img class="app-hero-logo" src="/static/assets/privatebin-logo.svg"
|
||||
alt="PrivateBin" data-fallback="/static/app-placeholder.svg"
|
||||
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='\/static\/assets\/privatebin-logo.png';}else if(this.dataset.fallback&&this.dataset.step==='1'){this.dataset.step='2';this.src=this.dataset.fallback;}else{this.onerror=null;this.style.visibility='hidden';}">
|
||||
<div class="app-info-hero-text">
|
||||
<p class="app-info-tagline">Titkosított szövegmegosztás.</p>
|
||||
<div class="stack-meta-badges">
|
||||
<span class="meta-badge">~64M RAM</span>
|
||||
<span class="meta-badge">Hasznos eszközök</span>
|
||||
<span class="meta-badge meta-badge-warn">HDD szükséges</span>
|
||||
<span class="meta-badge meta-badge-ok">Magyar felület</span>
|
||||
<div class="app-hero-text">
|
||||
<h2 class="app-hero-name">PrivateBin</h2>
|
||||
<p class="app-hero-tagline">Titkosított szövegmegosztás.</p>
|
||||
<div class="app-chips">
|
||||
|
||||
<span class="app-chip" data-state-chip="running">● Fut</span>
|
||||
|
||||
|
||||
<span class="tag tag-error" title="A frissítés megállt: nincs friss mentés.">Megállítva — visszaállítás szükséges</span>
|
||||
|
||||
<span class="app-meta" data-app-address="1">paste.example.hu</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-hero-actions">
|
||||
<a href="https://paste.example.hu" target="_blank" class="btn btn-primary" data-app-open="1">Megnyitás ↗</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -236,7 +234,9 @@
|
||||
|
||||
|
||||
|
||||
<div class="app-info-card" id="app-run-card" data-run-card="1">
|
||||
|
||||
|
||||
<div class="app-section" id="app-run-card" data-run-card="1">
|
||||
<h3>Működés</h3>
|
||||
<p class="form-hint" data-run-state="running">Fut</p>
|
||||
<div style="display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem">
|
||||
@@ -249,12 +249,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="app-info-grid">
|
||||
<div class="app-sections">
|
||||
|
||||
<div class="app-info-card">
|
||||
<div class="app-section">
|
||||
<h3>Kezdeti belépési adatok</h3>
|
||||
<table class="initcred-table">
|
||||
|
||||
@@ -282,7 +280,7 @@
|
||||
|
||||
|
||||
|
||||
<div class="app-info-card">
|
||||
<div class="app-section">
|
||||
<h3>Alapértelmezett belépés</h3>
|
||||
<p class="app-info-creds">nincs</p>
|
||||
<p class="app-info-creds-warn">Az első bejelentkezés után azonnal változtasd meg!</p>
|
||||
@@ -290,25 +288,32 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="alert alert-info">
|
||||
Ez az alkalmazás már telepítve van. Az alábbi beállítások csak olvashatók.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="app-section">
|
||||
<h3>Cím és kulcsok</h3>
|
||||
|
||||
<div class="app-field-row">
|
||||
<div class="app-field-label">Cím</div>
|
||||
<div class="app-field-value" data-app-address-row="1">paste.example.hu</div>
|
||||
</div>
|
||||
|
||||
<form id="deploy-form" class="deploy-form">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
<p class="app-field-hint" data-readonly-hint="1">Ezek telepítéskor jöttek létre, és nem módosíthatók.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<form id="deploy-form" class="deploy-form">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -511,6 +516,7 @@ function deleteStaleDataRun(stackName, stalePath, btn) {
|
||||
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user