fix(installer-rp): selected card highlight + log viewer no longer covers buttons

- renderer.js: 카드 선택 시 .active 가 아니라 .selected 클래스를 붙여
  CSS 의 .cardChoice button.selected 스타일이 실제로 적용되게 함.
- styles.css: 로그 뷰어가 position: fixed 라 본문 하단 버튼을 덮던 문제.
  body 를 3-row grid (header/main/logViewer) 로 바꿔 로그 뷰어가
  자연스럽게 본문 아래에 배치되도록 수정. hidden 일 때 row 자동 collapse.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-13 00:51:56 +09:00
parent 5a018bcb8d
commit d630c90862
2 changed files with 7 additions and 7 deletions

View File

@@ -68,7 +68,7 @@ function renderStep1() {
var card = document.createElement('button') var card = document.createElement('button')
card.type = 'button' card.type = 'button'
card.className = 'choiceCard' card.className = 'choiceCard'
if (state.selectedKey === pack.key) card.classList.add('active') if (state.selectedKey === pack.key) card.classList.add('selected')
var verLabel = pack.mcVersion ? '마인크래프트 ' + escapeHtml(pack.mcVersion) + ' · ' : '' var verLabel = pack.mcVersion ? '마인크래프트 ' + escapeHtml(pack.mcVersion) + ' · ' : ''
card.innerHTML = card.innerHTML =
'<strong>' + escapeHtml(pack.name) + '</strong>' + '<strong>' + escapeHtml(pack.name) + '</strong>' +

View File

@@ -24,7 +24,8 @@ html, body {
body { body {
display: grid; display: grid;
grid-template-rows: auto 1fr; /* header / main(스크롤) / logViewer(hidden 이면 0). */
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -67,8 +68,9 @@ body {
} }
main { main {
padding: 28px 32px 100px; padding: 28px 32px;
overflow-y: auto; overflow-y: auto;
min-height: 0;
} }
.page { max-width: 720px; margin: 0 auto; } .page { max-width: 720px; margin: 0 auto; }
@@ -135,16 +137,14 @@ main {
.subStep h3 { margin: 0 0 8px; font-size: 16px; } .subStep h3 { margin: 0 0 8px; font-size: 16px; }
.logViewer { .logViewer {
position: fixed; /* fixed 였으면 본문 하단 버튼이 가려져서 grid 행으로 자연 배치하도록 변경. */
bottom: 0;
left: 0;
right: 0;
height: 200px; height: 200px;
background: #0a0d11; background: #0a0d11;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
} }
.logViewer.collapsed { height: 36px; }
.logViewer header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--bg-alt); } .logViewer header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--bg-alt); }
.logViewer header h2 { margin: 0; font-size: 13px; } .logViewer header h2 { margin: 0; font-size: 13px; }