nav and heading restyling

This commit is contained in:
perennial
2024-10-24 22:30:05 +11:00
parent c49d240673
commit 4886adee5a
8 changed files with 44 additions and 30 deletions
+4 -2
View File
@@ -5,11 +5,11 @@
<link rel="prefetch" href="/discovery/novel">
<div class="row justify-content-center g-4">
<h1 class="text-center"><i class="bi bi-compass me-2"></i>Discovery</h1>
<h1 class="mb-0"><i class="bi bi-compass me-2"></i>Discovery</h1>
<div class="col-12">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
<div class="mb-2 mb-md-0">
{{- Type := "discovery" }}
{{- path := slice("discovery", "discovery/novel") }}
@@ -34,6 +34,8 @@
</div>
</div>
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
<!-- Main content -->
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
{{- include "fragments/small-tn" .Artworks }}
+3 -1
View File
@@ -7,7 +7,7 @@
<div class="col-12">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
{{- Mode := isset(Queries.mode) ? Queries.mode : "safe" }}
{{- url := "/self/followingWorks" + "?mode=" }}
{{- path := slice("all", "safe", "r18") }}
@@ -20,6 +20,8 @@
</div>
</div>
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
<!-- Main content -->
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
{{- if len(.Artworks) > 0 }}
+10 -6
View File
@@ -22,13 +22,15 @@
<!-- Today's illustration rankings -->
<div class="col-12">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
<h2 class="mb-3 mb-md-0">Today's illustration rankings</h2>
<a href="/ranking" class="custom-btn-secondary">See more</a>
</div>
<h2>Today's illustration rankings</h2>
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
{{- include "fragments/ranking-tn" .Data.Rankings.Contents }}
{* NOTE: we only render 48 items here to avoid a newline at the end with only two items *}
{{- include "fragments/ranking-tn" (.Data.Rankings.Contents[:48]) }}
</div>
<div class="d-flex mt-3">
<a href="/ranking" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
</div>
</div>
@@ -78,7 +80,9 @@
</div>
</div>
<div class="col-12">
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-0">
<div class="col-12 mt-3">
<h2>Recommended works</h2>
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
{{- include "fragments/small-tn" .Data.Recommended }}
+4 -2
View File
@@ -2,10 +2,10 @@
{{- import "blocks/underlinenav" }}
{{- block body() }}
<div class="row justify-content-center g-4">
<h1 class="text-center"><i class="bi bi-stars me-2"></i>Newest</h1>
<h1 class="mb-0"><i class="bi bi-stars me-2"></i>Newest</h1>
<div class="col-12">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-end mx-auto mb-4">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-end mx-auto">
{{- baseURL := "/newest" }}
{{- paths := slice("", "?mode=r18") }}
{{- names := slice("Safe", "R-18") }}
@@ -17,6 +17,8 @@
</div>
</div>
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
{{ include "fragments/small-tn" .Items }}
</div>
+4 -2
View File
@@ -5,11 +5,11 @@
<link rel="prefetch" href="/discovery">
<div class="row justify-content-center g-4">
<h1 class="text-center"><i class="bi bi-compass me-2"></i>Discovery</h1>
<h1 class="mb-0"><i class="bi bi-compass me-2"></i>Discovery</h1>
<div class="col-12">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
<div class="mb-2 mb-md-0">
{{- Type := "/discovery/novel" }}
{{- path := slice("/discovery", "/discovery/novel") }}
@@ -34,6 +34,8 @@
</div>
</div>
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
<!-- Main content -->
<div class="row row-cols-1 row-cols-lg-2 g-4">
{{- range .Novels }}
+1 -1
View File
@@ -2,7 +2,7 @@
{* {{- import "blocks/pagination" }} *}
{{- block body() }}
<div class="row justify-content-center g-4">
<h1 class="text-center"><i class="bi bi-palette me-2"></i>pixivision</h1>
<h1 class="mb-0"><i class="bi bi-palette me-2"></i>pixivision</h1>
<div class="col-12">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+15 -15
View File
@@ -41,15 +41,24 @@
</div>
<div class="row justify-content-center g-4">
<h1 class="text-center"><i class="bi bi-bar-chart-line me-2"></i>Ranking</h1>
<noscript>
{{ include "noscript/ranking" }}
</noscript>
<div class="col-12">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Content types">
<div class="d-flex flex-row align-items-center justify-content-start">
<!-- TODO: use the actual mode and content names instead of variables, and make weekly and monthly show a date range -->
{{- if isset(Queries.mode) && isset(Queries.content) }}
<h1 class="text-capitalize mb-0 me-3"><i class="bi bi-bar-chart-line me-2"></i>{{ Queries.mode }} {{ Queries.content }} rankings for {{ .Data.CurrentDate }}</h1>
{{- else }}
<h1 class="text-capitalize mb-0 me-3"><i class="bi bi-bar-chart-line me-2"></i>Daily All Rankings for {{ .Data.CurrentDate }}</h1>
{{- end }}
<button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
<i class="bi bi-gear-fill"></i>
</button>
</div>
<div class="col-12">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto" aria-label="Content types">
{*
TODO: add additional checks to these UnderlineNav buttons to ensure only valid URLs can be generated
e.g. selecting the "Ugoira" button hides the buttons under
@@ -72,17 +81,8 @@
{{- name := slice("Overall", "Illustrations", "Ugoira", "Manga")}}
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
</div>
<div class="d-flex flex-row align-items-center justify-content-between mb-4" aria-label="Ranking options">
<!-- TODO: use the actual mode and content names instead of variables, and make weekly and monthly show a date range -->
{{- if isset(Queries.mode) && isset(Queries.content) }}
<h2 class="text-capitalize mb-0"><i class="bi bi-bar-chart-line me-2"></i>{{ Queries.mode }} {{ Queries.content }} rankings for {{ .Data.CurrentDate }}</h2>
{{- else }}
<h2 class="text-capitalize mb-0"><i class="bi bi-bar-chart-line me-2"></i>Daily All Rankings for {{ .Data.CurrentDate }}</h2>
{{- end }}
<button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
<i class="bi bi-gear-fill me-0 me-md-2"></i>Options
</button>
</div>
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
<div class="d-flex flex-row align-items-center justify-content-between mb-4" aria-label="Date navigation">
{{- yield RankingNav()}}
+3 -1
View File
@@ -98,7 +98,7 @@
<div class="col-12" id="checkpoint">
<!-- Navigation -->
<div class="d-flex flex-column flex-md-row align-items-start justify-content-center justify-content-md-between mx-auto mb-4">
<div class="d-flex flex-column flex-md-row align-items-start justify-content-center justify-content-md-between mx-auto">
{{- baseURL := "/users/" + .User.ID + "/" }}
{{- paths := slice("" + "#checkpoint", "illustrations" + "#checkpoint", "manga" + "#checkpoint", "novels" + "#checkpoint", "bookmarks" + "#checkpoint") }}
{{- names := slice("Home", "Illustrations", "Manga", "Novels", "Bookmarks") }}
@@ -106,6 +106,8 @@
{{- yield UnderlineNavUser(baseURL=baseURL, paths=paths, names=names, categoryCounts=categoryCounts, activeState=.Category.Value + "#checkpoint") }}
</div>
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
<!-- User content -->
<!-- Home category (all works) -->