From 541f59ffe97526ae9b94e5bfdd744a0251dc3322 Mon Sep 17 00:00:00 2001 From: TonyPepe Date: Sun, 12 Jul 2026 03:09:50 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E7=9B=B8=E7=B0=BF?= =?UTF-8?q?=E9=A0=81=E9=9D=A2=E7=80=8F=E8=A6=BD=E9=AB=94=E9=A9=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/gallery.css | 8 +- src/css/pagination.css | 17 ++- src/pages/gallery_list.js | 213 ++++++++++++++++++++++---------------- src/templates/gallery.js | 58 +++++++---- 4 files changed, 173 insertions(+), 123 deletions(-) diff --git a/src/css/gallery.css b/src/css/gallery.css index 872937f..c9e3aec 100644 --- a/src/css/gallery.css +++ b/src/css/gallery.css @@ -1,5 +1,7 @@ .lightgallery-grid > div { - display: flex; - flex-flow: wrap; - justify-content: left; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); + gap: 1rem; + max-width: 80rem; + margin-inline: auto; } diff --git a/src/css/pagination.css b/src/css/pagination.css index eac3beb..0698fd7 100644 --- a/src/css/pagination.css +++ b/src/css/pagination.css @@ -35,23 +35,22 @@ } .rc-pagination { - @apply py-4 flex flex-row justify-center items-center gap-4 text-xl lg:text-2xl; + @apply flex flex-row flex-wrap justify-center items-center gap-2 text-lg; } .rc-pagination > li { - @apply cursor-pointer; + @apply flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-gray-100 focus-within:ring-3 focus-within:ring-btnbg/30; } .rc-pagination > .rc-pagination-item-active { - @apply text-2xl lg:text-3xl; + @apply bg-btnbg font-bold text-white hover:bg-btnbg; } -.rc-pagination > .rc-pagination-prev { - @apply text-gray-500 hover:text-gray-700; - content: url("https://api.iconify.design/akar-icons/chevron-left.svg"); +.rc-pagination > .rc-pagination-disabled { + @apply cursor-not-allowed opacity-35; } -.rc-pagination > .rc-pagination-next { - @apply text-gray-500 hover:text-gray-700; - content: url("https://api.iconify.design/akar-icons/chevron-right.svg"); +.rc-pagination a, +.rc-pagination button { + @apply flex min-h-11 min-w-11 items-center justify-center rounded-full focus:outline-none; } diff --git a/src/pages/gallery_list.js b/src/pages/gallery_list.js index 348f4f8..a855190 100644 --- a/src/pages/gallery_list.js +++ b/src/pages/gallery_list.js @@ -28,6 +28,10 @@ const GalleryList = ({ data }) => { }); const itemCount = filteredData.length; const perPage = 8; + const paginatedData = filteredData.slice( + (currentPage - 1) * perPage, + currentPage * perPage, + ); const onPageChange = (page) => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 300) @@ -44,112 +48,141 @@ const GalleryList = ({ data }) => { }, [searchQuery]); return ( -
+
-
-
{/* 空白區 */} -
-

活動相簿

-
{/* 空白區 */} -
- setSearchQuery(e.target.value)} - className="px-6 py-3 border border-gray-400 rounded-full w-full md:w-2/3" - /> -
-
{/* 空白區 */} - -
{/* 空白區 */} -
- {filteredData.map((item, index) => - index >= (currentPage - 1) * perPage && - index < currentPage * perPage - ? galleryItem(item.node) - : null, - )} -
-
{/* 空白區 */} - +
+
+
+

+ 活動相簿 +

+

+ 收藏 iOS Club 每一次相聚的精彩時刻 +

+
+ +
+
+ + setSearchQuery(e.target.value)} + className="w-full rounded-full border border-gray-400 px-5 py-3 text-base text-gray-900 transition-colors placeholder:text-gray-500 focus:border-btnbg focus:outline-none focus:ring-3 focus:ring-btnbg/25 motion-reduce:transition-none" + /> +
+

+ {searchQuery + ? `找到 ${itemCount} 個相簿` + : `共 ${itemCount} 個相簿`} +

+
+ + {itemCount > perPage && ( + + )} + + {itemCount ? ( +
+ {paginatedData.map(({ node }) => ( + + ))} +
+ ) : ( +
+

+ 找不到相符的活動 +

+

+ 請嘗試其他活動名稱、日期或地點。 +

+
+ )} + + {itemCount > perPage && ( + + )}
-
-
+
); }; -const galleryItem = (node) => { +const GalleryItem = ({ node }) => { + const isExternal = Boolean(node.gdrive_url?.trim()); + const url = isExternal + ? node.gdrive_url + : "/gallery/" + node.date + " " + node.name; + return ( -
-
-

{node.name}

-
時間：{node.date}
-
地點：{node.location}
+
+ ); }; diff --git a/src/templates/gallery.js b/src/templates/gallery.js index 34e33f5..f755894 100644 --- a/src/templates/gallery.js +++ b/src/templates/gallery.js @@ -18,17 +18,28 @@ const Gallery = (props) => { return (
- + -
-
{/* 空白區 */} -

- {context.name} -

-

- {context.date} -

-
+
+
+

{context.date}

+

+ {context.name} +

+

+ 共 {context.photos.length} 張照片，點擊照片可放大瀏覽。 +

+
+
{ zoom={true} > {context.photos.map((item, index) => ( - -
+ +
))} -
-
-
+
+
); From 2ee9d7169cbc597cbcf225abccf6fd04d701faa7 Mon Sep 17 00:00:00 2001 From: TonyPepe Date: Sun, 12 Jul 2026 03:16:01 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20=E7=9B=B8=E7=B0=BF?= =?UTF-8?q?=E5=88=86=E9=A0=81=E7=AE=AD=E9=A0=AD=E6=9C=AA=E9=A1=AF=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/gallery_list.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/pages/gallery_list.js b/src/pages/gallery_list.js index a855190..82af02b 100644 --- a/src/pages/gallery_list.js +++ b/src/pages/gallery_list.js @@ -6,6 +6,8 @@ import Navbar from "../components/navbar"; import Footer from "../components/footer"; import { Icon } from "@iconify/react"; import openInNew from "@iconify/icons-ic/baseline-open-in-new"; +import chevronLeft from "@iconify/icons-akar-icons/chevron-left"; +import chevronRight from "@iconify/icons-akar-icons/chevron-right"; import Pagination from "rc-pagination"; import "../css/pagination.css"; import ImageWithPlaceholder from "../components/image-with-placeholder"; @@ -104,6 +106,12 @@ const GalleryList = ({ data }) => { total={itemCount} pageSize={perPage} showTitle={false} + prevIcon={ +