Fix Bootstrap 5 visual regressions and modal behavior #46
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -50,5 +50,5 @@ $(function() { | |
| } | ||
| }); | ||
|
|
||
| $('[data-bs-toggle="tooltip"]').tooltip(); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -49,5 +49,5 @@ $(function() { | |
| $(this).parent().remove(); | ||
| }); | ||
|
|
||
| $('[data-bs-toggle="tooltip"]').tooltip() | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| {# Load the tag library #} | ||
| {% load django_bootstrap5 %} | ||
|
|
||
| {# Load CSS and JavaScript #} | ||
| {% bootstrap_css %} | ||
| {% bootstrap_javascript %} | ||
|
|
||
| {# Display django.contrib.messages as Bootstrap alerts #} | ||
| {% bootstrap_messages %} | ||
|
|
@@ -47,7 +47,7 @@ | |
| </div> | ||
| </div> | ||
|
|
||
| <div class="text-end"> | ||
| {% block menu %} | ||
| {% endblock %} | ||
| </div> | ||
|
|
@@ -80,8 +80,11 @@ <h1 class="text-center rt-page-title"> | |
| <!-- Bootstrap core JavaScript | ||
| ================================================== --> | ||
| <!-- Placed at the end of the document so the pages load faster --> | ||
| <script src="https://code.jquery.com/jquery-3.7.1.min.js" | ||
| integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" | ||
| crossorigin="anonymous"></script> | ||
| <script src="{% static 'rodatraden/rodatraden.js' %}"></script> | ||
| <script src="{% static 'js/bootstrap5.modal.forms.js' %}"></script> | ||
|
Comment on lines
+83
to
+87
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
# 1) Locate modal forms plugin assets that actually exist.
fd -i 'modal.forms.js'
# 2) Find script includes that reference modal form assets.
rg -n 'bootstrap5\.modal\.forms\.js|jquery\.bootstrap\.modal\.forms\.js' rodatraden/templates
# 3) Find all modalForm call sites that depend on the plugin.
rg -nP '\.modalForm\s*\(' rodatraden/templates rodatraden/staticRepository: it-amanuens/rodatraden Length of output: 1951 🏁 Script executed: # Check if the static/js directory exists and what files are in it
fd -type f -name '*.js' rodatraden/static/
# Also check the full path structure
tree rodatraden/static/ -L 3 2>/dev/null || find rodatraden/static -type f | head -20Repository: it-amanuens/rodatraden Length of output: 1100 🏁 Script executed: # Read the exact lines from base.html around line 87
sed -n '80,95p' rodatraden/templates/rodatraden/base.html
# Search for any bootstrap modal related files anywhere
find . -iname '*modal*' -o -iname '*bootstrap*' 2>/dev/null | grep -v '.git' | head -20Repository: it-amanuens/rodatraden Length of output: 1008 🏁 Script executed: # Search for requirements or package files that might list this dependency
find . -name 'requirements*.txt' -o -name 'package.json' -o -name 'setup.py' -o -name 'pyproject.toml' 2>/dev/null | head -10
# Check if there's any reference to where bootstrap modal forms should come from
rg 'bootstrap.*modal|modal.*form' rodatraden/templates rodatraden/static --type html --type js -i | head -20Repository: it-amanuens/rodatraden Length of output: 2211 🏁 Script executed: # Check package.json for bootstrap modal forms
cat package.json
# Check requirements.txt
cat requirements.txt | grep -i bootstrap || cat requirements.txtRepository: it-amanuens/rodatraden Length of output: 589 🌐 Web query:
💡 Result: The static file bootstrap5.modal.forms.js for django-bootstrap-modal-forms version 3.0.5 is located in the package's static directory, specifically at bootstrap_modal_forms/static/js/bootstrap5.modal.forms.js (or bootstrap_modal_forms/static/bootstrap5.modal.forms.js). In Django templates, include it using the static template tag as: <script src="{% static 'js/bootstrap5.modal.forms.js' %}"></script> This matches the official documentation and examples in the GitHub repository and PyPI page for version 3.0.5 (released 2024-09-28), which explicitly show this path for Bootstrap 5 support. A minified version bootstrap5.modal.forms.min.js is also available at the same location. Django's staticfiles app will serve it from your project's collected static directory after running collectstatic, following standard Django static file conventions (app/static/app/...). Citations:
Asset path is correct, but file is missing from static directory—add defensive guard to prevent runtime breakage. The path 🛠 Suggested defensive guard <script type="text/javascript">
$(function () {
+ if (typeof $.fn.modalForm !== 'function') {
+ console.warn('modalForm plugin is unavailable; skipping modal bindings.');
+ return;
+ }
+
/* Send the user report */
$(".send-report").each(function () {
$(this).modalForm({formURL: $(this).data('id')});
});Ensure static files are collected during deployment and development setup. 🤖 Prompt for AI Agents |
||
| <!-- Select 2 --> | ||
| <script src="{% static 'assets/js/select2.min.js' %}"></script> | ||
| <!-- Fancy icons --> | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -10,24 +10,24 @@ | |||||||||||||||||||||
| {% if logged_in %} | ||||||||||||||||||||||
| <a class="btn btn-gone" | ||||||||||||||||||||||
| href="{% url 'block-list' this_block.user %}" | ||||||||||||||||||||||
| data-bs-toggle="tooltip" title="Blockscheman"> | ||||||||||||||||||||||
| <span class="fa fa-list"></span> | ||||||||||||||||||||||
| </a> | ||||||||||||||||||||||
| <a class="btn btn-gone import-block" | ||||||||||||||||||||||
| href="{% url 'block-import-list' this_block.user this_block.slug %}" | ||||||||||||||||||||||
| data-id="{% url 'block-import-list' this_block.user this_block.slug %}" | ||||||||||||||||||||||
| data-bs-toggle="tooltip" title="Importera blockschema"> | ||||||||||||||||||||||
| <span class="fa fa-sign-in-alt"></span> | ||||||||||||||||||||||
| </a> | ||||||||||||||||||||||
| <a class="btn btn-gone update-block" | ||||||||||||||||||||||
| data-id="{% url 'block-update' this_block.user this_block.slug %}" | ||||||||||||||||||||||
| data-bs-toggle="tooltip" title="Ändra"> | ||||||||||||||||||||||
| <span class="fa fa-edit"></span> | ||||||||||||||||||||||
| </a> | ||||||||||||||||||||||
| <a class="btn btn-gone delete-block" | ||||||||||||||||||||||
| href="{% url 'block-delete' this_block.user this_block.slug %}" | ||||||||||||||||||||||
| data-id="{% url 'block-delete' this_block.user this_block.slug %}" | ||||||||||||||||||||||
| data-bs-toggle="tooltip" title="Radera"> | ||||||||||||||||||||||
| <span class="fa fa-trash"></span> | ||||||||||||||||||||||
| </a> | ||||||||||||||||||||||
| {% endif %} | ||||||||||||||||||||||
|
|
@@ -100,17 +100,15 @@ <h5>Ladda upp din ISP för att få den ifylld</h5> | |||||||||||||||||||||
| <form method="post" enctype="multipart/form-data"> | ||||||||||||||||||||||
| {% csrf_token %} | ||||||||||||||||||||||
| <div class="input-group mb-3"> | ||||||||||||||||||||||
| <input id="download" | ||||||||||||||||||||||
| class="btn btn-outline-secondary" | ||||||||||||||||||||||
| type="submit" | ||||||||||||||||||||||
| value="Ladda ner" | ||||||||||||||||||||||
| for="download"> | ||||||||||||||||||||||
| </input> | ||||||||||||||||||||||
|
Comment on lines
+103
to
+108
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: find . -path "*rodatraden/templates/rodatraden/block/block_detail.html" -type fRepository: it-amanuens/rodatraden Length of output: 124 🏁 Script executed: cat -n rodatraden/templates/rodatraden/block/block_detail.html | sed -n '95,115p'Repository: it-amanuens/rodatraden Length of output: 966 🌐 Web query:
💡 Result: In HTML (HTML5 / HTML Living Standard), is a void element, so it must not have an end (closing) tag; void elements “only have a start tag; end tags must not be specified for void elements.”[1] Therefore, markup like <input...> is invalid HTML, and the correct form is just the start tag, e.g. (or without the trailing slash: ).[1][2] Also note: HTML self-closing syntax with a trailing slash is not “real” self-closing in HTML. The spec says that if a single trailing “/” appears in a start tag, it has no effect on void elements (it’s unnecessary); it’s primarily relevant for foreign elements.[1] Citations:
🌐 Web query:
💡 Result: The for attribute of the HTML <label> element is valid only on <label> elements themselves. It is used to explicitly associate the label with a form control by referencing the control's id [1][2][3]. The <label> element (which bears the for attribute) is permitted in any context where phrasing content is expected [4][3][5]. Phrasing content includes locations inside paragraphs (<p>), headings (<h1>-<h6>), <div>, <span>, <li>, form elements like <form> and <fieldset>, and many others, but not block-level contexts that only accept flow content excluding phrasing (e.g., directly in <body> without wrapping, though browsers often parse permissively) [6][7]. The attribute's value must be the ID of a labelable form control (like <input>, <textarea>, <select>) in the same document [1][4][5]. Citations:
Remove invalid The Proposed fix- <input id="download"
- class="btn btn-outline-secondary"
- type="submit"
- value="Ladda ner"
- for="download">
- </input>
+ <input id="download"
+ class="btn btn-outline-secondary"
+ type="submit"
+ value="Ladda ner">📝 Committable suggestion
Suggested change
🧰 Tools🪛 HTMLHint (1.9.2)[error] 108-108: Tag must be paired, no start tag: [ ] (tag-pair) 🤖 Prompt for AI Agents |
||||||||||||||||||||||
| <div class="flex-grow-1"> | ||||||||||||||||||||||
| <input type="file" class="form-control" name="excel_file" id="inputExcelFile"> | ||||||||||||||||||||||
| <label class="form-text" for="inputExcelFile"> | ||||||||||||||||||||||
| Välj fil eller ladda ner | ||||||||||||||||||||||
| </label> | ||||||||||||||||||||||
| </div> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
Uh oh!
There was an error while loading. Please reload this page.