Skip to content

fix: display corrections #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PascalRepond merged 1 commit into from
Jan 4, 2026
Merged

fix: display corrections #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/core/templatetags/media_tags.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"PLANNED": "badge-info",
"IN_PROGRESS": "badge-accent",
"COMPLETED": "badge-success",
"PAUSED": "badge-neutral",
"PAUSED": "badge-primary",
"DNF": "badge-error",
}

Expand Down
2 changes: 1 addition & 1 deletion src/static/css/easymde.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
}

[data-theme="forest"] .EasyMDEContainer .CodeMirror-cursor {
border-left-color: var(--color-base-content);
border-left-color: var(--color-base-content) !important;
}

/* Editor toolbar dark mode */
Expand Down
8 changes: 5 additions & 3 deletions src/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,18 @@
{% htmx_script %}
{% block extra_css %}
{% endblock extra_css %}
{% block head_js %}
{% endblock head_js %}
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<!-- Drawer layout: sidebar on desktop, hamburger menu on mobile -->
<div class="drawer lg:drawer-open">
<div class="drawer xl:drawer-open">
<!-- Hidden checkbox to control drawer state -->
<input id="sidebar-drawer" type="checkbox" class="drawer-toggle" />
<!-- Main content area -->
<div class="drawer-content flex flex-col">
<!-- Minimal top navbar (mobile hamburger only) -->
<div class="navbar bg-base-100 shadow-sm lg:hidden">
<div class="navbar bg-base-100 shadow-sm xl:hidden">
<!-- Hamburger button (mobile only) -->
<div class="flex-none">
<label for="sidebar-drawer"
Expand All @@ -52,7 +54,7 @@
</div>
</div>
<!-- Page content -->
<div class="p-4 lg:p-12">
<div class="p-4 xl:p-12">
{% block content %}
{% endblock content %}
</div>
Expand Down
12 changes: 9 additions & 3 deletions src/templates/media_edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,16 @@
{% endif %}
{% endblock title %}
{% block extra_css %}
{{ form.media.css }}
<link rel="stylesheet" href="{% static 'css/easymde.css' %}">
{% endblock extra_css %}
{% block head_js %}
{{ form.media.js }}
{% endblock head_js %}
{% block extra_js %}
<script src="{% static 'js/media_edit.js' %}"></script>
{% endblock extra_js %}
{% block content %}
{{ form.media }}
<div class="max-w-4xl mx-auto">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
Expand Down Expand Up @@ -227,5 +233,5 @@ <h1 class="text-4xl font-bold">
{# Confirmation modal for media deletion #}
{% include "partials/confirm-modal.html" with modal_id="confirm-delete-modal" title=_("Delete Media") message=_("Are you sure you want to delete this media? This action cannot be undone.") confirm_text=_("Yes, delete") is_danger=True form_id="delete-form" %}
{% endif %}
<script src="{% static 'js/media_edit.js' %}"></script>
{% endblock content %}
</div>
{% endblock content %}
31 changes: 21 additions & 10 deletions src/templates/partials/media-items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,6 @@
<span class="badge badge-neutral badge-lg"
aria-label="{{ media.get_media_type_display }}">{% media_icon media.media_type size="md" %}</span>
</div>
{% if media.score %}
<div class="absolute top-2 right-2 pointer-events-none">{% include "partials/media-score-badge.html" %}</div>
{% endif %}
</figure>
<div class="card-body p-3">
<div class="flex justify-between gap-2">
Expand All @@ -38,6 +35,10 @@ <h3 class="card-title inline">{{ media.title }}</h3>
{% include "partials/media-edit-button.html" %}
</div>
{% include "partials/media-status-badge.html" %}
{% if media.score %}
<div class="mt-2">{% include "partials/media-score-stars.html" with size="sm" show_badge=False %}</div>
{% include "partials/media-score-badge.html" %}
{% endif %}
{% if media.review %}
<div id="review-cell-{{ media.id }}" class="text-sm review-text">
{% include "partials/media-review-clamped.html" %}
Expand All @@ -57,20 +58,30 @@ <h3 class="card-title inline">{{ media.title }}</h3>
{# Title, contributors #}
<td class="align-top p-2">
<div class="flex flex-col gap-1">
<a href="{% url 'media_detail' media.pk %}" class="hover:underline">
<h3 class="font-bold text-base">
{{ media.title }}
{% if media.pub_year %}<span class="opacity-70 text-sm font-normal">({{ media.pub_year }})</span>{% endif %}
</h3>
</a>
<div class="flex items-start gap-2 justify-between">
<a href="{% url 'media_detail' media.pk %}" class="hover:underline">
<h3 class="font-bold text-base">
{{ media.title }}
{% if media.pub_year %}<span class="opacity-70 text-sm font-normal">({{ media.pub_year }})</span>{% endif %}
</h3>
</a>
</div>
{% if media.contributors.all %}
<div class="text-sm opacity-70">{% include "partials/media-contributors.html" %}</div>
{% endif %}
{# Show badge on small screens only (hidden from md+) #}
{% if media.score %}
<div class="md:hidden shrink-0">{% include "partials/media-score-badge.html" with size="sm" %}</div>
{% endif %}
</div>
</td>
{# Review #}
<td class="align-top p-2 hidden md:table-cell">
{% include "partials/media-score-badge.html" with size="sm" extra_class="mb-2" %}
{% if media.score %}
{# Show only badge on medium screens, stars + badge on large screens #}
<div class="mb-2 hidden xl:block">{% include "partials/media-score-stars.html" with size="sm" %}</div>
<div class="mb-2 xl:hidden">{% include "partials/media-score-badge.html" with size="sm" %}</div>
{% endif %}
{% if media.review %}
<div id="review-cell-{{ media.id }}" class="text-sm max-w-200 review-text">
{% include "partials/media-review-clamped.html" %}
Expand Down
2 changes: 1 addition & 1 deletion src/templates/partials/media-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% if page_obj %}
{% if view_mode == 'grid' %}
{# Grid view - Cards layout #}
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mt-4"
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 mt-4"
id="media-container">{% include "partials/media-items-page.html" %}</div>
{% else %}
{# List view - Table layout #}
Expand Down
17 changes: 17 additions & 0 deletions src/templates/partials/media-score-stars-inner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% load i18n %}
{# Inner template for star display - called by media-score-stars.html #}
<div class="flex items-center {{ gap_size }}"
role="img"
aria-label="{% translate 'Score:' %} {{ media.score }} {% translate 'out of 10' %}">
{# Star rating display #}
<div class="rating {{ rating_size }}">
{% for i in "0123456789" %}
<span class="mask mask-star-2 bg-orange-400"
{% if forloop.counter <= media.score %}aria-current="true"{% endif %}></span>
{% endfor %}
</div>
{# Score badge with label (optional) #}
{% if show_badge != False %}
<div class="flex items-center gap-2">{% include "partials/media-score-badge.html" with size=badge_size %}</div>
{% endif %}
</div>
29 changes: 16 additions & 13 deletions src/templates/partials/media-score-stars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
{% load i18n %}
{# Display score with stars (read-only) #}
<div class="flex items-center gap-3"
role="img"
aria-label="{% translate 'Score:' %} {{ media.score }} {% translate 'out of 10' %}">
{# Star rating display #}
<div class="rating rating-lg">
{% for i in "0123456789" %}
<span class="mask mask-star-2 bg-orange-400"
{% if forloop.counter <= media.score %}aria-current="true"{% endif %}></span>
{% endfor %}
</div>
{# Score badge with label #}
<div class="flex items-center gap-2">{% include "partials/media-score-badge.html" with size="lg" %}</div>
</div>
{# Parameters: size (optional) - 'sm', 'md' (default), or 'lg' #}
{# Parameters: show_badge (optional) - show score badge, default True #}
{% if size == 'sm' %}
{% with rating_size="rating-sm" badge_size="sm" gap_size="gap-2" %}
{% include "partials/media-score-stars-inner.html" %}
{% endwith %}
{% elif size == 'lg' %}
{% with rating_size="rating-lg" badge_size="lg" gap_size="gap-3" %}
{% include "partials/media-score-stars-inner.html" %}
{% endwith %}
{% else %}
{# Default: medium size #}
{% with rating_size="rating-md" badge_size="md" gap_size="gap-2" %}
{% include "partials/media-score-stars-inner.html" %}
{% endwith %}
{% endif %}