refactor(media-list): enhance media list layout#23
Conversation
PascalRepond
commented
Dec 27, 2025
PascalRepond
commented
- Updated the media list table to include "Review" and "Reviewed on" columns for better visibility of user feedback.
- Adjusted grid layout to optimize display across different screen sizes.
- Updated dependencies.
📝 WalkthroughWalkthroughAdds HTMX-powered clamped/full media review partials and corresponding views/URLs, changes Media.score choice labels and migration, restructures media list/item and score display templates, updates CSRF hx-headers formatting, CSS class tweaks for filter badge buttons, and adjusts sample fixture review text. Changes
Sequence DiagramsequenceDiagram
actor User
participant Browser
participant HTMX
participant Server as DjangoServer
participant DB as Database
participant Template as TemplateEngine
User->>Browser: Clicks "See more"
Browser->>HTMX: hx-get /media/{pk}/review-full/
HTMX->>Server: GET /media/{pk}/review-full/
Server->>DB: Query Media by pk
DB-->>Server: Media record
Server->>Template: Render media-review-full.html
Template-->>Server: HTML
Server-->>HTMX: 200 HTML (full review)
HTMX->>Browser: Swap innerHTML of `#review-cell-`{pk}
Browser->>User: Shows full review ("See less")
User->>Browser: Clicks "See less"
Browser->>HTMX: hx-get /media/{pk}/review-clamped/
HTMX->>Server: GET /media/{pk}/review-clamped/
Server->>DB: Query Media by pk
DB-->>Server: Media record
Server->>Template: Render media-review-clamped.html (truncate 120 chars)
Template-->>Server: HTML
Server-->>HTMX: 200 HTML (clamped review)
HTMX->>Browser: Swap innerHTML of `#review-cell-`{pk}
Browser->>User: Shows truncated review ("See more")
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (14)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (7)
🧰 Additional context used📓 Path-based instructions (4)**/*.html📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.py📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/models.py📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/views.py📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (3)📓 Common learnings📚 Learning: 2025-12-26T15:18:46.932ZApplied to files:
📚 Learning: 2025-12-27T17:59:56.022ZApplied to files:
🧬 Code graph analysis (2)src/templates/partials/media-review-clamped.html (1)
src/core/views.py (2)
🪛 Ruff (0.14.10)src/core/migrations/0007_alter_media_score.py8-10: Mutable class attributes should be annotated with (RUF012) 12-18: Mutable class attributes should be annotated with (RUF012) 🔇 Additional comments (8)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/templates/partials/media-review-full.html (1)
5-5: Préférer le tag Django {% url %} au lieu d'URL codée en dur.L'URL
/media/{{ media.id }}/review-clamped/est codée en dur. Utilisez le tag{% url %}pour maintenir la cohérence avec les patterns d'URL Django.🔎 Correction proposée
- hx-get="/media/{{ media.id }}/review-clamped/" + hx-get="{% url 'media_review_clamped_htmx' media.id %}"src/templates/partials/media-review-clamped.html (1)
6-6: Préférer le tag Django {% url %} au lieu d'URL codée en dur.L'URL
/media/{{ media.id }}/review-full/est codée en dur. Utilisez le tag{% url %}pour maintenir la cohérence avec les patterns d'URL Django.🔎 Correction proposée
- hx-get="/media/{{ media.id }}/review-full/" + hx-get="{% url 'media_review_full_htmx' media.id %}"
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
uv.lockis excluded by!**/*.lock
📒 Files selected for processing (13)
src/core/fixtures/sample_data.jsonsrc/core/migrations/0007_alter_media_score.pysrc/core/models.pysrc/core/urls.pysrc/core/views.pysrc/static/js/base.jssrc/templates/base.htmlsrc/templates/media.htmlsrc/templates/partials/media-items.htmlsrc/templates/partials/media-list.htmlsrc/templates/partials/media-review-clamped.htmlsrc/templates/partials/media-review-full.htmlsrc/templates/partials/score-readonly.html
🧰 Additional context used
📓 Path-based instructions (4)
**/*.html
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.html: Prefer HTMX for dynamic interactions rather than vanilla JavaScript
Use Tailwind CSS classes for styling before adding custom CSS
Use HTMX instead of traditional JavaScript AJAX calls
Files:
src/templates/partials/media-list.htmlsrc/templates/media.htmlsrc/templates/partials/media-review-clamped.htmlsrc/templates/partials/media-items.htmlsrc/templates/base.htmlsrc/templates/partials/media-review-full.htmlsrc/templates/partials/score-readonly.html
**/*.py
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.py: Use English docstrings in Python code
Follow PEP 8 style guidelines for Python code
Files:
src/core/migrations/0007_alter_media_score.pysrc/core/urls.pysrc/core/views.pysrc/core/models.py
**/views.py
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function-based views (FBV) by default, only use class-based views (CBV) when more appropriate
Files:
src/core/views.py
**/models.py
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Models must have an explicit
__str__method
Files:
src/core/models.py
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: PascalRepond/datakult PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-26T16:12:32.381Z
Learning: Respond in French
📚 Learning: 2025-12-26T15:18:46.932Z
Learnt from: PascalRepond
Repo: PascalRepond/datakult PR: 21
File: src/templates/accounts/profile_edit.html:23-58
Timestamp: 2025-12-26T15:18:46.932Z
Learning: In Django projects, attributes added to a form field's widget via field.widget.attrs.update(...) in the form's __init__ are rendered when using {{ form.field }} in templates. No explicit attribute definitions are needed in the template. This applies to templates under src/templates in Django apps; ensure you update attrs in __init__ for consistent HTMX behavior.
Applied to files:
src/templates/partials/media-list.htmlsrc/templates/media.htmlsrc/templates/partials/media-review-clamped.htmlsrc/templates/partials/media-items.htmlsrc/templates/base.htmlsrc/templates/partials/media-review-full.htmlsrc/templates/partials/score-readonly.html
🧬 Code graph analysis (6)
src/core/fixtures/sample_data.json (1)
src/core/migrations/0003_media_review_media_review_date_media_score_and_more.py (1)
Migration(9-41)
src/templates/partials/media-review-clamped.html (4)
src/core/migrations/0003_media_review_media_review_date_media_score_and_more.py (1)
Migration(9-41)src/core/forms.py (1)
MediaForm(7-30)src/core/migrations/0005_media_cover_alter_media_score.py (1)
Migration(6-23)src/core/migrations/0001_initial.py (1)
Migration(7-34)
src/templates/partials/media-items.html (1)
src/core/migrations/0003_media_review_media_review_date_media_score_and_more.py (1)
Migration(9-41)
src/core/migrations/0007_alter_media_score.py (3)
src/core/migrations/0003_media_review_media_review_date_media_score_and_more.py (1)
Migration(9-41)src/core/migrations/0005_media_cover_alter_media_score.py (1)
Migration(6-23)src/core/forms.py (1)
MediaForm(7-30)
src/core/urls.py (1)
src/core/views.py (2)
media_review_full_htmx(214-217)media_review_clamped_htmx(207-210)
src/core/views.py (2)
src/tests/conftest.py (1)
media(20-31)src/core/models.py (1)
Media(23-111)
🪛 Ruff (0.14.10)
src/core/migrations/0007_alter_media_score.py
8-10: Mutable class attributes should be annotated with typing.ClassVar
(RUF012)
12-18: Mutable class attributes should be annotated with typing.ClassVar
(RUF012)
🔇 Additional comments (11)
src/core/fixtures/sample_data.json (1)
388-388: LGTM!Le texte de revue étendu avec Lorem ipsum est approprié pour tester la fonctionnalité d'affichage des avis tronqués et complets.
src/static/js/base.js (1)
77-77: LGTM!La mise à jour des classes de bouton pour utiliser les composants DaisyUI (
btn btn-ghost btn-xs btn-circle) assure une cohérence avec les changements de template et améliore le style visuel.src/templates/media.html (1)
75-75: LGTM!La mise à jour cohérente des classes de boutons de suppression de badges avec les composants DaisyUI améliore le style visuel et s'aligne avec les modifications de
src/static/js/base.js.Also applies to: 83-83, 93-93, 103-103, 113-113
src/templates/base.html (1)
23-23: LGTM!Le format JSON pour
hx-headersavec le jeton CSRF est correct et supporte correctement les nouvelles vues HTMX pour les avis.src/core/migrations/0007_alter_media_score.py (1)
1-18: LGTM!La migration met à jour correctement les libellés de score en supprimant les préfixes emoji. Les avertissements de Ruff concernant
ClassVarsont des faux positifs pour les fichiers de migration Django.src/core/models.py (1)
86-96: LGTM!Les labels simplifiés pour les choix de score améliorent la lisibilité. Les clés entières (1-10) sont préservées, assurant la compatibilité avec les données existantes. La migration correspondante gère correctement ce changement.
src/core/views.py (1)
206-217: LGTM!Les deux nouvelles vues HTMX suivent les conventions établies du projet : décorateur
@login_required, utilisation deget_object_or_404, docstrings en anglais, et approche FBV conforme aux guidelines. L'implémentation est cohérente avec les autres vues HTMX existantes commeagent_select_htmx.src/templates/partials/media-list.html (2)
11-11: Vérifier la suppression detable-pin-rows.La classe
table-pin-rowsa été retirée, ce qui signifie que l'en-tête du tableau ne restera plus fixe lors du défilement. Si c'est intentionnel (par exemple pour éviter des conflits avec les nouvelles colonnes), c'est acceptable. Sinon, envisagez de la restaurer pour améliorer l'UX sur les longues listes.
21-22: LGTM!Les nouvelles colonnes "Review" et "Reviewed on" sont correctement ajoutées avec la traduction i18n, conformément aux objectifs du PR.
src/core/urls.py (1)
15-16: LGTM!Les nouvelles routes HTMX suivent la structure URL existante et sont cohérentes avec les patterns établis du projet. Les noms de vues correspondent aux fonctions dans
views.py.src/templates/partials/media-items.html (1)
6-41: LGTM!La refonte de la vue grille est bien structurée avec une mise en page responsive (
lg:card-side). L'utilisation de Tailwind CSS et des attributs HTMX pour les liens de contributeurs suit les conventions du projet. L'intégration des partialsscore-readonlyetmedia-review-clampedest correcte.
PascalRepond
force-pushed
the
rep-layout
branch
2 times, most recently
from
c65f03b to
41f3df0
Compare
- Updated the media list table to include "Review" and "Reviewed on" columns for better visibility of user feedback. - Adjusted grid layout to optimize display across different screen sizes. - Updated dependencies.
PascalRepond
force-pushed
the
rep-layout
branch
from
41f3df0 to
8ec87b0
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/templates/partials/media-items.html (1)
6-41: Bonne refonte du layout grid avec HTMX.La structure responsive
card lg:card-sideest bien implémentée. Les liens contributeurs avec attributs HTMX (hx-get,hx-target,hx-include,hx-push-url) suivent les bonnes pratiques.Suggestion mineure : Pour l'accessibilité, considérez ajouter
aria-labelsur les liens contributeurs pour clarifier l'action de filtrage.🔎 Amélioration optionnelle d'accessibilité
<a href="#" class="link link-secondary contributor-link" data-contributor-id="{{ contributor.id }}" data-contributor-name="{{ contributor.name }}" hx-get="{% url 'home' %}?contributor={{ contributor.id }}" hx-target="#media-list" hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to" - hx-push-url="true">{{ contributor.name }}</a> + hx-push-url="true" + aria-label="{% translate 'Filter by contributor' %}: {{ contributor.name }}">{{ contributor.name }}</a>
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
uv.lockis excluded by!**/*.lock
📒 Files selected for processing (13)
src/core/fixtures/sample_data.jsonsrc/core/migrations/0007_alter_media_score.pysrc/core/models.pysrc/core/urls.pysrc/core/views.pysrc/static/js/base.jssrc/templates/base.htmlsrc/templates/media.htmlsrc/templates/partials/media-items.htmlsrc/templates/partials/media-list.htmlsrc/templates/partials/media-review-clamped.htmlsrc/templates/partials/media-review-full.htmlsrc/templates/partials/score-readonly.html
🚧 Files skipped from review as they are similar to previous changes (10)
- src/templates/partials/media-review-clamped.html
- src/templates/media.html
- src/core/urls.py
- src/templates/partials/score-readonly.html
- src/core/fixtures/sample_data.json
- src/core/models.py
- src/templates/base.html
- src/static/js/base.js
- src/templates/partials/media-review-full.html
- src/templates/partials/media-list.html
🧰 Additional context used
📓 Path-based instructions (3)
**/*.py
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.py: Use English docstrings in Python code
Follow PEP 8 style guidelines for Python code
Files:
src/core/views.pysrc/core/migrations/0007_alter_media_score.py
**/views.py
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function-based views (FBV) by default, only use class-based views (CBV) when more appropriate
Files:
src/core/views.py
**/*.html
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.html: Prefer HTMX for dynamic interactions rather than vanilla JavaScript
Use Tailwind CSS classes for styling before adding custom CSS
Use HTMX instead of traditional JavaScript AJAX calls
Files:
src/templates/partials/media-items.html
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: PascalRepond/datakult PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-26T16:12:32.381Z
Learning: Respond in French
📚 Learning: 2025-12-26T15:18:46.932Z
Learnt from: PascalRepond
Repo: PascalRepond/datakult PR: 21
File: src/templates/accounts/profile_edit.html:23-58
Timestamp: 2025-12-26T15:18:46.932Z
Learning: In Django projects, attributes added to a form field's widget via field.widget.attrs.update(...) in the form's __init__ are rendered when using {{ form.field }} in templates. No explicit attribute definitions are needed in the template. This applies to templates under src/templates in Django apps; ensure you update attrs in __init__ for consistent HTMX behavior.
Applied to files:
src/templates/partials/media-items.html
🧬 Code graph analysis (1)
src/core/views.py (2)
src/tests/conftest.py (1)
media(20-31)src/core/models.py (1)
Media(23-111)
🪛 Ruff (0.14.10)
src/core/migrations/0007_alter_media_score.py
8-10: Mutable class attributes should be annotated with typing.ClassVar
(RUF012)
12-18: Mutable class attributes should be annotated with typing.ClassVar
(RUF012)
🔇 Additional comments (3)
src/core/views.py (1)
206-217: Bonnes implémentations HTMX.Les deux nouvelles vues suivent correctement les patterns établis dans le fichier :
- Utilisation de
@login_requiredpour la sécuritéget_object_or_404pour une gestion propre des erreurs 404- Docstrings en anglais conformément aux guidelines
- Vues basées sur des fonctions (FBV) comme recommandé
L'approche HTMX pour l'expansion/réduction des reviews est élégante et conforme aux guidelines du projet.
src/templates/partials/media-items.html (1)
79-83: Design combiné score + review confirmé.La combinaison du score et de la review dans une seule cellule (
max-w-md) semble être un choix de design intentionnel selon le summary ("removal of the Score column in favor of the inline score-readonly and review UI"). Cette approche offre une vue compacte cohérente entre les modes grid et table.src/core/migrations/0007_alter_media_score.py (1)
1-18: Migration correctly structured.The migration properly reflects the
Media.scorefield changes with the new choice labels. Static analysis warnings aboutClassVarare false positives for auto-generated Django migration files.
1 participant
