more underline animation

This commit is contained in:
perennial
2024-10-11 00:25:28 +11:00
parent a6a1b05220
commit 31397bdf0b
+23 -10
View File
@@ -11,9 +11,10 @@
</div>
<div class="col-8 col-md-9">
<!-- Novel title -->
<h4 class="text-truncate">
<!-- NOTE: using an h4 element here breaks the underline animation for some reason -->
<span class="fs-6 fw-bold text-truncate">
<a href="/novel/{{ .ID }}" class="text-body text-decoration-none">{{ .Title }}</a>
</h4>
</span>
<!-- Series name -->
{{- if .SeriesID }}
@@ -23,13 +24,19 @@
{{- end }}
<!-- Word count and reading time -->
<p class="card-text text-muted small mb-2"><span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span></p>
<p class="card-text text-muted small mb-2">
<span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span>
</p>
<!-- Author info -->
<a href="/users/{{ .UserID }}" class="text-decoration-none d-flex align-items-center me-auto mb-3">
<img src="{{ .UserAvatar }}" alt="{{ .UserName }}" class="rounded-circle object-fit-cover me-2" style="width: 24px; height: 24px" />
<span class="text-body-secondary">{{ .UserName }}</span>
</a>
<div class="d-flex align-items-center me-auto mb-3">
<a href="/users/{{ .UserID }}">
<img src="{{ .UserAvatar }}" alt="{{ .UserName }}" class="rounded-circle object-fit-cover me-2" style="width: 24px; height: 24px" />
</a>
<a href="/users/{{ .UserID }}" class="text-body-secondary text-decoration-none">
{{ .UserName }}
</a>
</div>
{*
<!-- Description -->
@@ -71,11 +78,17 @@
<div class="d-flex justify-content-start align-items-center">
{* NOTE: the following is needed due to incomplete fields in .Novel.UserNovels *}
{{- if .Bookmarks == 0 }}
<span class="text-body-secondary small me-3"> <i class="bi bi-heart-fill me-2"></i>&#8212;</span>
<span class="text-body-secondary small me-3">
<i class="bi bi-heart-fill me-2"></i>&#8212;
</span>
{{- else }}
<span class="text-body-secondary small me-3"> <i class="bi bi-heart-fill me-2"></i>{{ .Bookmarks }}</span>
<span class="text-body-secondary small me-3">
<i class="bi bi-heart-fill me-2"></i>{{ .Bookmarks }}
</span>
{{- end }}
<span class="text-body-secondary small"> <i class="bi bi-calendar me-2"></i>{{ parseTime: .CreateDate }}</span>
<span class="text-body-secondary small">
<i class="bi bi-calendar me-2"></i>{{ parseTime: .CreateDate }}
</span>
</div>
</div>
</div>