kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(forum): detail/mini topic list item 1:1 structure

Browse Source 
Expand render_topic_row into zibll-like detail cards (author card,
cover, excerpt, multi-image grid, vote strip, plate + action-meta)
and keep mini compact variant for dense lists.
This commit is contained in:
kate522
2026-07-18 16:47:30 +08:00
parent 433b7cb3a6
commit 770fa83332
3 changed files with 281 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/forum/board.css
+98
View File
@@ -586,6 +586,104 @@
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* detail list card (zibll forum-posts detail) */
.aksrt-forum-topic-row.detail,
.aksrt-forum-posts.detail {
display: block;
padding: 16px;
margin-bottom: 12px;
border-radius: 14px;
background: var(--surface-1, #fff);
box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.06));
}
.aksrt-forum-topic-row__author-card { gap: 10px; }
.aksrt-forum-topic-row__author-name { font-weight: 700; font-size: 14px; }
.aksrt-forum-topic-row.detail .aksrt-forum-topic-row__cover,
.aksrt-forum-posts.detail .forum-lists-cover {
display: block;
width: 100%;
height: auto;
max-height: 280px;
margin: 0 0 12px;
border-radius: 12px;
overflow: hidden;
}
.aksrt-forum-topic-row.detail .aksrt-forum-topic-row__cover img {
width: 100%;
height: auto;
max-height: 280px;
object-fit: cover;
display: block;
}
.aksrt-forum-topic-row .excerpt {
margin-top: 6px;
font-size: 14px;
line-height: 1.65;
color: var(--color-ink-2, #4b5563);
}
.aksrt-forum-topic-row .lists-imgs {
display: grid;
gap: 6px;
margin-top: 8px;
}
.aksrt-forum-topic-row .lists-imgs.count-1 { grid-template-columns: 1fr; max-width: 280px; }
.aksrt-forum-topic-row .lists-imgs.count-2 { grid-template-columns: 1fr 1fr; }
.aksrt-forum-topic-row .lists-imgs.count-3,
.aksrt-forum-topic-row .lists-imgs.count-4 { grid-template-columns: 1fr 1fr; }
.aksrt-forum-topic-row .lists-imgs__item {
display: block;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1;
background: var(--surface-2, #f3f4f6);
}
.aksrt-forum-topic-row .lists-imgs__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.aksrt-forum-topic-row__vote { display: grid; gap: 6px; }
.aksrt-forum-topic-row__vote-opt {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(80px, 2fr) 42px;
gap: 8px;
align-items: center;
font-size: 13px;
}
.aksrt-forum-topic-row__vote-bar {
height: 8px;
border-radius: 999px;
background: var(--surface-4, #eef0f3);
overflow: hidden;
}
.aksrt-forum-topic-row__vote-bar i {
display: block;
height: 100%;
background: var(--color-primary, #f04494);
}
.aksrt-forum-topic-row__footer .but-plate,
.aksrt-forum-topic-row__board.but {
display: inline-flex;
align-items: center;
max-width: 46%;
padding: 4px 10px;
border-radius: 999px;
background: var(--surface-4, #f3f4f6);
color: var(--color-ink-2, #5c6370);
text-decoration: none;
font-size: 12px;
font-weight: 600;
}
.aksrt-forum-topic-row__actions {
display: inline-flex;
gap: 12px;
color: var(--color-ink-3, #8a909c);
font-size: 13px;
}
.aksrt-forum-topic-row__actions a { color: inherit; text-decoration: none; }
.aksrt-forum-topic-row.mini { display: flex; gap: 12px; align-items: flex-start; }
.aksrt-forum-board-card__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));