From adddc7d2308bc4eafd274d99c3fd7bb065a223b3 Mon Sep 17 00:00:00 2001 From: iacore Date: Sun, 11 Feb 2024 16:53:08 +0000 Subject: [PATCH] make paginator show more pages * reduce inline axis padding to save space on small screen --- pages/ranking.go | 18 ++++++++------ pages/user.go | 7 +++++- serve/template.go | 52 +++++++++++++++++++++++---------------- views/css/style.css | 26 +++++++++++++++----- views/css/style.css.map | 2 +- views/css/style.scss | 23 ++++++++++++----- views/pages/rank.jet.html | 2 +- 7 files changed, 87 insertions(+), 43 deletions(-) diff --git a/pages/ranking.go b/pages/ranking.go index 5466254..4aa5f30 100644 --- a/pages/ranking.go +++ b/pages/ranking.go @@ -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, }) } diff --git a/pages/user.go b/pages/user.go index f77faf8..6e41787 100644 --- a/pages/user.go +++ b/pages/user.go @@ -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, }) } diff --git a/serve/template.go b/serve/template.go index b31de79..208141d 100644 --- a/serve/template.go +++ b/serve/template.go @@ -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(`«`, base, ending) - pages += fmt.Sprintf(`‹`, 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 += `
` + { + pages += `` + { + pages += fmt.Sprintf(`«`, base, ending) + pages += fmt.Sprintf(`‹`, base, max(1, current_page-1), ending) } - if i == current_page { - pages += fmt.Sprintf(`%d`, base, i, ending, i) + pages += `` + 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(`%d`, base, i, ending, i) + + } else { + pages += fmt.Sprintf(`%d`, base, i, ending, i) + + } + count++ + } + + pages += `` + if max_page == -1 { + pages += fmt.Sprintf(`›`, base, current_page+1, ending) + pages += fmt.Sprintf(`»`, base, max_page, ending) } else { - pages += fmt.Sprintf(`%d`, base, i, ending, i) - + pages += fmt.Sprintf(`›`, base, min(max_page, current_page+1), ending) + pages += fmt.Sprintf(`»`, base, max_page, ending) } - count++ - } - - if max_page == -1 { - pages += fmt.Sprintf(`›`, base, current_page+1, ending) - pages += fmt.Sprintf(`»`, base, max_page, ending) - } else { - pages += fmt.Sprintf(`›`, base, min(max_page, current_page+1), ending) - pages += fmt.Sprintf(`»`, base, max_page, ending) + pages += `` } + pages += `
` return template.HTML(pages) } diff --git a/views/css/style.css b/views/css/style.css index 25a1817..03ca44e 100644 --- a/views/css/style.css +++ b/views/css/style.css @@ -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 { diff --git a/views/css/style.css.map b/views/css/style.css.map index 8c99829..c04579c 100644 --- a/views/css/style.css.map +++ b/views/css/style.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/views/css/style.scss b/views/css/style.scss index 8ef3268..cd6a483 100644 --- a/views/css/style.scss +++ b/views/css/style.scss @@ -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 { diff --git a/views/pages/rank.jet.html b/views/pages/rank.jet.html index 9cdc328..9f7f151 100644 --- a/views/pages/rank.jet.html +++ b/views/pages/rank.jet.html @@ -67,7 +67,7 @@