feat(view): move all 3D info panels to the left stack (부재 표시, 시점, 색 기준, 원점)

The right stack is gone. 색 기준 and the ⓘ origin note now sit under 시점 in the left stack, so every 3D info panel is on the
left. The stack is 180 px wide; the origin note opens to the right of its button.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
This commit is contained in:
ypshimandClaude Haiku 5.5 committed 2026-10-23 11:33:06 +09:00
1 parent 86a4b2fd80
commit 0889ebfc34
2 files changed
+4 -8

No files matched your search

-2
View File
@@ -85,8 +85,6 @@
<button id="views-toggle" class="btn views-toggle" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="views">시점</button>
<div id="views" class="views views-list" role="group" aria-label="시점" hidden></div>
</div>
</div>
<div class="viewer-stack viewer-stack-right">
<details class="info-panel color-info" id="color-info" hidden>
<summary>색 기준 <span id="color-state" class="panel-state"></span></summary>
<div class="rebar-color" id="rebar-color" role="group" aria-label="철근 색 기준">
+4 -6
View File
@@ -766,8 +766,7 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
#viewer-block .viewer-head { display: none; }
.viewer-stack { display: flex; flex-direction: column; gap: 8px; width: 168px; z-index: 5; pointer-events: none; }
.viewer-stack > * { pointer-events: auto; }
#viewer-block .viewer-stack-left { position: absolute; top: 8px; left: 8px; }
#viewer-block .viewer-stack-right { position: absolute; top: 8px; right: 8px; width: 180px; align-items: stretch; }
#viewer-block .viewer-stack-left { position: absolute; top: 8px; left: 8px; width: 180px; align-items: stretch; }
#viewer-block .info-panel { background: rgba(255, 255, 255, 0.92); border: 1px solid #d5dde6; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 0 8px 8px; font-size: 13px; }
#viewer-block .info-panel > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: #18212b; list-style-position: outside; }
#viewer-block .parts-info #parts label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
@@ -780,13 +779,12 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
#viewer-block #views.views-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; gap: 0; padding: 4px; margin-top: 4px; background: #ffffff; border: 1px solid #c3cbd4; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
#viewer-block #views.views-list .btn { min-height: 44px; justify-content: flex-start; text-align: left; border: 0; background: transparent; }
#viewer-block #views.views-list .btn[aria-pressed='true'] { background: #1f5fa8; color: #ffffff; }
#viewer-block .origin-wrap { position: relative; align-self: flex-end; }
#viewer-block .origin-wrap { position: relative; align-self: flex-start; }
#viewer-block .info-btn { min-width: 44px; min-height: 44px; border: 1px solid #c3cbd4; border-radius: 6px; background: #ffffff; font-size: 16px; cursor: pointer; }
#viewer-block .origin-pop { position: absolute; top: 100%; right: 0; z-index: 10; margin-top: 4px; padding: 6px 10px; background: #ffffff; border: 1px solid #c3cbd4; border-radius: 6px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
#viewer-block .origin-pop { position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 4px; padding: 6px 10px; background: #ffffff; border: 1px solid #c3cbd4; border-radius: 6px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
#viewer-block .panel-state { font-weight: 400; color: #55606e; margin-left: 6px; font-size: 12px; }
@media (max-width: 600px) {
#viewer-block .viewer-head { display: flex; height: auto; margin: 0 0 8px; }
#viewer-block .viewer-stack { position: static; width: auto; margin-top: 8px; pointer-events: auto; }
#viewer-block .viewer-stack-left, #viewer-block .viewer-stack-right { position: static; width: auto; }
#viewer-block .origin-wrap { align-self: flex-start; }
#viewer-block .viewer-stack-left { position: static; width: auto; }
}