v0.4.15: Improve Ohli24 list date display and mobile search UI

info.yaml

@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.4.13"
+version: "0.4.15"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"

static/css/ohli24.css

@@ -186,6 +186,40 @@ ul.nav.nav-pills .nav-link.active {
 .status-completed { background: rgba(16, 185, 129, 0.2); color: #34d399; }
 .status-wait { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
 
+/* Date Info Styling */
+.date-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+}
+
+.date-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    padding: 3px 10px;
+    border-radius: 6px;
+    white-space: nowrap;
+    width: fit-content;
+}
+
+.date-tag i { font-size: 12px; }
+.date-tag span { font-weight: 500; }
+
+.date-tag-req {
+    background: rgba(148, 163, 184, 0.1);
+    color: #94a3b8;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.date-tag-done {
+    background: rgba(52, 211, 153, 0.1);
+    color: #34d399;
+    border: 1px solid rgba(52, 211, 153, 0.2);
+}
+
 /* Desktop Adaptations - Scoped to List Page */
 @media (min-width: 768px) {
     .ohli24-list-page .episode-card { margin-bottom: 10px; }
@@ -272,4 +306,36 @@ ul.nav.nav-pills .nav-link.active {
     .ohli24-queue-page .progress-wrapper { width: 100%; }
     .ohli24-queue-page .queue-item { flex-direction: column; align-items: stretch; }
     .ohli24-queue-page ul.nav.nav-pills.bg-light { margin-top: 40px !important; }
+
+    /* Search Container Mobile Refinements */
+    .ohli24-list-page .search-container {
+        padding: 8px;
+        gap: 6px;
+    }
+    .ohli24-list-page .search-group-left {
+        display: flex;
+        gap: 4px;
+        flex: 1;
+    }
+    .ohli24-list-page .search-group-right {
+        display: flex;
+        gap: 4px;
+        width: 100%;
+    }
+    .ohli24-list-page .custom-select {
+        height: 32px !important;
+        font-size: 12px !important;
+        padding: 0 4px !important;
+        flex: 1;
+    }
+    .ohli24-list-page .custom-input {
+        height: 32px !important;
+        font-size: 13px !important;
+        flex: 1;
+    }
+    .ohli24-list-page .custom-btn {
+        height: 32px !important;
+        padding: 0 10px !important;
+        font-size: 13px !important;
+    }
 }

templates/anime_downloader_ohli24_list.html

@@ -451,9 +451,14 @@
                 // Date
                 let createdDate = item.created_time ? item.created_time.split(' ')[0] : '';
                 let completedDate = item.completed_time ? item.completed_time.split(' ')[0] : '';
-                let dateHtml = `<span class="meta-tag" title="요청일: ${item.created_time}"><i class="fa fa-clock-o"></i> ${createdDate}</span>`;
+                
+                let dateHtml = `<div class="date-tag date-tag-req" title="요청일: ${item.created_time}">
+                                    <i class="fa fa-clock-o"></i> <span>시작: ${createdDate}</span>
+                                </div>`;
                 if (completedDate) {
-                    dateHtml += `<span class="meta-tag" title="완료일: ${item.completed_time}"><i class="fa fa-check-circle"></i> ${completedDate}</span>`;
+                    dateHtml += `<div class="date-tag date-tag-done" title="완료일: ${item.completed_time}">
+                                    <i class="fa fa-check-circle"></i> <span>완료: ${completedDate}</span>
+                                </div>`;
                 }
 
                 // Subtitle Line