Hyemin Lee
9b686e35ba
디자인 핸드오프(design_handoff_console_redesign)를 실제 앱에 반영.
CSS 드롭인 교체 + 최소 마크업 추가, HTMX 훅·id·data 속성은 모두 보존.
- app.css: 재디자인 토큰/컴포넌트로 교체(요약카드 호버 리프트, 표
제브라, 중앙 경고형 배포 모달, secondary/ghost/danger 버튼 체계,
진행률·상태칩·스켈레톤 등).
- base.html: 브랜드 로고 큐브(.brand-mark) 추가 + 데모 배너.
- repo_list: 요약 카드 .card-top/.card-ico + 검색 돋보기 아이콘.
- table_wrap: 회전형 정렬 인디케이터, 동기화 버튼 아이콘.
- progress: .sync-head/.sync-pct/.is-active/.indeterminate 구조.
- deploy_modal: 중앙 경고형 + 현재→대상 프리뷰 카드 + 타입-투-컨펌
체크/X 시각 상태.
- deploy_success: 그려지는 체크 원 배너.
- version_list: 표 → .version-item 카드 리스트.
Pico v2 호환(미리보기는 pico-shim 기준이라 안 드러났던 것):
- Pico 의 `:is(...).secondary`(0,2,0)·hover(0,4,0) 특정성을 이기도록
오버라이드를 :is() 형태로 상향 → 동기화 버튼 흰배경+파란글씨 유지,
hover 시 어두워지던 문제 해결.
- `input[type=search]` 의 Pico 기본 돋보기 배경 제거(아이콘 중복).
- `td` 배경을 투명 처리해 tr 제브라/hover 가 보이도록(Pico 의
`td{background:var(--pico-background-color)}` 가 덮던 문제), 줄무늬
색을 --bg-alt 로 또렷하게.
- .row-action 을 40px 고정 → 버튼↔진행률↔배지 교체 시 높이 흔들림·
위아래 테두리 잘림 해소.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
66 lines
3.9 KiB
HTML
66 lines
3.9 KiB
HTML
<dialog open class="deploy-dialog">
|
|
<article class="deploy-modal">
|
|
<div class="modal-head">
|
|
<span class="warn-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></span>
|
|
<div>
|
|
<h3>운영 배포 확인</h3>
|
|
<span class="head-sub">되돌리기 어려운 작업입니다</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
{% if error %}
|
|
<p class="error-note" role="alert">
|
|
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg>
|
|
<span>{{ error }}</span>
|
|
</p>
|
|
{% endif %}
|
|
|
|
<p class="deploy-note" style="text-align:center">
|
|
<span class="repo-hl">{{ repo_name }}</span> 저장소를 운영망에 배포합니다.
|
|
운영 서버(yum/dnf)가 실제로 내려받는 버전이 바뀝니다.
|
|
</p>
|
|
|
|
{% if preview %}
|
|
<div class="deploy-preview">
|
|
<div class="pv-box">
|
|
<div class="pv-label">현재 (운영)</div>
|
|
{% if preview.current_version is not none %}
|
|
<div class="pv-ver">v{{ preview.current_version }}</div>
|
|
<div class="pv-pkg">{{ preview.current_count }} pkgs</div>
|
|
{% else %}
|
|
<div class="pv-ver">없음</div>
|
|
<div class="pv-pkg">—</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="pv-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>
|
|
<div class="pv-box pv-target">
|
|
<div class="pv-label">대상</div>
|
|
<div class="pv-ver">v{{ preview.target_version }}</div>
|
|
<div class="pv-pkg">{{ preview.target_count }} pkgs · <span class="{{ 'delta-add' if preview.net_sign == '+' else 'delta-del' }}">{{ preview.net_sign }}{{ preview.net }}</span></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form hx-post="/repos/{{ uuid }}/deploy" hx-target="#modal" hx-swap="innerHTML">
|
|
<input type="hidden" name="version_href" value="{{ version_href }}">
|
|
<label class="confirm-label">확인을 위해 저장소 이름 <span class="repo-hl">{{ repo_name }}</span> 을(를) 입력하세요.
|
|
<div class="confirm-field" data-confirm="{{ repo_name }}">
|
|
<input type="text" name="confirm_name" autocomplete="off" required class="mono"
|
|
placeholder="{{ repo_name }}"
|
|
oninput="var f=this.closest('.confirm-field');var v=this.value.trim();var ok=(v===f.dataset.confirm);f.classList.toggle('is-valid',ok&&v!=='');f.classList.toggle('is-invalid',!ok&&v!=='');document.getElementById('deploy-confirm-btn').disabled=!ok;">
|
|
<svg class="confirm-state ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 13 4 4L19 7"/></svg>
|
|
<svg class="confirm-state bad" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
</div>
|
|
</label>
|
|
{# TODO(auth): 로그인 도입 시 배포 비밀번호 재확인 입력 추가 #}
|
|
<div class="modal-actions">
|
|
<button type="button" class="ghost"
|
|
onclick="document.getElementById('modal').innerHTML=''">취소</button>
|
|
<button type="submit" id="deploy-confirm-btn" class="danger" disabled>배포 확정</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
</dialog>
|