mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
ranking rework wip
This commit is contained in:
perennial
Vendored
+3
-17
@@ -4519,7 +4519,7 @@ textarea.form-control-lg {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.card-body, .custom-card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
|
||||
color: var(--bs-card-color);
|
||||
@@ -7665,7 +7665,7 @@ textarea.form-control-lg {
|
||||
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
|
||||
}
|
||||
|
||||
.border-0, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
|
||||
.border-0, .custom-card-body, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
@@ -9177,7 +9177,7 @@ textarea.form-control-lg {
|
||||
border-radius: var(--bs-border-radius-xl) !important;
|
||||
}
|
||||
|
||||
.rounded-5, .custom-card {
|
||||
.rounded-5, .custom-card-body, .custom-card {
|
||||
border-radius: var(--bs-border-radius-xxl) !important;
|
||||
}
|
||||
|
||||
@@ -12250,18 +12250,4 @@ h6, .h6 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* [data-bs-theme="charcoal"] {
|
||||
--bs-body-color: #f5f5f5;
|
||||
--bs-body-color-rgb: rgb(245, 245, 245);
|
||||
--bs-body-bg: #1f1f1f;
|
||||
--bs-body-bg-rgb: rgb(31, 31, 31);
|
||||
--bs-secondary-color: #d6d6d6;
|
||||
--bs-secondary-color-rgb: rgb(214, 214, 214);
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
/// --bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: rgba(255,255,255,0.12);
|
||||
--bs-link-color: rgb(102, 159, 194);
|
||||
} */
|
||||
|
||||
/*# sourceMappingURL=bootstrap-style.css.map */
|
||||
|
||||
Vendored
+13
-14
@@ -11,6 +11,7 @@ $aspect-ratios: (
|
||||
"9x16": calc(16 / 9 * 100%),
|
||||
);
|
||||
|
||||
/// Define custom colors
|
||||
@import "./bootstrap/functions";
|
||||
@import "./bootstrap/variables";
|
||||
@import "./bootstrap/variables-dark";
|
||||
@@ -29,6 +30,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
|
||||
@import "./bootstrap/bootstrap";
|
||||
|
||||
/// Custom classes to reduce boilerplate
|
||||
.custom-btn-secondary {
|
||||
@extend .btn;
|
||||
@extend .fw-bold;
|
||||
@@ -49,28 +51,39 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
@extend .rounded-5;
|
||||
}
|
||||
|
||||
.custom-card-body {
|
||||
@extend .card-body;
|
||||
@extend .border-0;
|
||||
@extend .rounded-5;
|
||||
}
|
||||
|
||||
/// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
|
||||
h1 {
|
||||
font-size: $h3-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $h4-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
@@ -95,17 +108,3 @@ h6 {
|
||||
.htmx-request.like-spinner {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* [data-bs-theme="charcoal"] {
|
||||
--bs-body-color: #f5f5f5;
|
||||
--bs-body-color-rgb: rgb(245, 245, 245);
|
||||
--bs-body-bg: #1f1f1f;
|
||||
--bs-body-bg-rgb: rgb(31, 31, 31);
|
||||
--bs-secondary-color: #d6d6d6;
|
||||
--bs-secondary-color-rgb: rgb(214, 214, 214);
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
/// --bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: rgba(255,255,255,0.12);
|
||||
--bs-link-color: rgb(102, 159, 194);
|
||||
} */
|
||||
|
||||
+37
-43
@@ -1,17 +1,16 @@
|
||||
{{- extends "layout/default" }}
|
||||
{{- import "blocks/switcher" }}
|
||||
{{- import "blocks/pagination" }}
|
||||
{{- import "blocks/underlinenav" }}
|
||||
{{- block body() }}
|
||||
<div class="row justify-content-center">
|
||||
<h1 class="text-center mb-4">{{ .Title }}</h1>
|
||||
<div class="row justify-content-center g-4">
|
||||
<h1 class="text-center">{{ .Title }}</h1>
|
||||
<div class="col-12">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-lg-9">
|
||||
<div class="card border-0">
|
||||
<div class="card-body rounded-5 bg-body-tertiary p-4 mb-4">
|
||||
<div class="custom-card">
|
||||
<div class="custom-card-body bg-charcoal-surface1 p-4">
|
||||
<h2 class="mb-3">Ranking options</h2>
|
||||
<p class="small text-muted">Select ranking modes and filters.</p>
|
||||
<!-- TODO: add additional checks to these Switcher buttons to ensure only valid URLs can be generated
|
||||
<!-- 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
|
||||
"Specialized rankings" as well as the "Monthly" and "Rookie"
|
||||
options under "Time frame", but this doesn't occur vice versa
|
||||
@@ -30,77 +29,72 @@
|
||||
<div class="row border-bottom border-2 mb-3">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h3 class="mb-3">Content type</h3>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="Content types">
|
||||
{{- path := slice("all", "illust", "manga", "ugoira") }}
|
||||
{{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
|
||||
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Content)}}
|
||||
</div>
|
||||
<p class="small text-muted mb-3">Select the type of content you want to see in the rankings.</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h3>Content type</h3>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="Content types">
|
||||
{{- path := slice("all", "illust", "manga", "ugoira") }}
|
||||
{{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
|
||||
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
|
||||
</div>
|
||||
<p class="small text-muted mb-3">Select the type of content you want to see in the rankings.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h3 class="mb-3">Time frame</h3>
|
||||
<div class="col-12 col-md-7">
|
||||
<h3>Time frame</h3>
|
||||
{{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
|
||||
{{- if Content != "ugoira" }}
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
|
||||
{{- path := slice("daily", "weekly", "monthly") }}
|
||||
{{- name := slice("Daily", "Weekly", "Monthly")}}
|
||||
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
|
||||
{{- path := slice("daily", "weekly", "monthly", "rookie") }}
|
||||
{{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
|
||||
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
|
||||
{{- path := slice("rookie") }}
|
||||
{{- name := slice("Rookie")}}
|
||||
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
|
||||
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
|
||||
{{- path := slice("daily_r18", "weekly_r18") }}
|
||||
{{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
|
||||
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
{{- else }}
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
|
||||
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
|
||||
{{- path := slice("daily", "weekly") }}
|
||||
{{- name := slice("Daily", "Weekly")}}
|
||||
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
|
||||
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
|
||||
{{- path := slice("daily_r18", "weekly_r18") }}
|
||||
{{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
|
||||
{{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
{{- end }}
|
||||
<p class="small text-muted mb-2">Choose the time frame for the rankings.</p>
|
||||
<p class="small text-muted mb-md-0"><span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.</p>
|
||||
<p class="small text-body-secondary mb-2">Choose the time frame for the rankings.</p>
|
||||
<p class="small text-body-secondary mb-md-0">
|
||||
<span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="col-12 col-md-5">
|
||||
{{- if Content == "all" }}
|
||||
<h3 class="mb-3">Specialized rankings</h3>
|
||||
<h3>Specialized rankings</h3>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="Specialized ranking modes">
|
||||
{{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
|
||||
{{- path := slice("original") }}
|
||||
{{- name := slice("Original")}}
|
||||
{{- yield Switcher(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
|
||||
{{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="Specialized ranking modes">
|
||||
{{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
|
||||
{{- path := slice("male",) }}
|
||||
{{- name := slice("Popular among males")}}
|
||||
{{- yield Switcher(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
|
||||
{{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
<div class="btn-group d-flex flex-wrap" role="group" aria-label="Specialized ranking modes">
|
||||
{{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
|
||||
{{- path := slice("female") }}
|
||||
{{- name := slice("Popular among females")}}
|
||||
{{- yield Switcher(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
|
||||
{{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
|
||||
</div>
|
||||
<p class="small text-muted mb-2">Specialized ranking categories.</p>
|
||||
<p class="small text-muted mb-0">These options are only available when filtering for <span class="fw-bold">Overall</span>.</p>
|
||||
|
||||
Reference in New Issue
Block a user