Feature: added switchers for ranking page

This commit is contained in:
VnPower 2023-06-01 17:22:20 +07:00
parent 625837143b
commit 7ffe69cfaa
Signed by: vnpower
GPG key ID: 881DE3DEB966106C
6 changed files with 98 additions and 22 deletions

View file

@ -4,6 +4,7 @@ import (
"html/template"
"pixivfe/configs"
"pixivfe/views"
"strconv"
"github.com/gin-gonic/gin"
)
@ -23,6 +24,10 @@ func setupRouter() *gin.Engine {
"dec": func(n int) int {
return n - 1
},
"toInt": func(s string) int64 {
n, _ := strconv.ParseInt(s, 10, 32)
return n
},
"isEmpty": func(s string) bool {
return len(s) < 1

View file

@ -133,11 +133,11 @@ type User struct {
}
type RankedArtwork struct {
ID string `json:"illust_id"`
ID int `json:"illust_id"`
Title string `json:"title"`
Pages int `json:"illust_page_count"`
Pages string `json:"illust_page_count"`
Image string `json:"url"`
ArtistID string `json:"user_id"`
ArtistID int `json:"user_id"`
ArtistName string `json:"user_name"`
ArtistAvatar string `json:"profile_img"`
}

View file

@ -46,8 +46,8 @@ body {
position: absolute;
width: 1rem;
height: 1rem;
top: 0.6rem;
left: 0.6rem;
top: 0.3rem;
left: 0.3rem;
border-radius: 50%;
padding: 1rem;
background-color: #262a2b;
@ -255,6 +255,29 @@ body {
border-radius: 50%;
}
.switcher {
border-radius: 10px;
}
.switcher .switch-title {
margin-right: 5px;
}
.switcher .switch-button {
display: inline-block;
padding: 8px 5px;
background-color: #262a2b;
color: #d8d4cf;
text-decoration: none;
text-decoration-color: #d8d4cf;
}
.switcher .switch-button:hover {
background-color: rgba(38, 42, 43, 0.6);
text-decoration: underline;
}
.switcher .switch-seperator {
display: inline-block;
margin-left: 10px;
}
.pagination {
width: 100%;
text-align: center;

View file

@ -58,8 +58,8 @@ body {
position: absolute;
width: 1rem;
height: 1rem;
top: 0.6rem;
left: 0.6rem;
top: 0.3rem;
left: 0.3rem;
border-radius: 50%;
padding: 1rem;
background-color: $bg-alt;
@ -299,6 +299,33 @@ body {
}
}
.switcher {
border-radius: 10px;
.switch-title {
margin-right: 5px;
}
.switch-button {
display: inline-block;
padding: 8px 5px;
background-color: $bg-alt;
color: $fg;
text-decoration: none;
text-decoration-color: $fg;
&:hover {
background-color: $bg-alt-dimmed;
text-decoration: underline;
}
}
.switch-seperator {
display: inline-block;
margin-left: 10px;
}
}
.pagination {
width: 100%;
text-align: center;

View file

@ -3,31 +3,42 @@
<div class="container">
<h2>{{ .Title }}</h2>
<div class="switcher">
<span class="switch-title">Content</span>
<a href="/ranking?content=all&mode={{ .Mode }}&p=1" class="switch-button">Overall</a>
<a href="/ranking?content=illust&mode={{ .Mode }}&p=1" class="switch-button">Illustrations</a>
<a href="/ranking?content=manga&mode={{ .Mode }}&p=1" class="switch-button">Mangas</a>
</div>
<br />
<div class="switcher">
<span class="switch-title">Modes</span>
<a href="/ranking?content={{ .Content }}&mode=daily&p=1" class="switch-button">Daily</a>
<a href="/ranking?content={{ .Content }}&mode=weekly&p=1" class="switch-button">Weekly</a>
<a href="/ranking?content={{ .Content }}&mode=monthly&p=1" class="switch-button">Monthly</a>
<a href="/ranking?content={{ .Content }}&mode=rookie&p=1" class="switch-button">Rookie</a>
<span class="switch-seperator"></span>
<a href="/ranking?content={{ .Content }}&mode=daily_r18&p=1" class="switch-button">Daily (R-18)</a>
<a href="/ranking?content={{ .Content }}&mode=weekly_r18&p=1" class="switch-button">Weekly (R-18)</a>
</div>
<br />
{{ range $i, $_ := .Items }}
<div class="artwork-thumbnail-small artwork-thumbnail">
<div class="artwork-rank-circle">{{ $i | inc}}</div>
{{ if gt .Pages 1 }}
{{ if gt (toInt .Pages) 1 }}
<div class="artwork-page-count"><span>&boxbox; {{ .Pages }}</span></div>
{{ end }}
<a href="/artworks/{{ .ID }}">
<img
data-src="{{ .Image }}"
alt="{{ .Title }}"
class="artwork-master-image lazy"
/>
<img data-src="{{ .Image }}" alt="{{ .Title }}" class="artwork-master-image lazy" />
</a>
<a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
<h3 class="no-margin">{{ .Title }}</h3>
</a>
<a href="/users/{{ .ArtistID }}" class="artwork-thumbnail-artist flex"
><img
data-src="{{ .ArtistAvatar }}"
alt="{{ .ArtistName }}"
class="artwork-thumbnail-artist-avatar border-rounded lazy"
/>
{{ .ArtistName }}</a
>
<a href="/users/{{ .ArtistID }}" class="artwork-thumbnail-artist flex"><img data-src="{{ .ArtistAvatar }}"
alt="{{ .ArtistName }}" class="artwork-thumbnail-artist-avatar border-rounded lazy" />
{{ .ArtistName }}</a>
</div>
{{ end }}
</div>

View file

@ -7,10 +7,17 @@ import (
"pixivfe/handler"
"strconv"
"time"
"unicode"
"github.com/gin-gonic/gin"
)
func capitalize(str string) string {
runes := []rune(str)
runes[0] = unicode.ToUpper(runes[0])
return string(runes)
}
var PC *models.PixivClient
func artwork_page(c *gin.Context) {
@ -77,7 +84,10 @@ func ranking_page(c *gin.Context) {
response, _ := PC.GetRanking(mode, content, page)
c.HTML(http.StatusOK, "rank.html", gin.H{"Items": response.Artworks})
c.HTML(http.StatusOK, "rank.html", gin.H{"Items": response.Artworks,
"Mode": mode,
"Content": content,
"Page": page})
}
func newestArtworksPage(c *gin.Context) {