make paginator show more pages

* reduce inline axis padding to save space on small screen
This commit is contained in:
iacore
2024-02-11 16:53:08 +00:00
parent 4c45dc5f00
commit adddc7d230
7 changed files with 87 additions and 43 deletions
+11 -7
View File
@@ -13,7 +13,10 @@ func RankingPage(c *fiber.Ctx) error {
date := c.Query("date", "")
page := c.Query("page", "1")
pageInt, _ := strconv.Atoi(page)
pageInt, err := strconv.Atoi(page)
if err != nil {
panic(err)
}
works, err := core.GetRanking(c, mode, content, date, page)
if err != nil {
@@ -21,11 +24,12 @@ func RankingPage(c *fiber.Ctx) error {
}
return c.Render("pages/rank", fiber.Map{
"Title": "Ranking",
"Page": pageInt,
"Mode": mode,
"Content": content,
"Date": date,
"Data": works,
"Title": "Ranking",
"Page": pageInt,
"PageLimit": 10, // hard-coded by pixiv
"Mode": mode,
"Content": content,
"Date": date,
"Data": works,
})
}
+6 -1
View File
@@ -39,7 +39,12 @@ func UserPage(c *fiber.Ctx) error {
worksCount = user.ArtworksCount
pageLimit := math.Ceil(float64(worksCount) / worksPerPage)
return c.Render("pages/user", fiber.Map{"Title": user.Name, "User": user, "Category": category, "PageLimit": int(pageLimit), "Page": pageInt,
return c.Render("pages/user", fiber.Map{
"Title": user.Name,
"User": user,
"Category": category,
"PageLimit": int(pageLimit),
"Page": pageInt,
"MetaImage": user.BackgroundImage,
})
}
+31 -21
View File
@@ -119,35 +119,45 @@ func ParseTime(date time.Time) string {
}
func CreatePaginator(base, ending string, current_page, max_page int) template.HTML {
peek := 2
limit := peek*peek + 1
peek := 10
limit := peek*2 + 1
count := 0
pages := ""
pages += fmt.Sprintf(`<a href="%s1%s" class="pagination-button">&laquo;</a>`, base, ending)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&lsaquo;</a>`, base, max(1, current_page-1), ending)
for i := current_page - peek; (i <= max_page || max_page == -1) && count < limit; i++ {
if i < 1 {
continue
pages += `<div class="pagination-buttons">`
{
pages += `<span>`
{
pages += fmt.Sprintf(`<a href="%s1%s" class="pagination-button">&laquo;</a>`, base, ending)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&lsaquo;</a>`, base, max(1, current_page-1), ending)
}
if i == current_page {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button" id="highlight">%d</a>`, base, i, ending, i)
pages += `</span>`
for i := current_page - peek; (i <= max_page || max_page == -1) && count < limit; i++ {
if i < 1 {
continue
}
if i == current_page {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button" id="highlight">%d</a>`, base, i, ending, i)
} else {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">%d</a>`, base, i, ending, i)
}
count++
}
pages += `<span>`
if max_page == -1 {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&rsaquo;</a>`, base, current_page+1, ending)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button" id="disabled">&raquo;</a>`, base, max_page, ending)
} else {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">%d</a>`, base, i, ending, i)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&rsaquo;</a>`, base, min(max_page, current_page+1), ending)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&raquo;</a>`, base, max_page, ending)
}
count++
}
if max_page == -1 {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&rsaquo;</a>`, base, current_page+1, ending)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button" id="disabled">&raquo;</a>`, base, max_page, ending)
} else {
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&rsaquo;</a>`, base, min(max_page, current_page+1), ending)
pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&raquo;</a>`, base, max_page, ending)
pages += `</span>`
}
pages += `</div>`
return template.HTML(pages)
}
+20 -6
View File
@@ -1,3 +1,7 @@
:root {
--small-breakpoint: 440px;
}
html {
font-size: 62.5%;
}
@@ -10,8 +14,11 @@ body {
font-size: 1.8rem;
font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP";
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
@media (min-width: var(--small-breakpoint)) {
body {
margin-inline: 5px;
}
}
a {
@@ -179,6 +186,10 @@ input[type=submit][hidden] {
.pagination {
text-align: center;
}
.pagination .pagination-buttons {
display: flex;
flex-wrap: wrap;
}
.pagination .pagination-button {
margin-right: 5px;
}
@@ -284,10 +295,13 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
margin-inline: auto;
padding-inline: 4px;
}
@media (min-width: var(--small-breakpoint)) {
.container {
padding-inline: 10px;
}
}
.artwork-container-header {
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAxBG;EAyBH,OAvBG;EAyBH;EACA,aAhBY;EAkBZ;EACA;EACA;;;AAGF;EACE,OAhCK;EAiCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBArDG;EAsDH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAlGc;EAmGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBA/Ga;EAgHb,OA9Ga;;;AAiHf;AAAA;EAEE,kBArHa;;;AAwHf;EACE;EACA;;;AAGF;EACE;EACA,eA1Hc;EA2Hd;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eA/Ic;EAgJd;EACA;EACA;EACA,aAlJY;EAmJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aAtJY;;;AAyJd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBAtLK;EAuLL;EACA,OA1LG;;;AA6LL;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBApNW;EAqNX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OA1OH;;AA+OC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBA3QD;EA4QC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAjSL;EAkSK;EACA;EACA;;AAEA;EACE,kBAxSG;;AA2SL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAzXC;;AA6XD;AAAA;EACE,OAlXgB;EAmXhB,QAnXgB;;AAsXlB;AAAA;EACE,WAvXgB;;AA0XlB;AAAA;EACE,WA3XgB;;AA4XhB;AAAA;EACE,WA9Xc;;AAoYlB;AAAA;EACE,OArYgB;EAsYhB,QAtYgB;;AAyYlB;AAAA;EACE,WA1YgB;;AA6YlB;AAAA;EACE,WA9YgB;;AAgZhB;AAAA;EACE,WAjZc;;AAsZpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAjcI;EAkcJ,OArcH;;AAwcC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAhdH;EAidG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eA7dU;;AAgeZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBAnhBa;EAohBb,eA/gBc;EAghBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAxjBK;;AA8jBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OAplBI;;AAulBN;EACE,OAzlBD;EA0lBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OAroBD;;AAuoBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAnvBa;EAovBb;;AAEA;EACE;EACA,OAvvBC;EAwvBD,kBAzvBW;EA0vBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBApyBa;EAqyBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA,kBA5BG;EA6BH,OA3BG;EA6BH;EACA,aApBY;EAsBZ;;AACA;EAXF;IAYI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBA9NW;EA+NX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OApPH;;AAyPC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBArRD;EAsRC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OA3SL;EA4SK;EACA;EACA;;AAEA;EACE,kBAlTG;;AAqTL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OApYC;;AAwYD;AAAA;EACE,OA7XgB;EA8XhB,QA9XgB;;AAiYlB;AAAA;EACE,WAlYgB;;AAqYlB;AAAA;EACE,WAtYgB;;AAuYhB;AAAA;EACE,WAzYc;;AA+YlB;AAAA;EACE,OAhZgB;EAiZhB,QAjZgB;;AAoZlB;AAAA;EACE,WArZgB;;AAwZlB;AAAA;EACE,WAzZgB;;AA2ZhB;AAAA;EACE,WA5Zc;;AAiapB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBA5cI;EA6cJ,OAhdH;;AAmdC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OA3dH;EA4dG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eAxeU;;AA2eZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBA9hBa;EA+hBb,eA1hBc;EA2hBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAnkBK;;AAykBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA/lBI;;AAkmBN;EACE,OApmBD;EAqmBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OAhpBD;;AAkpBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBA9vBa;EA+vBb;;AAEA;EACE;EACA,OAlwBC;EAmwBD,kBApwBW;EAqwBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBA/yBa;EAgzBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
+17 -6
View File
@@ -14,6 +14,10 @@ $font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP"
$small-artwork-width: 184px;
$large-artwork-width: 288px;
:root {
--small-breakpoint: 440px;
}
html {
font-size: 62.5%;
}
@@ -29,8 +33,9 @@ body {
font-family: $font-family;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
@media(min-width: var(--small-breakpoint)) {
margin-inline: 5px;
}
}
a {
@@ -201,6 +206,11 @@ input[type="submit"][hidden] {
.pagination {
text-align: center;
.pagination-buttons {
display: flex;
flex-wrap: wrap;
}
.pagination-button {
margin-right: 5px;
}
@@ -343,10 +353,11 @@ nav {
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
margin-inline: auto;
padding-inline: 4px;
@media(min-width: var(--small-breakpoint)) {
padding-inline: 10px;
}
}
.artwork-container-header {
+1 -1
View File
@@ -67,7 +67,7 @@
<div class="pagination">
{{ url := "/ranking?content=" + Content +"&date=" + Data.CurrentDate
+ "&mode=" + Mode + "&page=" }}
<small>Page {{ Page }}/10</small>
<small>Page {{ Page }}/{{ PageLimit }}</small>
<br />
{{ raw: createPaginator(url, "#checkpoint", Page, 10) }}
</div>