fix: media card survives page switch, cards fill column height
This commit is contained in:
@@ -142,6 +142,10 @@ body {
|
|||||||
/* 卡片:柔光玻璃拟态(复用 Task 4 token,非纯色背景) */
|
/* 卡片:柔光玻璃拟态(复用 Task 4 token,非纯色背景) */
|
||||||
/* Card: soft-glass morphism (reuse Task 4 tokens, not a solid color) */
|
/* Card: soft-glass morphism (reuse Task 4 tokens, not a solid color) */
|
||||||
.card {
|
.card {
|
||||||
|
/* 卡片在栏内自动拉伸填满高度(多卡均分) */
|
||||||
|
/* Cards stretch to fill the column height (even split when multiple) */
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-height: 0;
|
||||||
background: var(--glass-bg);
|
background: var(--glass-bg);
|
||||||
backdrop-filter: var(--blur-filter);
|
backdrop-filter: var(--blur-filter);
|
||||||
-webkit-backdrop-filter: var(--blur-filter);
|
-webkit-backdrop-filter: var(--blur-filter);
|
||||||
@@ -154,6 +158,12 @@ body {
|
|||||||
|
|
||||||
/* 大字时间卡:主时间大字 + 日期副行 */
|
/* 大字时间卡:主时间大字 + 日期副行 */
|
||||||
/* Big time card: large clock + date subtitle */
|
/* Big time card: large clock + date subtitle */
|
||||||
|
/* 时钟卡缩放权重小:占栏高比例小于其他卡片 */
|
||||||
|
/* Time card grows less: takes a smaller share of column height than other cards */
|
||||||
|
.time-card {
|
||||||
|
flex-grow: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
.time-card .big {
|
.time-card .big {
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|||||||
@@ -28,6 +28,16 @@ window.updateHomeCards = async function () {
|
|||||||
else col.appendChild(renderGenericCard(id));
|
else col.appendChild(renderGenericCard(id));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
// 若有当前媒体,覆盖中间栏为媒体卡(切页回来后恢复媒体卡)
|
||||||
|
// If there is active media, replace the middle column with the media card
|
||||||
|
// (restores the media card when navigating back to home)
|
||||||
|
if (currentMedia) {
|
||||||
|
const mediaCol = document.getElementById('col-1');
|
||||||
|
if (mediaCol) {
|
||||||
|
mediaCol.innerHTML = '';
|
||||||
|
mediaCol.appendChild(renderMediaCard(currentMedia));
|
||||||
|
}
|
||||||
|
}
|
||||||
startTimeCardTicker();
|
startTimeCardTicker();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -80,11 +90,16 @@ function startTimeCardTicker() {
|
|||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 当前媒体信息(null 表示无媒体);切页后 updateHomeCards 据此恢复媒体卡
|
||||||
|
// Current media info (null = none); updateHomeCards restores the media card from it
|
||||||
|
let currentMedia = null;
|
||||||
|
|
||||||
// 原生媒体会话事件:有媒体时在中间栏渲染媒体卡,无媒体时降级重新布局
|
// 原生媒体会话事件:有媒体时在中间栏渲染媒体卡,无媒体时降级重新布局
|
||||||
// Native media session event: render media card in middle column when present,
|
// Native media session event: render media card in middle column when present,
|
||||||
// otherwise fall back to re-layout (calendar/weather fill the media card slot)
|
// otherwise fall back to re-layout (calendar/weather fill the media card slot)
|
||||||
window.HearthEvents = window.HearthEvents || {};
|
window.HearthEvents = window.HearthEvents || {};
|
||||||
window.HearthEvents.mediaSessionChanged = function (info) {
|
window.HearthEvents.mediaSessionChanged = function (info) {
|
||||||
|
currentMedia = info;
|
||||||
const mediaCol = document.getElementById('col-1');
|
const mediaCol = document.getElementById('col-1');
|
||||||
if (!mediaCol) return;
|
if (!mediaCol) return;
|
||||||
if (info) {
|
if (info) {
|
||||||
|
|||||||
Reference in New Issue
Block a user