fix(polish): 视觉复核三轮——热力图末列可见与 en 首页版面平权
- 热力图:桌面 10px 格+2px 缝收进版心(53 列 634px 无横滚——唯一有
数据的最新列曾被裁在滚出区呈空表);移动端锚定 scrollLeft 到最新列
- en 首页补 IdCard 名片区 + Latest photos 影像条(视觉复核版面平权建议)
- en/index 重复导入 getCollection 修复(构建炸点)
验证: pnpm astro build 21 页 exit 0;node tests/e2e.mjs 30/30 PASS
(新构建全链)
Spec: 2026-10-25_fix-site-polish
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
e21fac7e1d
commit
ebafa415b2
2 files changed
+26
-1
No files matched your search
@@ -29,7 +29,7 @@ const summary = labels.summary.replace('{n}', String(total));
|
|||||||
<section class="heatmap">
|
<section class="heatmap">
|
||||||
<h2 class="hm-title">{labels.title}</h2>
|
<h2 class="hm-title">{labels.title}</h2>
|
||||||
<!-- 53 列窄栏触屏放不下,容器横滚(格子原生 title 提示,无 JS) -->
|
<!-- 53 列窄栏触屏放不下,容器横滚(格子原生 title 提示,无 JS) -->
|
||||||
<div class="hm-scroll">
|
<div class="hm-scroll" data-anchor-latest>
|
||||||
<div class="hm-grid" role="img" aria-label={summary}>
|
<div class="hm-grid" role="img" aria-label={summary}>
|
||||||
{weeks.map((week) =>
|
{weeks.map((week) =>
|
||||||
week.map((day) => (
|
week.map((day) => (
|
||||||
@@ -51,6 +51,10 @@ const summary = labels.summary.replace('{n}', String(total));
|
|||||||
<span class="hm-note">{labels.note}</span>
|
<span class="hm-note">{labels.note}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
<script is:inline>
|
||||||
|
// 移动端横滚时锚定到最右(最新)列——数据在"今天",默认 scrollLeft=0 会展示一年前的空区
|
||||||
|
document.querySelectorAll('[data-anchor-latest]').forEach((el) => { el.scrollLeft = el.scrollWidth; });
|
||||||
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.heatmap { margin-top: var(--space-6); }
|
.heatmap { margin-top: var(--space-6); }
|
||||||
@@ -96,6 +100,13 @@ const summary = labels.summary.replace('{n}', String(total));
|
|||||||
color: var(--ink-3);
|
color: var(--ink-3);
|
||||||
}
|
}
|
||||||
.hm-legend .hm-c { width: 9px; height: 9px; }
|
.hm-legend .hm-c { width: 9px; height: 9px; }
|
||||||
|
/* 桌面收进版心:10px 格 + 2px 缝 = 12px 节距 × 53 列 ≈ 634px,
|
||||||
|
无横滚(视觉复核:唯一有数据的最新的列曾恰被裁在滚出区) */
|
||||||
|
@media (min-width: 820px) {
|
||||||
|
.hm-grid { gap: 2px; }
|
||||||
|
.hm-c { width: 10px; height: 10px; }
|
||||||
|
.hm-scroll { overflow-x: visible; }
|
||||||
|
}
|
||||||
.hm-note {
|
.hm-note {
|
||||||
margin-left: var(--space-3);
|
margin-left: var(--space-3);
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
|
|||||||
@@ -3,6 +3,9 @@
|
|||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from 'astro:content';
|
||||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
import { t } from '../../i18n/ui';
|
import { t } from '../../i18n/ui';
|
||||||
|
import IdCard from '../../components/IdCard.astro';
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
const photos = (await getCollection('photos')).slice(0, 4);
|
||||||
import Heatmap from '../../components/geek/Heatmap.astro';
|
import Heatmap from '../../components/geek/Heatmap.astro';
|
||||||
import { POST_TRACKS, trackOf } from '../../content.config';
|
import { POST_TRACKS, trackOf } from '../../content.config';
|
||||||
|
|
||||||
@@ -20,7 +23,18 @@ const t9 = (cat: keyof typeof POST_TRACKS) => trackOf(cat);
|
|||||||
|
|
||||||
<BaseLayout title="wait4x" description="wait4x's blog: reading · code · photography" track="tech">
|
<BaseLayout title="wait4x" description="wait4x's blog: reading · code · photography" track="tech">
|
||||||
<h1 class="visually-hidden">wait4x</h1>
|
<h1 class="visually-hidden">wait4x</h1>
|
||||||
|
<IdCard>
|
||||||
|
<a href="https://github.com/wait4xx" rel="noopener noreferrer" aria-label="GitHub">↗</a>
|
||||||
|
<a href="/en/rss.xml" aria-label="RSS">RSS</a>
|
||||||
|
</IdCard>
|
||||||
{years.map((year) => (
|
{years.map((year) => (
|
||||||
|
<section class="latest" aria-label={t('latest_photos', 'en')}>
|
||||||
|
<span class="lab">{t('latest_photos', 'en')}</span>
|
||||||
|
<a href="/en/gallery/">{t('enter_gallery', 'en')}</a>
|
||||||
|
<div class="strip">
|
||||||
|
{photos.map((p) => (<a href="/en/gallery/"><Image src={p.data.image} alt={p.data.alt ?? p.data.title} widths={[160, 320]} sizes="20vw" loading="lazy" /></a>))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section class="year">
|
<section class="year">
|
||||||
<h2 class="y-label">{year}</h2>
|
<h2 class="y-label">{year}</h2>
|
||||||
{(['reading', 'tech', 'photo'] as const).map((cat) => {
|
{(['reading', 'tech', 'photo'] as const).map((cat) => {
|
||||||
|
|||||||
Reference in new issue
Block a user