diff --git a/concert/concert.html b/concert/concert.html index 391f529..c4988de 100644 --- a/concert/concert.html +++ b/concert/concert.html @@ -40,7 +40,7 @@ z-index: 5; } - /* 巡迴搜尋:樣式對齊 .search-input;第一列 input+btn,第二列白字結果 */ + /* 巡迴搜尋:輸入列 + 奶油說明/結果卡(對齊 #stage-now 白黃風格) */ .concert-search-box { width: 100%; max-width: 920px; @@ -48,7 +48,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 14px; + gap: 16px; } .concert-search-row { @@ -97,83 +97,156 @@ box-shadow: 0 0 10px rgba(255, 204, 0, 0.35); } + .concert-search-panel { + width: 100%; + max-width: 720px; + background: #fff8df; + border: 1px solid #e9d99d; + border-radius: 16px; + padding: 18px 20px 16px; + box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); + } + + .concert-search-guide-title { + margin: 0 0 14px; + text-align: center; + font-size: 0.95rem; + font-weight: 700; + letter-spacing: 0.12em; + color: #4a4a4a; + } + + .concert-search-guide-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 12px; + } + + .concert-search-guide-item { + background: #fff; + border: 1px solid #eadfb2; + border-radius: 12px; + padding: 12px 14px; + } + + .concert-search-guide-item .guide-label { + display: block; + margin: 0 0 6px; + text-align: center; + font-size: 0.88rem; + font-weight: 700; + color: #65510e; + } + + .concert-search-guide-item .guide-desc { + margin: 0; + text-align: left; + font-size: 0.84rem; + line-height: 1.65; + color: #5a5a5a; + } + + .concert-search-guide-item .guide-desc em { + font-style: normal; + color: #7f6712; + font-weight: 600; + } + + .concert-search-guide-steps { + margin: 14px 0 0; + padding-top: 12px; + border-top: 1px dashed #e0d4a8; + text-align: center; + font-size: 0.82rem; + line-height: 1.6; + color: #6a6a6a; + } + + .concert-search-guide-steps strong { + color: #4a4a4a; + font-weight: 700; + } + .concert-search-result { display: block; width: 100%; - margin: 0; + margin: 14px 0 0; + padding-top: 14px; + border-top: 1px solid #eadfb2; } - .concert-search-hint { - width: 100%; - max-width: 720px; - margin: 0 0 12px; - padding: 0 6px; - text-align: left; - font-size: 0.82rem; - line-height: 1.6; - color: rgba(255, 255, 255, 0.78); + .concert-search-result:not(:has(.concert-search-hits)) .concert-search-summary { + margin: 0; } .concert-search-summary { margin: 0 0 12px; text-align: center; - font-size: 0.95rem; - line-height: 1.6; - color: #fff; + font-size: 0.92rem; + line-height: 1.65; + color: #444; } .concert-search-hits { list-style: none; - margin: 0 auto; + margin: 0; padding: 0; - max-width: 720px; + display: grid; + gap: 10px; text-align: left; } .concert-search-hits li { - padding: 10px 14px; - margin-bottom: 8px; - background: rgba(255, 248, 223, 0.1); - border: 1px solid rgba(255, 204, 0, 0.35); + padding: 12px 14px; + background: #fff; + border: 1px solid #eadfb2; border-radius: 12px; - color: #fff; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); font-size: 0.88rem; line-height: 1.5; } .concert-search-hits li.concert-search-hit-jump { cursor: pointer; - transition: background 0.2s ease, border-color 0.2s ease; + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .concert-search-hits li.concert-search-hit-jump:hover, - .concert-search-hits li.concert-search-hit-jump:focus-visible { - background: rgba(255, 204, 0, 0.15); + .concert-search-hits li.concert-search-hit-jump:focus-visible, + .concert-search-hits li.concert-search-hit-jump.is-active { border-color: #ffcc00; + box-shadow: 0 6px 18px rgba(255, 204, 0, 0.22); + transform: translateY(-1px); outline: none; } .concert-search-hits .hit-track { display: block; font-weight: 700; - color: #ffdd00; + color: #2c2c2c; } .concert-search-hits .hit-meta { display: block; - margin-top: 4px; - color: rgba(255, 255, 255, 0.78); - font-size: 0.82rem; + margin-top: 6px; + color: #6a6a6a; + font-size: 0.8rem; + line-height: 1.5; } .concert-search-hits .hit-more { text-align: center; border-style: dashed; - color: rgba(255, 255, 255, 0.85); + background: #fffef8; + color: #7f6712; + cursor: default; + box-shadow: none; } .track-item.is-search-hit .track { - color: #ffdd00; + color: #c9a100; font-weight: 700; } @@ -200,11 +273,24 @@ placeholder="成員或 ENCORE/Solo…(可空白)" aria-describedby="concert-search-hint"> -

- 曲目或場次:曲名、巡演名或場地(例:COUPLE、釜山、YELLOW NOTE)。成員或段落:可留白;要縮小範圍時可填成員名,或歌單裡的段落標記(例:殷志源、ENCORE、BLACKKIES、Solo)。兩格都有填時,需同時符合。按查詢或 Enter;點結果可跳到下方歌單。 -

-
-

尚未查詢。

+
+
+

怎麼搜尋

+
    +
  • + 曲目或場次 +

    比對曲名、巡演名或場地。例:COUPLE釜山YELLOW NOTE

    +
  • +
  • + 成員或段落 +

    可留白。要縮小範圍可填成員名,或歌單標記(安可、小分隊、Solo)。例:殷志源ENCOREBLACKKIES

    +
  • +
+

查詢或 Enter 顯示結果列表  點列表某一列,跳到下方該場次與曲目(兩格都有填時須同時符合)

+
+
+

尚未查詢。

+
diff --git a/concert/search.js b/concert/search.js index 347a564..eaceec0 100644 --- a/concert/search.js +++ b/concert/search.js @@ -52,8 +52,10 @@ function expandVenueForTrackItem(trackItem) { } function scrollToSearchResults() { - if (!myResult) return; - myResult.scrollIntoView({ behavior: "smooth", block: "start" }); + const panel = document.querySelector(".concert-search-panel"); + const target = panel || myResult; + if (!target) return; + target.scrollIntoView({ behavior: "smooth", block: "start" }); } function jumpToTrackHit(hit) { @@ -84,21 +86,20 @@ function renderSearchResults(getQuery, getMember, hits) { if (!hits.length) { summary.textContent = `曲目或場次「${getQuery || "(未填)"}」${getMember.trim() ? `、成員「${getMember}」` : ""}:沒有比對到曲目,請換字再試。`; myResult.replaceChildren(summary); + scrollToSearchResults(); return; } if (getMember.trim()) { - summary.textContent = `曲目或場次「${getQuery || "(未填)"}」、成員「${getMember}」:共 ${hits.length} 筆。點任一列可跳到歌單。`; + summary.textContent = `曲目或場次「${getQuery || "(未填)"}」、成員「${getMember}」:共 ${hits.length} 筆。請點列表中的場次,再跳到下方歌單。`; } else { - summary.textContent = `曲目或場次「${getQuery}」:共 ${hits.length} 筆。點任一列可跳到歌單。`; + summary.textContent = `曲目或場次「${getQuery}」:共 ${hits.length} 筆。請點列表中的場次,再跳到下方歌單。`; } const list = document.createElement("ul"); list.className = "concert-search-hits"; hits.slice(0, SEARCH_LIST_MAX).forEach(function (hit) { - if (hit.el) hit.el.classList.add("is-search-hit"); - const li = document.createElement("li"); li.className = "concert-search-hit-jump"; li.setAttribute("role", "button"); @@ -117,11 +118,13 @@ function renderSearchResults(getQuery, getMember, hits) { 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); } }); @@ -137,8 +140,7 @@ function renderSearchResults(getQuery, getMember, hits) { } myResult.replaceChildren(summary, list); - - jumpToTrackHit(hits[0]); + scrollToSearchResults(); } function runSearch() {