feat: label low resolution media fallback
This commit is contained in:
@@ -3,6 +3,7 @@ import SourceBadge from "./SourceBadge.astro";
|
||||
import type { MediaAsset } from "../lib/api";
|
||||
import { mediaRoleLabel } from "../lib/media";
|
||||
const { asset, compact = false, sourceLink = false } = Astro.props as { asset: MediaAsset; compact?: boolean; sourceLink?: boolean };
|
||||
const isLowResolution = Math.min(asset.width, asset.height) < 256;
|
||||
---
|
||||
<figure class:list={["entity-media", { "entity-media--compact": compact }]}>
|
||||
<span class="entity-media__frame"><picture>
|
||||
@@ -12,5 +13,5 @@ const { asset, compact = false, sourceLink = false } = Astro.props as { asset: M
|
||||
})}
|
||||
<img src={asset.image_url} alt={asset.label ?? "Иллюстрация RF4"} width={asset.width} height={asset.height} loading="lazy" decoding="async" />
|
||||
</picture></span>
|
||||
<figcaption><SourceBadge source={asset.source_system} href={sourceLink ? asset.source_url : undefined} /><span>{asset.label ?? "Справочный материал"}</span>{asset.media_role && <small data-media-role={asset.media_role}>{mediaRoleLabel(asset.media_role)}</small>}</figcaption>
|
||||
<figcaption><SourceBadge source={asset.source_system} href={sourceLink ? asset.source_url : undefined} /><span>{asset.label ?? "Справочный материал"}</span>{asset.media_role && <small data-media-role={asset.media_role}>{mediaRoleLabel(asset.media_role)}</small>}{isLowResolution && <small class="entity-media__quality" title="Источник не содержит более крупной проверенной версии">Низкое разрешение · {asset.width}×{asset.height}</small>}</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -6,3 +6,4 @@
|
||||
.media-role-filter{display:flex;align-items:end;gap:10px;margin:0 0 22px;padding:14px 16px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-soft)}.media-role-filter label{display:grid;gap:6px;color:var(--text-muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.media-role-filter select{min-width:220px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}.media-role-filter a{padding:11px 4px;color:var(--text-muted);font-size:12px}@media(max-width:720px){.media-role-filter{align-items:stretch;flex-wrap:wrap}.media-role-filter label{flex:1 1 100%}.media-role-filter select{width:100%}}
|
||||
|
||||
@media (min-width:721px) and (max-width:1050px){.media-library__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
||||
.entity-media__quality{color:var(--warning);font-weight:700}
|
||||
|
||||
Reference in New Issue
Block a user