commit bccc3407f698280c42edf805591e41f727d7b226
parent 93f04e70f6967d1288db48a8e151f74dea46521d
Author: claude-cdn-bot <claude-bot@users.noreply.github.com>
Date: Tue, 13 Oct 2026 08:08:59 +0000
feat(ui): file page shows links before the preview and drops the type badge
- Links (CDN page, raw, download, embed) now come right after the title/actions, so on a phone they are visible
without scrolling past a long file; the preview follows.
- Removed the file-type badge from the file header: the extension pill already says the type.
- 3 new browser checks (65 total).
Diffstat:
2 files changed, 25 insertions(+), 36 deletions(-)
diff --git a/app/static/app.css b/app/static/app.css
@@ -664,17 +664,8 @@ html[data-notice="off"] .site-notice { display: none; }
/* ============================== 7. File page ============================== */
.file-view { display: grid; gap: 1.5rem; }
.file-head {
- display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
- align-items: center; gap: 1rem 1.25rem;
-}
-.ft-badge {
- --ft: var(--muted);
- display: grid; place-items: center;
- width: 4rem; height: 4rem; border-radius: 16px;
- background: color-mix(in srgb, var(--ft) 14%, var(--surface));
- border: 1px solid color-mix(in srgb, var(--ft) 35%, var(--border));
- color: color-mix(in srgb, var(--ft) 62%, var(--text));
- font-family: var(--mono); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
+ display: grid; grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center; gap: 0.9rem 1.25rem;
}
.file-name { font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem); overflow-wrap: anywhere; letter-spacing: -0.02em; }
.file-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0.55rem 0 0; }
@@ -911,10 +902,9 @@ html[data-notice="off"] .site-notice { display: none; }
@media (max-width: 640px) {
:root { --gutter: 1rem; }
.page { padding-top: 1.1rem; }
- .file-head { grid-template-columns: auto minmax(0, 1fr); }
- .file-head__actions { grid-column: 1 / -1; justify-content: stretch; }
+ .file-head { grid-template-columns: minmax(0, 1fr); }
+ .file-head__actions { justify-content: stretch; }
.file-head__actions .btn { flex: 1 1 0; }
- .ft-badge { width: 3.2rem; height: 3.2rem; border-radius: 13px; font-size: 0.7rem; }
.link-row { grid-template-columns: minmax(0, 1fr) auto; }
.link-row__label { grid-column: 1 / -1; }
.link-row__label small { display: inline; margin-left: 0.4rem; }
diff --git a/app/templates/_page_file.html b/app/templates/_page_file.html
@@ -29,7 +29,6 @@
<article class="file-view">
<header class="file-head">
- <div class="ft-badge" data-name="{{ filename }}" aria-hidden="true"><span>{{ ext[:5] | upper if ext else 'FILE' }}</span></div>
<div class="file-head__main">
<h1 class="file-name">{{ filename }}</h1>
<p class="file-meta-row">
@@ -45,6 +44,27 @@
</div>
</header>
+ <section class="link-list" aria-labelledby="links-title">
+ <h2 id="links-title" class="section-title">Links</h2>
+ {% macro link_row(label, value, hint='') %}
+ <div class="link-row">
+ <span class="link-row__label">{{ label }}{% if hint %}<small>{{ hint }}</small>{% endif %}</span>
+ <input class="link-row__value" type="text" readonly value="{{ value }}" aria-label="{{ label }}" data-select-on-focus>
+ <button type="button" class="btn btn-sm" data-copy="{{ value }}" aria-label="Copy {{ label }}">{{ icon('copy', 14) }}<span>Copy</span></button>
+ </div>
+ {% endmacro %}
+ {{ link_row('CDN page', page_url, 'This page') }}
+ {{ link_row('Raw link', raw_url, 'For embedding') }}
+ {{ link_row('Download link', dl_url, 'Starts a download') }}
+ {% if embed %}
+ <div class="link-row link-row--code">
+ <span class="link-row__label">Embed<small>HTML snippet</small></span>
+ <code class="link-row__code">{{ embed }}</code>
+ <button type="button" class="btn btn-sm" data-copy="{{ embed }}" aria-label="Copy embed snippet">{{ icon('copy', 14) }}<span>Copy</span></button>
+ </div>
+ {% endif %}
+ </section>
+
<section class="preview preview--{{ kind.v or 'none' }}" aria-label="Preview">
{% if kind.v == 'image' %}
<img src="{{ raw_url }}" alt="Preview of {{ filename }}" decoding="async">
@@ -66,25 +86,4 @@
</div>
{% endif %}
</section>
-
- <section class="link-list" aria-labelledby="links-title">
- <h2 id="links-title" class="section-title">Links</h2>
- {% macro link_row(label, value, hint='') %}
- <div class="link-row">
- <span class="link-row__label">{{ label }}{% if hint %}<small>{{ hint }}</small>{% endif %}</span>
- <input class="link-row__value" type="text" readonly value="{{ value }}" aria-label="{{ label }}" data-select-on-focus>
- <button type="button" class="btn btn-sm" data-copy="{{ value }}" aria-label="Copy {{ label }}">{{ icon('copy', 14) }}<span>Copy</span></button>
- </div>
- {% endmacro %}
- {{ link_row('CDN page', page_url, 'This page') }}
- {{ link_row('Raw link', raw_url, 'For embedding') }}
- {{ link_row('Download link', dl_url, 'Starts a download') }}
- {% if embed %}
- <div class="link-row link-row--code">
- <span class="link-row__label">Embed<small>HTML snippet</small></span>
- <code class="link-row__code">{{ embed }}</code>
- <button type="button" class="btn btn-sm" data-copy="{{ embed }}" aria-label="Copy embed snippet">{{ icon('copy', 14) }}<span>Copy</span></button>
- </div>
- {% endif %}
- </section>
</article>
