make it responsive. Only load select2 once to avoid flickering

digitalfox · Oct 17, 2024 · 20102d0 · 20102d0
1 parent b352555
commit 20102d0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/leads/forms.py b/leads/forms.py
@@ -102,7 +102,8 @@ class LeadTagForm(forms.Form):
     def __init__(self, *args, **kwargs):
         lead = kwargs.pop("lead", None)
         super(LeadTagForm, self).__init__(*args, **kwargs)
-        self.fields["tag"] = forms.ModelMultipleChoiceField(widget=LeadTagChoices(lead=lead), queryset=Tag.objects, label=False)
+        self.fields["tag"] = forms.ModelMultipleChoiceField(widget=LeadTagChoices(lead=lead, attrs={"data-placeholder": _("New tags"), "style": "min-width: 200px;"}),
+                                                            queryset=Tag.objects, label=False)
 
 
 class LeadForm(PydiciCrispyModelForm):

diff --git a/templates/leads/_tags_banner.html b/templates/leads/_tags_banner.html
@@ -4,26 +4,28 @@
 {% load l10n %}
 
 <div class="tag_banner alert" hx-target="this" hx-swap="outerHTML" hx-on::after-settle="$('.django-select2').djangoSelect2({ 'theme': 'bootstrap-5', 'width': 'auto'});">
-    <div class="d-flex flex-row">
-        <div id="newtags" class="d-flex flex-row align-self-center">
-            {% for tag in lead.tags.all %}
-            <div id="tag_{{ tag.id|unlocalize }}" class="mx-1">
-                <a href="{% url 'leads:tag' tag.id %}">{{ tag }}</a>
-                <a href='#' hx-delete="{% url 'leads:remove_tag' lead.id|unlocalize tag.id|unlocalize %}" >
-                   <i class="bi bi-x-circle"></i></a>&nbsp;
+    <div class="row">
+        <div class="col-lg-auto col-md-12 align-self-center">
+            <div class="d-flex flex-wrap">
+                {% for tag in lead.tags.all %}
+                <div class="mx-1">
+                    <a href="{% url 'leads:tag' tag.id %}">{{ tag }}</a>
+                    <a href='#' hx-delete="{% url 'leads:remove_tag' lead.id|unlocalize tag.id|unlocalize %}" >
+                       <i class="bi bi-x-circle"></i></a>&nbsp;
+                </div>
+                {% endfor %}
             </div>
-            {% endfor %}
         </div>
-        {% if perms.leads.change_lead %}
-                <div class="ms-3" >
-                    <form id="tag_form">
-                        <div class="row">
-                        <div class="col">{{ lead_tag_form }}</div>
-                        <div class="col"><button type="submit" class="btn btn-primary" hx-post="{% url 'leads:add_tag' lead.id|unlocalize %}">{% trans "Add" %}</button></div>
-                        </div>
-                    </form>
-                </div>
 
+        {% if perms.leads.change_lead %}
+        <div class="col-lg-auto col-md-12">
+        <form id="tag_form">
+            <div class="d-flex">
+                <div class="col">{{ lead_tag_form }}</div>
+                <div class="col"><button type="submit" class="btn btn-primary" hx-post="{% url 'leads:add_tag' lead.id|unlocalize %}">{% trans "Add" %}</button></div>
+            </div>
+        </form>
+        </div>
         {% endif %}
     </div>
     {% if perms.leads.change_lead %}
@@ -34,4 +36,3 @@
     {% endif %}
 </div>
 
-{% include "core/_select2.html" %}
diff --git a/templates/leads/lead_detail.html b/templates/leads/lead_detail.html
@@ -10,6 +10,7 @@
     {% include "core/_billboard.html" %}
     {% include "core/_pivotable_header.html" %}
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+    <script type="text/javascript" src="/static/django_select2/django_select2.js"></script>
 {% endblock %}