Hyemin Lee
8a6a88d7c4
- 버튼 위계 정리: 파란 틴트=동작(동기화/배포), ghost=네비/유틸(새로고침·이전·다음) - 새로고침: ghost + 원형화살표 아이콘 + 컴팩트, 페이저: ghost + ◀/▶ 삼각형 - 검색창 가로 꽉(width 100%) + 얇게 - 헤더(th) 한글 라벨에 모노 폰트 안 먹게 td 로 한정 + 모노 스택에 한글 폴백 - 상태: '상태'+연결배지 한 줄 배치, '상태'='저장소' 글자 크기 통일, 배지 14px Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
82 lines
3.5 KiB
HTML
82 lines
3.5 KiB
HTML
{#
|
|
표 + 페이저 조각. 검색/정렬/페이지 이동의 swap 대상(#repo-table-wrap).
|
|
정렬 헤더와 페이저는 현재 검색어(q)를 #repo-search 에서 hx-include 로 가져온다.
|
|
hidden state(sort/dir, data-state)는 검색창이 정렬 상태를 함께 보내도록 노출.
|
|
#}
|
|
<div id="repo-table-wrap">
|
|
<input type="hidden" name="sort" value="{{ sort }}" data-state>
|
|
<input type="hidden" name="dir" value="{{ dir }}" data-state>
|
|
|
|
{% macro sorth(col, label, extra="") %}
|
|
<th class="{{ extra }}">
|
|
<a href="#" class="th-sort{% if sort == col %} is-active{% endif %}"
|
|
hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
|
|
hx-include="#repo-search"
|
|
hx-vals='{"sort": "{{ col }}", "dir": "{{ 'desc' if (sort == col and dir == 'asc') else 'asc' }}"}'>
|
|
{{ label }}{% if sort == col %} <span class="sort-ind">{{ '↑' if dir == 'asc' else '↓' }}</span>{% endif %}
|
|
</a>
|
|
</th>
|
|
{% endmacro %}
|
|
|
|
{% if total %}
|
|
<div class="table-card">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
{{ sorth("name", "저장소") }}
|
|
{{ sorth("verified", "검증") }}
|
|
{{ sorth("version", "최신 버전", "num") }}
|
|
{{ sorth("packages", "패키지 수", "num") }}
|
|
{{ sorth("last_sync", "마지막 동기화") }}
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for repo in repos %}
|
|
<tr>
|
|
<td class="repo-name"><a href="/repos/{{ repo.uuid }}/versions">{{ repo.name }}</a></td>
|
|
<td><span class="badge badge-{{ repo.gpg.level }}">{{ repo.gpg.label }}</span></td>
|
|
<td class="num">{% if repo.latest_version is not none %}v{{ repo.latest_version }}{% else %}—{% endif %}</td>
|
|
<td class="num">{% if repo.package_count is not none %}{{ repo.package_count }}{% else %}—{% endif %}</td>
|
|
<td class="mono">{{ repo.last_sync or "—" }}</td>
|
|
<td>
|
|
<div id="sync-{{ repo.uuid }}" class="row-action">
|
|
<button class="secondary btn-sm"
|
|
hx-post="/repos/{{ repo.uuid }}/sync"
|
|
hx-target="#sync-{{ repo.uuid }}"
|
|
hx-swap="innerHTML"
|
|
hx-disabled-elt="this">동기화</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
{% if pages > 1 %}
|
|
<div class="pager">
|
|
<button class="ghost btn-sm btn-icon" {% if page <= 1 %}disabled{% endif %}
|
|
hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
|
|
hx-include="#repo-search"
|
|
hx-vals='{"sort": "{{ sort }}", "dir": "{{ dir }}", "page": "{{ page - 1 }}"}'>
|
|
<svg class="icon" viewBox="0 0 10 10" width="8" height="8" aria-hidden="true"><path d="M7 1 2 5l5 4z" fill="currentColor"/></svg>
|
|
이전
|
|
</button>
|
|
<span class="mono">{{ page }} / {{ pages }}</span>
|
|
<button class="ghost btn-sm btn-icon" {% if page >= pages %}disabled{% endif %}
|
|
hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
|
|
hx-include="#repo-search"
|
|
hx-vals='{"sort": "{{ sort }}", "dir": "{{ dir }}", "page": "{{ page + 1 }}"}'>
|
|
다음
|
|
<svg class="icon" viewBox="0 0 10 10" width="8" height="8" aria-hidden="true"><path d="M3 1l5 4-5 4z" fill="currentColor"/></svg>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% elif q %}
|
|
<p class="empty-note">'{{ q }}' 검색 결과가 없습니다.</p>
|
|
{% else %}
|
|
<p class="empty-note">등록된 저장소가 없습니다.</p>
|
|
{% endif %}
|
|
</div>
|