v0.6.6: size drawer from hero grid; drop skill video side bars.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
voson
Cursor
@@ -12,6 +12,13 @@
|
||||
|
||||
- PC 选将 overlay 不再在顶栏头像下显示定位图标；仍保留网格「克/搭/补」与阵容分析条。
|
||||
|
||||
## [0.6.6] - 2026-07-30
|
||||
|
||||
### Changed
|
||||
|
||||
- 英雄详情抽屉改为按 `#columns` 实测高度预留完整网格（含最后一排），剩余给抽屉；技能 Tab 不硬性规定高度，内容随抽屉 flex/滚动。
|
||||
- 技能演示视频在抽屉变矮时宽度随高度收缩，保持 16:9，避免左右黑边。
|
||||
|
||||
## [0.6.5] - 2026-07-30
|
||||
|
||||
### Changed
|
||||
|
||||
@@ -233,9 +233,10 @@ components:
|
||||
## Layout
|
||||
|
||||
桌面壳：顶栏固定高度区 + 可滚动 `main.board`；英雄页的英雄网格与固定高 `#detail`
|
||||
之间放置一行定位筛选。选中英雄后 `#detail` 使用共享固定高度：按视口预留顶栏 + 约 24% 英雄网格 +
|
||||
定位标签后取余，再 `clamp` 到约 `320–640px`（CSS 回退 `min(640px, calc(100dvh - 17.5rem))`），
|
||||
Tab 切换不跳动；技能演示与文案左右排布，长 Tab（走势/对位等）在详情区内滚动。
|
||||
之间放置一行定位筛选。选中英雄后 `#detail` 使用共享固定高度：按视口预留顶栏 + **完整** `#columns`
|
||||
英雄网格实测高度 + 定位标签后取余，再 `clamp` 到约 `280–640px`
|
||||
（CSS 回退 `min(640px, calc(100dvh - 26rem))`）。技能 Tab 不驱动抽屉高度，
|
||||
内容在抽屉内 flex/滚动；Tab 切换不跳动；长 Tab（走势/对位等）同理在详情区内滚动。
|
||||
技能演示片源为官网 16:9；有横向空间时加宽（上限约 720px / 列宽 58%），
|
||||
`aspect-ratio: 16/9` + `object-fit: contain`，勿用拉满高度的 `cover` 裁左右。
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -580,6 +580,27 @@
|
||||
"total_favorited": 842,
|
||||
"avatar": "streamer_avatars/zhedaxiaoyuwang.jpg",
|
||||
"profile_fetched_at": "2026-07-29T18:26:00+00:00"
|
||||
},
|
||||
{
|
||||
"id": "xiaolu",
|
||||
"platform": "douyin",
|
||||
"profile_url": "https://v.douyin.com/wLV8LDRwC8k/",
|
||||
"tagline": "科研小鹿",
|
||||
"heroes": [
|
||||
"enchantress"
|
||||
],
|
||||
"nickname": "科颜熊",
|
||||
"unique_id": "894277260",
|
||||
"signature": "玩点不一样的dota 周更1～2期dota冷知识",
|
||||
"following_count": 82,
|
||||
"follower_count": 7263,
|
||||
"total_favorited": 71000,
|
||||
"avatar": "streamer_avatars/xiaolu.jpg",
|
||||
"video": "streamer_videos/xiaolu.mp4",
|
||||
"video_aspect": "544/960",
|
||||
"video_fit": "cover",
|
||||
"video_title": "【科研】冠绝游龙中单小鹿",
|
||||
"profile_fetched_at": "2026-07-30T09:14:00+00:00"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ from shared.paths import (
|
||||
from seo_prerender import DEFAULT_SITE_ORIGIN, write_seo_bundle
|
||||
from serve_relations import WEB_DIR, build_payload
|
||||
|
||||
SITE_VERSION = "0.6.5"
|
||||
SITE_VERSION = "0.6.6"
|
||||
DEFAULT_OSS_BASE = "https://climperor.oss-cn-shanghai.aliyuncs.com"
|
||||
|
||||
|
||||
|
||||
+29
-10
@@ -414,6 +414,15 @@ function renderBoard() {
|
||||
col.appendChild(grid);
|
||||
root.appendChild(col);
|
||||
}
|
||||
// Filters change grid height; keep the open drawer from covering the last row.
|
||||
if (
|
||||
state.selectedKey &&
|
||||
!detailDrawerClosing &&
|
||||
!detailDrawerDrag &&
|
||||
!$("#detail-drawer")?.classList.contains("is-collapsed")
|
||||
) {
|
||||
applyDetailDrawerHeight();
|
||||
}
|
||||
}
|
||||
|
||||
function onHeroClick(key) {
|
||||
@@ -447,23 +456,33 @@ let detailDrawerClosing = false;
|
||||
|
||||
/** Cap / floor for the in-flow hero detail drawer (px). */
|
||||
const DETAIL_DRAWER_MAX_H = 640;
|
||||
const DETAIL_DRAWER_MIN_H = 320;
|
||||
const DETAIL_DRAWER_MIN_H = 280;
|
||||
|
||||
/** Natural height of the attr hero grid (content-sized; not the clipped viewport). */
|
||||
function heroesGridContentHeight() {
|
||||
const cols = $("#columns");
|
||||
if (!cols) return 0;
|
||||
const view = $("#heroes-view");
|
||||
let pad = 0;
|
||||
if (view) {
|
||||
const cs = getComputedStyle(view);
|
||||
pad = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
|
||||
}
|
||||
// offsetHeight is the laid-out grid even when #heroes-view is overflow-clipped.
|
||||
return Math.ceil(cols.offsetHeight + pad);
|
||||
}
|
||||
|
||||
/**
|
||||
* Height that leaves topbar + a usable hero-grid strip + role tags visible.
|
||||
* Prefer ~24% of the viewport for the grid; never steal the whole screen.
|
||||
* Drawer height = leftover after topbar + full hero grid + role tags.
|
||||
* Skills / other tabs flex+scroll inside; do not size the drawer for skill content.
|
||||
*/
|
||||
function detailDrawerTargetHeight() {
|
||||
const vh = window.innerHeight || 800;
|
||||
const topbar = document.querySelector(".topbar")?.offsetHeight || 60;
|
||||
const toolbar = document.querySelector(".hero-role-toolbar")?.offsetHeight || 52;
|
||||
const chrome = topbar + toolbar;
|
||||
const heroPrefer = Math.round(vh * 0.24);
|
||||
const heroReserve = Math.min(
|
||||
Math.max(140, heroPrefer),
|
||||
Math.max(120, vh - chrome - DETAIL_DRAWER_MIN_H)
|
||||
);
|
||||
const available = vh - chrome - heroReserve;
|
||||
const heroNeed = heroesGridContentHeight() || Math.round(vh * 0.36);
|
||||
const gap = 8;
|
||||
const available = vh - topbar - toolbar - heroNeed - gap;
|
||||
return Math.max(DETAIL_DRAWER_MIN_H, Math.min(DETAIL_DRAWER_MAX_H, available));
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* Local defaults; production export overwrites via export_relations_site.py. */
|
||||
var SITE_VERSION = "0.6.5";
|
||||
var SITE_VERSION = "0.6.6";
|
||||
var SITE_ORIGIN = "";
|
||||
var ABILITY_VIDEO_BASE = "";
|
||||
var STATIC_ASSET_BASE = "";
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
}
|
||||
</script>
|
||||
<link rel="icon" href="/ui-icon/dota2_logo.png" type="image/png" />
|
||||
<link rel="stylesheet" href="/style.css?v=0.6.5" />
|
||||
<script src="/mobile-gate.js?v=0.6.5"></script>
|
||||
<link rel="stylesheet" href="/style.css?v=0.6.6" />
|
||||
<script src="/mobile-gate.js?v=0.6.6"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="sr-only">DOTA2 上分帝</h1>
|
||||
@@ -233,8 +233,8 @@
|
||||
</div>
|
||||
<footer class="heroes-site-foot" id="heroes-site-foot" aria-hidden="true"></footer>
|
||||
|
||||
<script src="/config.js?v=0.6.5"></script>
|
||||
<script src="/router.js?v=0.6.5"></script>
|
||||
<script src="/app.js?v=0.6.5"></script>
|
||||
<script src="/config.js?v=0.6.6"></script>
|
||||
<script src="/router.js?v=0.6.6"></script>
|
||||
<script src="/app.js?v=0.6.6"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,9 +478,10 @@ body.detail-drawer-open .hero-role-toolbar {
|
||||
}
|
||||
|
||||
/* In-flow bottom drawer: height animates so the tagbar above is pushed up.
|
||||
Fallback reserves ~topbar + hero strip + role tags; JS may override --detail-fixed-h in px. */
|
||||
Fallback leaves room for a full hero grid; JS sets --detail-fixed-h from
|
||||
measured #columns height (skills tab does not drive drawer height). */
|
||||
.detail-drawer {
|
||||
--detail-fixed-h: min(640px, calc(100dvh - 17.5rem));
|
||||
--detail-fixed-h: min(640px, calc(100dvh - 26rem));
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -1795,18 +1796,17 @@ body.detail-drawer-open {
|
||||
max-width: none;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
/* Official demos are 16:9. Prefer a real widescreen frame (grow toward
|
||||
720px / ~58% when the inspect column has room); never cover-crop sides.
|
||||
Height follows width via aspect-ratio, capped by the panel so tall
|
||||
#detail no longer stretches the box into a near-square. */
|
||||
/* Official demos are 16:9. Size within max-width + max-height while keeping
|
||||
aspect-ratio (do not force width — a short drawer used to clamp height and
|
||||
leave pillarbox black bars). Never cover-crop sides. */
|
||||
.skill-info-video {
|
||||
flex: 0 1 auto;
|
||||
align-self: center;
|
||||
min-width: 220px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: min(720px, 58%);
|
||||
max-width: min(720px, 58%);
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: min(720px, 58%);
|
||||
max-height: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: contain;
|
||||
|
||||
Reference in New Issue
Block a user