From 0f551dc54128e2e9c68ea73030b93901d30df085 Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Wed, 11 Feb 2026 19:23:07 +0800
Subject: [PATCH] feat(video-cards): add click navigation to video and shorts
 cards

Implement click event handlers for video cards, shorts cards, and search results to navigate to their respective detail pages. Also adjust grid layout dimensions for better responsiveness.
---
 css/style.css | 12 ++++++------
 js/script.js  | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3dcd179..703d8aa 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,4 @@
-/* 全局样式重置 */
+/* å…¨å±€æ ·å¼é‡ç½® */
 * {
     margin: 0;
     padding: 0;
@@ -328,7 +328,7 @@ body {
 /* Video grid */
 .video-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
     gap: 24px;
     margin-bottom: 48px;
 }
@@ -360,7 +360,7 @@ body {
 .video-thumbnail {
     position: relative;
     width: 100%;
-    padding-top: 56.25%; /* 16:9 比例 */
+    padding-top: 56.25%; /* 16:9 比例 */
     background-color: #303030;
 }
 
@@ -494,7 +494,7 @@ body {
     color: #909090;
 }
 
-/* Shorts 部分 */
+/* Shorts 部分 */
 .shorts-section {
     margin-top: 48px;
 }
@@ -508,7 +508,7 @@ body {
 
 .shorts-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 20px;
 }
 
@@ -516,7 +516,7 @@ body {
 .shorts-card {
     position: relative;
     width: 100%;
-    padding-top: 177.78%; /* 9:16 比例 */
+    padding-top: 177.78%; /* 9:16 比例 */
     background-color: #303030;
     border-radius: 12px;
     overflow: hidden;
diff --git a/js/script.js b/js/script.js
index fe7b4d2..b3dc7a4 100644
--- a/js/script.js
+++ b/js/script.js
@@ -619,6 +619,11 @@ function createVideoCard(video) {
         menuDropdown.classList.remove('show');
     });
     
+    // Add click event to the card
+    card.addEventListener('click', () => {
+        window.location.href = `video.html?id=${video.id}`;
+    });
+    
     return card;
 }
 
@@ -639,6 +644,11 @@ function createShortsCard(video) {
         </div>
     `;
     
+    // Add click event to the card
+    card.addEventListener('click', () => {
+        window.location.href = `short.html?id=${video.id}`;
+    });
+    
     return card;
 }
 
@@ -714,6 +724,11 @@ function renderSearchResults(results, query) {
             </div>
         `;
         
+        // Add click event to the search result item
+        item.addEventListener('click', () => {
+            window.location.href = `video.html?id=${video.id}`;
+        });
+        
         searchResultsContent.appendChild(item);
     });