Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: consumed yet or not added and recommended_by

Browse Source
This commit is contained in:
Greg 2025-06-01 18:21:57 +02:00
parent 117587ac2f
commit d293691f33
3 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/movies/inception.md
View File

@ -3,6 +3,8 @@ title: "Inception"
category: "Movies" category: "Movies"
image: "/img/inception.jpg" image: "/img/inception.jpg"
rating: 4.8 rating: 4.8
consumed: true
recommended_by: "Christopher"
description: "A mind-bending thriller about dream invasion." description: "A mind-bending thriller about dream invasion."
link: link:
url: "#" url: "#"

34
layouts/_default/single.html
View File

@ -37,6 +37,18 @@
</div> </div>
{{ end }} {{ end }}
{{ if eq .Params.consumed false }}
<div class="detail-consumed-status">
<span class="not-consumed-badge-detail">Not {{ if eq .Params.category "Books" }}Read{{ else if eq .Params.category "Movies" }}Watched{{ else if eq .Params.category "TV Series" }}Watched{{ else if eq .Params.category "Restaurants" }}Visited{{ else if eq .Params.category "Recipes" }}Made{{ else if eq .Params.category "Concerts" }}Attended{{ else }}Experienced{{ end }} Yet</span>
</div>
{{ end }}
{{ with .Params.recommended_by }}
<div class="detail-recommended">
<span class="recommended-label">Recommended by:</span> {{ . }}
</div>
{{ end }}
{{ with .Params.description }} {{ with .Params.description }}
<div class="detail-description">{{ . }}</div> <div class="detail-description">{{ . }}</div>
{{ end }} {{ end }}
@ -234,6 +246,28 @@
border-radius: 16px; border-radius: 16px;
font-size: 0.9rem; font-size: 0.9rem;
} }
.not-consumed-badge-detail {
display: inline-block;
background-color: #2196f3;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 500;
margin: 8px 0 16px 0;
}
.detail-recommended {
margin-bottom: 16px;
font-size: 1.05rem;
color: #555;
}
.recommended-label {
font-weight: 500;
color: #333;
}
.detail-consumed-status {
margin-bottom: 8px;
}
.detail-body { .detail-body {
padding: 24px; padding: 24px;
font-size: 1.1rem; font-size: 1.1rem;

22
layouts/partials/card.html
View File

@ -5,9 +5,13 @@
{{ else }} {{ else }}
<img src="/img/no-cover-available-yet.png" alt="{{ $.Title }} - No cover available"> <img src="/img/no-cover-available-yet.png" alt="{{ $.Title }} - No cover available">
{{ end }} {{ end }}
{{ if eq .Params.consumed false }}
<div class="not-consumed-badge">Not {{ if eq .Params.category "Books" }}Read{{ else if eq .Params.category "Movies" }}Watched{{ else if eq .Params.category "TV Series" }}Watched{{ else if eq .Params.category "Restaurants" }}Visited{{ else if eq .Params.category "Recipes" }}Made{{ else if eq .Params.category "Concerts" }}Attended{{ else }}Experienced{{ end }} Yet</div>
{{ end }}
<div class="card-title">{{ .Title }}</div> <div class="card-title">{{ .Title }}</div>
{{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }} {{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
{{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }} {{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }}
{{ with .Params.recommended_by }}<div class="card-recommended">Recommended by: {{ . }}</div>{{ end }}
<div class="card-desc">{{ .Params.description }}</div> <div class="card-desc">{{ .Params.description }}</div>
</div> </div>
</a> </a>
@ -75,6 +79,24 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
.not-consumed-badge {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(33, 150, 243, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
z-index: 1;
}
.card-recommended {
margin: 4px 16px 0 16px;
font-size: 0.9rem;
color: #666;
font-style: italic;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.card-link-outer .card { .card-link-outer .card {
width: 98vw; width: 98vw;