jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 搜尋列表寬圓角

Browse Source
This commit is contained in:
jekkinoopy
2026-06-03 16:33:58 +08:00
parent 9eb3a360a1
commit 983fa5b1dc
4 changed files with 111 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/header.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 803 KiB

After

Width:  |  Height:  |  Size: 101 KiB

assets/images/header.psd
BIN
View File
Binary file not shown.
concert/concert.html
+47 -41
View File
@@ -40,14 +40,24 @@
z-index: 5; z-index: 5;
} }
/* 巡迴搜尋：輸入列 + 結果列表（黑底區，白字） */ /* 巡迴搜尋：寬度／圓角對齊 .concert-container、.con-1 */
.concert-page .search-section {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.concert-search-box { .concert-search-box {
width: 100%; width: 100%;
max-width: 920px; max-width: none;
padding: 0 20px; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: stretch;
gap: 12px; gap: 12px;
} }
@@ -175,7 +185,6 @@
.concert-search-result { .concert-search-result {
display: block; display: block;
width: 100%; width: 100%;
max-width: 720px;
} }
.concert-search-summary { .concert-search-summary {
@@ -186,57 +195,54 @@
color: #fff; color: #fff;
} }
/* 結果列表：結構複用 concert.css；外殼與下方 con-1 同寬同圓角 */
.concert-search-hits { .concert-search-hits {
list-style: none; width: 100%;
}
body.concert-page .concert-search-mirror-card.con-1 {
width: 100%;
max-width: 100%;
margin: 0; margin: 0;
padding: 0; border-radius: 16px;
display: grid; padding: 50px 100px;
gap: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
text-align: left; border: 1px solid rgba(0, 0, 0, 0.02);
} }
.concert-search-hits li { @media (max-width: 920px) {
padding: 10px 12px 10px 14px; body.concert-page .search-section {
background: rgba(255, 255, 255, 0.06); padding-left: clamp(12px, 3vw, 20px);
border: none; padding-right: clamp(12px, 3vw, 20px);
border-left: 3px solid rgba(255, 204, 0, 0.55);
border-radius: 0 10px 10px 0;
font-size: 0.88rem;
line-height: 1.5;
} }
.concert-search-hits li.concert-search-hit-jump { body.concert-page .concert-search-mirror-card.con-1 {
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px);
}
}
body.concert-page .concert-search-mirror-card .con-yk-1.concert-search-hit-jump {
cursor: pointer; cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease; transition: box-shadow 0.2s ease;
} }
.concert-search-hits li.concert-search-hit-jump:hover, body.concert-page .concert-search-mirror-card .con-yk-1.concert-search-hit-jump:hover,
.concert-search-hits li.concert-search-hit-jump:focus-visible, body.concert-page .concert-search-mirror-card .con-yk-1.concert-search-hit-jump:focus-visible {
.concert-search-hits li.concert-search-hit-jump.is-active { box-shadow: 0 4px 14px rgba(255, 204, 0, 0.2);
background: rgba(255, 204, 0, 0.12);
border-left-color: #ffcc00;
outline: none; outline: none;
} }
.concert-search-hits .hit-track { body.concert-page .concert-search-mirror-card .con-yk-1.concert-search-hit-jump.is-active {
display: block; box-shadow: 0 0 0 2px #ffcc00;
font-weight: 700;
color: #ffdd00;
} }
.concert-search-hits .hit-meta { .concert-search-more {
display: block; margin: 10px 0 0;
margin-top: 4px; padding: 8px 12px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.8rem;
line-height: 1.5;
}
.concert-search-hits .hit-more {
text-align: center; text-align: center;
border-left-style: dashed; font-size: 0.85rem;
color: rgba(255, 255, 255, 0.75); line-height: 1.5;
cursor: default; color: rgba(255, 255, 255, 0.8);
} }
.track-item.is-search-hit .track { .track-item.is-search-hit .track {
concert/search.js
+63 -39
View File
@@ -60,12 +60,58 @@ function jumpToTrackHit(hit) {
hit.el.scrollIntoView({ behavior: "smooth", block: "center" }); hit.el.scrollIntoView({ behavior: "smooth", block: "center" });
} }
function setActiveSearchListItem(list, activeLi) { function setActiveSearchHit(container, activeEl) {
if (!list) return; if (!container) return;
list.querySelectorAll(".concert-search-hit-jump").forEach(function (item) { container.querySelectorAll(".concert-search-hit-jump").forEach(function (item) {
item.classList.remove("is-active"); item.classList.remove("is-active");
}); });
if (activeLi) activeLi.classList.add("is-active"); if (activeEl) activeEl.classList.add("is-active");
}
function createSearchHitVenue(hit) {
const venue = document.createElement("div");
venue.className = "con-yk-1";
const locText = [hit.tourTitle, hit.location].filter(Boolean).join(" · ");
if (locText) {
const loc = document.createElement("span");
loc.className = "location";
loc.textContent = locText;
venue.appendChild(loc);
}
const trackList = document.createElement("div");
trackList.className = "track-list";
const trackItem = document.createElement("div");
trackItem.className = "track-item";
const trackSpan = document.createElement("span");
trackSpan.className = "track";
trackSpan.textContent = hit.trackName;
trackItem.appendChild(trackSpan);
trackList.appendChild(trackItem);
venue.appendChild(trackList);
return venue;
}
function bindSearchHitJump(venueEl, hit, container) {
venueEl.classList.add("concert-search-hit-jump");
venueEl.setAttribute("role", "button");
venueEl.setAttribute("tabindex", "0");
venueEl.setAttribute("aria-label", `跳到曲目：${hit.trackName}`);
function go() {
setActiveSearchHit(container, venueEl);
jumpToTrackHit(hit);
}
venueEl.addEventListener("click", go);
venueEl.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
go();
}
});
} }
function renderSearchResults(getQuery, getMember, hits) { function renderSearchResults(getQuery, getMember, hits) {
@@ -88,50 +134,28 @@ function renderSearchResults(getQuery, getMember, hits) {
summary.textContent = `曲目或場次「${getQuery}」：共 ${hits.length} 筆。請點列表中的場次，再跳到下方歌單。`; summary.textContent = `曲目或場次「${getQuery}」：共 ${hits.length} 筆。請點列表中的場次，再跳到下方歌單。`;
} }
const list = document.createElement("ul"); const hitsWrap = document.createElement("div");
list.className = "concert-search-hits"; hitsWrap.className = "concert-search-hits";
const mirrorCard = document.createElement("div");
mirrorCard.className = "con-1 concert-search-mirror-card";
hits.slice(0, SEARCH_LIST_MAX).forEach(function (hit) { hits.slice(0, SEARCH_LIST_MAX).forEach(function (hit) {
const li = document.createElement("li"); const venue = createSearchHitVenue(hit);
li.className = "concert-search-hit-jump"; bindSearchHitJump(venue, hit, mirrorCard);
li.setAttribute("role", "button"); mirrorCard.appendChild(venue);
li.setAttribute("tabindex", "0");
li.setAttribute("aria-label", `跳到曲目：${hit.trackName}`);
const trackLine = document.createElement("span");
trackLine.className = "hit-track";
trackLine.textContent = hit.trackName;
const metaLine = document.createElement("span");
metaLine.className = "hit-meta";
metaLine.textContent = [hit.tourTitle, hit.location].filter(Boolean).join(" · ");
li.appendChild(trackLine);
if (metaLine.textContent) li.appendChild(metaLine);
li.addEventListener("click", function () {
setActiveSearchListItem(list, li);
jumpToTrackHit(hit);
});
li.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
setActiveSearchListItem(list, li);
jumpToTrackHit(hit);
}
}); });
list.appendChild(li); hitsWrap.appendChild(mirrorCard);
});
if (hits.length > SEARCH_LIST_MAX) { if (hits.length > SEARCH_LIST_MAX) {
const more = document.createElement("li"); const more = document.createElement("p");
more.className = "hit-more"; more.className = "concert-search-more";
more.textContent = `另有 ${hits.length - SEARCH_LIST_MAX} 筆未顯示，請縮小曲目或場次。`; more.textContent = `另有 ${hits.length - SEARCH_LIST_MAX} 筆未顯示，請縮小曲目或場次。`;
list.appendChild(more); hitsWrap.appendChild(more);
} }
myResult.replaceChildren(summary, list); myResult.replaceChildren(summary, hitsWrap);
} }
function runSearch() { function runSearch() {