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:
@@ -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>' +
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
Reference in New Issue
Block a user