pagination: support mobile view

views/components/pagination.templ

@@ -13,6 +13,7 @@ type PaginationData struct {
 	Total             int64
 	Classes           []string
 	UnhideRange       int
+	MobileUnhideRange int
 }
 
 type pageStatus int
@@ -25,11 +26,18 @@ const (
 
 func (pgdata PaginationData) GetUnhideRange() int {
 	if pgdata.UnhideRange < 1 {
-		return 1
+		return 2
 	}
 	return pgdata.UnhideRange
 }
 
+func (pgdata PaginationData) GetMobileUnhideRange() int {
+	if pgdata.MobileUnhideRange < 1 {
+		return 1
+	}
+	return pgdata.MobileUnhideRange
+}
+
 func (pgdata PaginationData) getPageStatus(page int) pageStatus {
 	if page < 2 {
 		return pageStatusShow
@@ -53,6 +61,29 @@ func (pgdata PaginationData) getPageStatus(page int) pageStatus {
 	return pageStatusHidden
 }
 
+func (pgdata PaginationData) getMobilePageStatus(page int) pageStatus {
+	if page < 2 {
+		return pageStatusShow
+	}
+	lastPage := (pgdata.Total / max(pgdata.Limit, 1)) + 1
+	if page == int(lastPage) {
+		return pageStatusShow
+	}
+	current := pgdata.GetCurrentPage()
+	unhideRange := pgdata.GetMobileUnhideRange()
+	if page == current-unhideRange-1 {
+		return pageStatusDot
+	}
+	if page == current+unhideRange+1 {
+		return pageStatusDot
+	}
+	if page >= current-unhideRange && page <= current+unhideRange {
+		return pageStatusShow
+	}
+
+	return pageStatusHidden
+}
+
 func (pgdata PaginationData) GetCurrentPage() int {
 	return int(pgdata.Offset/pgdata.Limit) + 1
 }
@@ -71,7 +102,7 @@ templ Pagination(c *views.Context, data PaginationData) {
                     get vals() { return JSON.stringify({...this.qs, offset: (Math.max(1, Math.min(this.page, this.max))-1) * (this.qs.limit || 25)}) }
                 }`, data.GetCurrentPage(), c.JSONQuery(), data.GetTotalPage()) }
 		>
-			<div class="join">
+			<div class="hidden sm:join">
 				for i, count := 1, int64(0); count < data.Total; i, count = i+1, count+data.Limit {
 					if data.GetTotalPage() <= 5 || data.getPageStatus(i) == pageStatusShow {
 						<a
@@ -87,6 +118,22 @@ templ Pagination(c *views.Context, data PaginationData) {
 					}
 				}
 			</div>
+			<div class="join sm:hidden">
+				for i, count := 1, int64(0); count < data.Total; i, count = i+1, count+data.Limit {
+					if data.GetTotalPage() <= 5 || data.getMobilePageStatus(i) == pageStatusShow {
+						<a
+							href={ c.URLWithExtraQuery(data.BaseURL, "offset", strconv.FormatInt(count, 10)) }
+							class={ utils.CXX(
+                        "join-item btn no-underline btn-sm", true,
+                        "btn-active", data.Offset <= count &&  data.Offset > count - data.Limit ,
+                        strings.Join(data.Classes, " "), len(data.Classes) > 0,
+                    ) }
+						>{ strconv.Itoa(i) }</a>
+					} else if data.getMobilePageStatus(i) == pageStatusDot {
+						<span @click="$refs.dialog.showModal()" class="join-item btn btn-sm">...</span>
+					}
+				}
+			</div>
 			<dialog
 				onclick="if (event.target === this) this.close()"
 				x-ref="dialog"