폰에서 화면이 깨지던 문제 수정. - 전역 반응형 표 '카드뷰'가 모든 table에 적용돼, data-label 없는 목록 표 (수집함·발굴·발행 등)가 거대한 행으로 변해 페이지가 32만px로 늘어남. → 카드뷰를 .rcards opt-in 으로 스코프. 그 클래스 가진 레거시 표 (multi_channel_videos·videos)만 카드뷰, 나머지는 모바일에서 가로 스크롤. - 대시보드: 모바일(≤680px) 미디어쿼리 추가 — 마스트헤드 세로 정렬, 긴 브레드크럼 숨김, 떡상 리더보드 액션 버튼을 아랫줄 우측 정렬, 숫자 축소. - base.html: CSS/JS 링크에 v= 캐시버스팅 — 배포 후 브라우저가 옛 CSS를 캐시해 스타일이 깨지는 것 방지(CSS 변경 시 버전 올리기). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>h-lab - Dashboard</title>
|
|
|
|
<!-- Theme init (before paint, no flash) -->
|
|
<script>
|
|
(function () {
|
|
try { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light'); }
|
|
catch (e) { document.documentElement.setAttribute('data-theme', 'light'); }
|
|
})();
|
|
</script>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<!-- Editorial identity (dashboard) -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS (v= 캐시 버스팅 — CSS 바뀌면 숫자 올리기) -->
|
|
<link rel="stylesheet" th:href="@{/css/variables.css(v=20260617)}">
|
|
<link rel="stylesheet" th:href="@{/css/style.css(v=20260617)}">
|
|
|
|
<!-- Lucide Icons (CDN for simplicity in SSR) -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="display: flex; min-height: 100vh;">
|
|
<!-- Sidebar Fragment -->
|
|
<div th:replace="~{layout/sidebar :: sidebar}"></div>
|
|
|
|
<!-- Main Content -->
|
|
<main id="mainContent" style="flex: 1; padding: 2.5rem; position: relative; z-index: 1;">
|
|
<!-- Mobile Menu Toggle (Visible only on mobile) -->
|
|
<button id="mobileSidebarToggle" class="mobile-menu-btn">
|
|
<i data-lucide="menu" style="width: 24px; height: 24px;"></i>
|
|
</button>
|
|
|
|
<div class="container" layout:fragment="content">
|
|
<!-- Content goes here -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- JS -->
|
|
<script th:src="@{/js/common.js(v=20260617)}"></script>
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
<th:block layout:fragment="script"></th:block>
|
|
</body>
|
|
|
|
</html> |