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

make thumbnails responsive to hover state

Browse Source
This commit is contained in:
perennial
2024-10-08 16:06:18 +11:00
parent 31e05d5617
commit da7f16a47e
4 changed files with 51 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bootstrap-style.css
Vendored
+15 -4
View File
@@ -12938,11 +12938,22 @@ textarea.form-control-lg {
max-height: 40vh;
}
.thumbnail-hover-dark img {
transition: opacity 0.2s;
.thumbnail-hover-dark {
overflow: hidden;
}
.thumbnail-hover-dark img:hover {
opacity: 0.8;
.thumbnail-hover-dark .thumbnail-wrapper {
overflow: hidden;
}
.thumbnail-hover-dark .thumbnail-wrapper img {
transition: all 0.3s ease;
}
.thumbnail-hover-dark .thumbnail-wrapper img:hover {
filter: brightness(0.85);
}
@media (prefers-reduced-motion: no-preference) {
.thumbnail-hover-dark .thumbnail-wrapper img:hover {
transform: scale(1.005);
}
}
h1, .h1 {
assets/css/bootstrap-style.scss
Vendored
+22 -4
View File
@@ -175,11 +175,29 @@ $utilities: map-merge(
max-height: 40vh;
}
.thumbnail-hover-dark img {
transition: opacity 0.2s; // Smooth transition when hovering
/// TODO: need usability tests to determine whether these variables are ok; can also cause weird moire/pixel level scaling issues with novel thumbnails (especially the default cover which has intricate details)
.thumbnail-hover-dark {
overflow: hidden;
&:hover {
opacity: 0.8; // Apply darkening effect
/// Wrapper to maintain rounded corners during zoom effect
/// The wrapper hides overflow and applies rounded corners,
/// while allowing the image inside to scale without breaking the rounded shape
.thumbnail-wrapper {
overflow: hidden;
img {
transition: all 0.3s ease;
&:hover {
filter: brightness(0.85);
}
@media (prefers-reduced-motion: no-preference) {
&:hover {
transform: scale(1.005);
}
}
}
}
}
assets/views/fragments/novel-tn.jet.html
+3 -1
View File
@@ -5,7 +5,9 @@
<div class="col-4 col-md-2">
<a href="/novel/{{ .ID }}" class="text-decoration-none">
<div class="ratio ratio-3x4">
<img src="{{ .CoverURL }}" alt="{{ .Title }}" class="img-fluid rounded object-fit-cover" loading="lazy" />
<div class="thumbnail-wrapper rounded overflow-hidden">
<img src="{{ .CoverURL }}" alt="{{ .Title }}" class="img-fluid rounded object-fit-cover w-100 h-100" loading="lazy" />
</div>
</div>
</a>
</div>
assets/views/fragments/thumbnail-dt.jet.html
+11 -9
View File
@@ -29,15 +29,17 @@
</div>
</div>
<div class="ratio ratio-1x1">
{{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
<!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
<img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover rounded" loading="lazy" />
<!-- When the user has enabled hideAi, display a plain thumbnail instead -->
{{- else if AiType == 2 && hideAi }}
<img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover rounded" loading="lazy" />
{{- else }}
<img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover rounded" loading="lazy" />
{{- end }}
<div class="thumbnail-wrapper rounded overflow-hidden">
{{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
<!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
<img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
<!-- When the user has enabled hideAi, display a plain thumbnail instead -->
{{- else if AiType == 2 && hideAi }}
<img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
{{- else }}
<img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
{{- end }}
</div>
</div>
<!-- When an artwork is a ugoira -->
<!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.