refactor(tapops): modularize page code

groups/Tapops/css/repository/responsive.css

@@ -0,0 +1,233 @@
+/* ===========================================
+   Responsive — Tablet (≤1024px)
+   =========================================== */
+
+@media (max-width: 1024px) {
+    .repo-dashboard-container {
+        grid-template-columns: 1fr;
+    }
+
+    .repo-sidebar {
+        display: none;
+    }
+
+    .mobile-category-control-group {
+        display: flex !important;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    /* Mobile: show dropdown */
+    .filter-select-group {
+        display: block;
+    }
+
+    /* Skeleton single bar on mobile */
+    .filter-skeleton {
+        flex-direction: column;
+    }
+
+    .filter-skeleton-item {
+        height: 48px;
+    }
+
+    .filter-skeleton-item.short {
+        display: none;
+    }
+
+    .filter-skeleton-item:not(.short) ~ .filter-skeleton-item:not(.short) {
+        display: none;
+    }
+
+    .repo-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-container {
+        max-width: 100%;
+    }
+
+    .filter-controls {
+        justify-content: flex-start;
+    }
+
+    .control-group {
+        flex: 1;
+    }
+}
+
+/* ===========================================
+   Responsive — Tablet / Large Phone (≤768px)
+   =========================================== */
+
+@media (max-width: 768px) {
+    .documents-section {
+        padding: 80px 16px;
+    }
+
+    .repo-content-header {
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    .repo-controls {
+        padding: 16px;
+        gap: 16px;
+    }
+
+    #doc-search {
+        padding: 14px 14px 14px 44px;
+        font-size: 0.88rem;
+    }
+
+    .filter-controls {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .control-group {
+        width: 100%;
+    }
+
+    .date-range-group {
+        min-width: 0;
+        position: relative;
+    }
+
+    body.date-picker-open {
+        overflow: hidden;
+    }
+
+    body.date-picker-open .date-picker-backdrop {
+        display: block;
+        z-index: 998;
+    }
+
+    .date-picker-popover {
+        /* Default mobile popover positioning inside media query is overridden below,
+           but let's define the base transitions or layouts. */
+    }
+
+    @media (max-width: 768px) {
+        .date-picker-popover {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            right: auto;
+            transform: translate(-50%, -50%);
+            width: calc(100% - 32px);
+            max-width: 380px;
+            max-height: 90vh;
+            overflow-y: auto;
+            border-radius: 12px;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+            z-index: 999;
+        }
+
+        .date-picker-top-bar {
+            justify-content: center;
+        }
+
+        .calendar-grids {
+            gap: 0;
+        }
+
+        #right-calendar-pane {
+            display: none;
+        }
+
+        .month-labels {
+            gap: 0;
+            justify-content: center;
+            flex: 1;
+        }
+
+        #right-month-label {
+            display: none;
+        }
+
+        .date-picker-body {
+            flex-direction: column;
+        }
+
+        .presets-container {
+            width: 100%;
+            border-left: none;
+            border-top: 1px solid var(--border-color);
+            padding: 12px 16px;
+        }
+
+        .presets-list {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 6px;
+            max-height: none;
+        }
+
+        .preset-btn {
+            padding: 6px 10px;
+            font-size: 0.75rem;
+        }
+    }
+
+    .select-wrapper,
+    #sort-filter-wrapper {
+        min-width: 0;
+        width: 100%;
+    }
+
+    /* Cards: 2-column when space permits, else single */
+    .document-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 16px;
+    }
+
+    .document-card {
+        padding: 22px;
+    }
+
+    .document-card:hover {
+        transform: none;
+    }
+
+    .doc-type-icon {
+        font-size: 1.8rem;
+        margin-bottom: 14px;
+    }
+
+    .doc-title {
+        font-size: 1rem;
+    }
+
+    .doc-meta {
+        margin-bottom: 16px;
+    }
+
+    .doc-tags {
+        margin-bottom: 14px;
+    }
+
+    .repo-main-content {
+        min-height: 400px;
+    }
+}
+
+/* ===========================================
+   Responsive — Phone (≤480px)
+   =========================================== */
+
+@media (max-width: 480px) {
+    .date-dd, .date-mm {
+        width: 26px;
+    }
+
+    .date-yyyy {
+        min-width: 38px;
+    }
+
+    .date-calendar-btn {
+        padding-left: 4px;
+        font-size: 0.82rem;
+    }
+}