feat: enhance movie rating display with star icons and improved styling
This commit is contained in:
@@ -16,7 +16,13 @@
|
||||
{% if let Some(dir) = entry.movie().director() %}
|
||||
<div class="director">{{ dir }}</div>
|
||||
{% endif %}
|
||||
<div class="rating">{{ entry.review().rating().value() }}/5</div>
|
||||
<div class="rating">
|
||||
<span class="star {% if entry.review().rating().value() >= 1 %}filled{% else %}empty{% endif %}">★</span>
|
||||
<span class="star {% if entry.review().rating().value() >= 2 %}filled{% else %}empty{% endif %}">★</span>
|
||||
<span class="star {% if entry.review().rating().value() >= 3 %}filled{% else %}empty{% endif %}">★</span>
|
||||
<span class="star {% if entry.review().rating().value() >= 4 %}filled{% else %}empty{% endif %}">★</span>
|
||||
<span class="star {% if entry.review().rating().value() >= 5 %}filled{% else %}empty{% endif %}">★</span>
|
||||
</div>
|
||||
{% if let Some(comment) = entry.review().comment() %}
|
||||
<div class="comment">{{ comment.value() }}</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -175,10 +175,18 @@ nav a:hover {
|
||||
}
|
||||
|
||||
.rating {
|
||||
font-size: 0.88em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1.15em;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.star.filled {
|
||||
color: var(--aqua);
|
||||
margin-bottom: 2px;
|
||||
text-shadow: 0 0 8px var(--aqua-glow), 0 0 2px var(--aqua);
|
||||
}
|
||||
|
||||
.star.empty {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.comment {
|
||||
|
||||
Reference in New Issue
Block a user