Feature: added page count for artwork preview
This commit is contained in:
parent
c516d7c7be
commit
6f782d83a3
4 changed files with 50 additions and 0 deletions
|
@ -32,6 +32,9 @@
|
||||||
<div class="thumbnail-container">
|
<div class="thumbnail-container">
|
||||||
{{ range $parent.Recent }}
|
{{ range $parent.Recent }}
|
||||||
<div class="artwork-thumbnail-small artwork-thumbnail">
|
<div class="artwork-thumbnail-small artwork-thumbnail">
|
||||||
|
{{ if gt .Pages 1 }}
|
||||||
|
<div class="artwork-page-count"><span>⧉ {{ .Pages }}</span></div>
|
||||||
|
{{ end }}
|
||||||
<a href="/artworks/{{ .ID }}">
|
<a href="/artworks/{{ .ID }}">
|
||||||
<img src="{{ .Thumbnail }}" alt="{{ .Thumbnail }}" class="artwork-master-image" />
|
<img src="{{ .Thumbnail }}" alt="{{ .Thumbnail }}" class="artwork-master-image" />
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -52,6 +52,27 @@ body {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
background-color: #262a2b;
|
background-color: #262a2b;
|
||||||
}
|
}
|
||||||
|
.artwork-thumbnail .artwork-page-count {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.6rem;
|
||||||
|
right: 0.6rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.3rem;
|
||||||
|
background-color: #262a2b;
|
||||||
|
opacity: 60%;
|
||||||
|
}
|
||||||
|
.artwork-thumbnail .artwork-page-count span {
|
||||||
|
display: flex;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: bold;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: max-content;
|
||||||
|
height: 0.5rem;
|
||||||
|
}
|
||||||
.artwork-thumbnail .artwork-thumbnail-title {
|
.artwork-thumbnail .artwork-thumbnail-title {
|
||||||
margin: 0.4rem;
|
margin: 0.4rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
|
@ -63,6 +63,29 @@ body {
|
||||||
background-color: $bg-alt;
|
background-color: $bg-alt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.artwork-page-count {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.6rem;
|
||||||
|
right: 0.6rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.3rem;
|
||||||
|
background-color: $bg-alt;
|
||||||
|
opacity: 60%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: bold;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: max-content;
|
||||||
|
height: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.artwork-thumbnail-title {
|
.artwork-thumbnail-title {
|
||||||
margin: 0.4rem;
|
margin: 0.4rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
{{ range . }}
|
{{ range . }}
|
||||||
<div class="artwork-thumbnail-small artwork-thumbnail">
|
<div class="artwork-thumbnail-small artwork-thumbnail">
|
||||||
|
{{ if gt .Pages 1 }}
|
||||||
|
<div class="artwork-page-count"><span>⧉ {{ .Pages }}</span></div>
|
||||||
|
{{ end }}
|
||||||
<a href="/artworks/{{ .ID }}">
|
<a href="/artworks/{{ .ID }}">
|
||||||
<img
|
<img
|
||||||
data-src="{{ .Thumbnail }}"
|
data-src="{{ .Thumbnail }}"
|
||||||
|
|
Loading…
Reference in a new issue