Feature: added switchers for ranking page
This commit is contained in:
parent
625837143b
commit
7ffe69cfaa
6 changed files with 98 additions and 22 deletions
5
main.go
5
main.go
|
@ -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
|
||||
|
|
|
@ -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"`
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>⧉ {{ .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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue