VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

style ranking

Browse Source
This commit is contained in:
perennial
2024-10-02 15:20:03 +10:00
parent afc43a649f
commit e2e48d9679
1 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/views/rank.jet.html
+27 -19
View File
@@ -4,8 +4,9 @@
{{- block body() }}
<div class="row justify-content-center">
<h1 class="h3 fw-bold text-center mb-4">{{ .Title }}</h1>
<div class="col-12 col-lg-6">
<div class="col-12">
<div class="row g-3">
<div class="col-12 col-lg-9">
<div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
<h2 class="h4 fw-bold mb-3">Content</h2>
<p class="text-muted">Select the type of content you want to see in the rankings.</p>
@@ -17,20 +18,13 @@
{{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
{{- end }}
<!-- TODO: align the names of the "Overall" and "Manga" buttons vertically -->
<div class="d-flex flex-wrap mb-2">
{{- path := slice("all") }}
{{- name := slice("Overall")}}
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Content)}}
</div>
<div class="d-flex flex-wrap">
{{- path := slice("illust", "manga", "ugoira") }}
{{- name := slice("Illustrations", "Manga", "Ugoira")}}
{{- path := slice("all", "illust", "manga", "ugoira") }}
{{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Content)}}
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
<h2 class="h4 fw-bold mb-3">Modes</h2>
<p class="text-muted">Choose the time frame or category for the rankings.</p>
@@ -57,24 +51,38 @@
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}</div>
{{- end }}
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card-body rounded-5 bg-body-tertiary p-4 mb-4">
<h2 class="h4 fw-bold mb-3">Reset modes</h2>
<p class="text-muted">You can reset all currently applied ranking modes and filters.</p>
<a href="/ranking" type="button" class="btn btn-danger fw-bold rounded-pill">Reset modes</a>
</div>
<div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
<h2 class="h4 fw-bold mb-3">Date (current: {{ .Data.CurrentDate }})</h2>
<h2 class="h4 fw-bold mb-3">Date ({{ .Data.CurrentDate }})</h2>
<p class="text-muted">Navigate through different dates or view the latest rankings.</p>
{{ url := "/ranking?content=" + Content + "&mode=" + Mode + "&page=1" }}
<div class="d-flex flex-wrap">
<a href="{{ url }}" class="btn btn-outline-secondary text-body fw-bold border-2 rounded-pill me-2 mb-2">Latest</a>
<a href="/rankingCalendar" class="btn btn-outline-secondary text-body fw-bold border-2 rounded-pill me-2 mb-2">Ranking calendar</a>
<div class="d-flex flex-wrap mb-2">
<a href="{{ url }}" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center">
<span>Latest</span>
</a>
</div>
<div class="d-flex flex-wrap">
{{- if .Data.PrevDate != "false" }}
<a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Previous day</a>
{{- end }}
{{ if .Data.NextDate != "false" }}
<a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Next day</a>
<a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center">
<span>Previous day</span>
</a>
{{- end }}
<a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center{{ .Data.NextDate == "false" ? " disabled" : "" }}"{{ .Data.NextDate == "false" ? " aria-disabled=\"true\"" : "" }}>
<span>Next day</span>
</a>
</div>
</div>
</div>
</div>
</div>