full width form fields 'everywhere'

also distinguish between labeled/placeholder style

projects/templates/projects/project_edit.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load tailwind_forms %}
 
 {% block title %}Edit {{ project.name }} · {{ site_title }}{% endblock %}
 
@@ -14,59 +15,16 @@
         {% csrf_token %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">{{ project.name }}</h1>
+            <h1 class="text-4xl my-4 font-bold">Settings ({{ project.name }})</h1>
         </div>
 
-        {% if form.name %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.name.label }}</div>
-            <div class="flex items-center">
-                {{ form.name }}
-
-            </div>
-            {% if form.name.errors %}
-            {% for error in form.name.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.name.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.name.help_text|safe }}</div>
-            {% endif %}
+        <div class="mt-4 mb-4">
+            Project settings for "{{ project.name }}".
         </div>
-        {% endif %}
 
-        {% if form.visibility %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.visibility.label }}</div>
-            <div class="flex items-center">
-                {{ form.visibility }}
-
-            </div>
-            {% if form.visibility.errors %}
-            {% for error in form.visibility.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.visibility.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.visibility.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
-
-        {% if form.dsn %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.dsn.label }}</div>
-            <div class="flex items-center">
-                {{ form.dsn }}
-
-            </div>
-            {% if form.dsn.errors %}
-            {% for error in form.dsn.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.dsn.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.dsn.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
+        {% tailwind_formfield form.name %}
+        {% tailwind_formfield form.visibility %}
+        {% tailwind_formfield form.dsn %}
 
         <button name="action" value="invite" class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Save</button>
         <a href="{% url "project_list" %}" class="text-cyan-500 font-bold ml-2">Cancel</a>

projects/templates/projects/project_member_settings.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load tailwind_forms %}
 
 {% block title %}Member settings · {{ project.name }}  · {{ site_title }}{% endblock %}
 
@@ -22,7 +23,7 @@
         {% endif %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">Membership settings</h1>
+            <h1 class="text-4xl my-4 font-bold">Membership settings</h1>
         </div>
 
         <div class="mt-4 mb-4">
@@ -33,39 +34,8 @@
             {% endif %}
         </div>
 
-        {% if form.role %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.role.label }}</div>
-            <div class="flex items-center">
-                {{ form.role }}
-
-            </div>
-            {% if form.role.errors %}
-            {% for error in form.role.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.role.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.role.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
-
-        {% if form.send_email_alerts %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.send_email_alerts.label }}</div>
-            <div class="flex items-center">
-                {{ form.send_email_alerts }}
-
-            </div>
-            {% if form.send_email_alerts.errors %}
-            {% for error in form.send_email_alerts.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.send_email_alerts.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.send_email_alerts.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
+        {% tailwind_formfield form.role %}
+        {% tailwind_formfield form.send_email_alerts %}
 
         <button class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Save</button>
         {% if this_is_you %}

projects/templates/projects/project_members_accept.html

@@ -14,7 +14,7 @@
         {% csrf_token %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">Invitation to "{{ project.name }}"</h1>
+            <h1 class="text-4xl my-4 font-bold">Invitation to "{{ project.name }}"</h1>
         </div>
 
         <div class="mt-4 mb-4">

projects/templates/projects/project_members_invite.html

@@ -22,14 +22,14 @@
         {% endif %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">Invite members ({{ project.name }})</h1>
+            <h1 class="text-4xl my-4 font-bold">Invite members ({{ project.name }})</h1>
         </div>
 
         <div class="mt-4 mb-4">
             Invite a member to join the project "{{ project.name }}". They will receive an email with a link to join.
         </div>
 
-        {% tailwind_formfield form.email %}
+        {% tailwind_formfield_implicit form.email %}
 
         <div class="text-lg ml-1 mb-8">  {# ml-1 is strictly speaking not aligned, but visually it looks better "to me"; perhaps because of all of the round elements? #}
             <div class="text-slate-800 font-bold">{{ form.role.label }}</div>

projects/templates/projects/project_new.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load tailwind_forms %}
 
 {% block title %}New project  · {{ site_title }}{% endblock %}
 
@@ -13,59 +14,12 @@
         {% csrf_token %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">New Project</h1>
+            <h1 class="text-4xl my-4 font-bold">New Project</h1>
         </div>
 
-        {% if form.team %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.team.label }}</div>
-            <div class="flex items-center">
-                {{ form.team }}
-
-            </div>
-            {% if form.team.errors %}
-            {% for error in form.team.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.team.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.team.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
-
-        {% if form.name %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.name.label }}</div>
-            <div class="flex items-center">
-                {{ form.name }}
-
-            </div>
-            {% if form.name.errors %}
-            {% for error in form.name.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.name.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.name.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
-
-        {% if form.visibility %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.visibility.label }}</div>
-            <div class="flex items-center">
-                {{ form.visibility }}
-
-            </div>
-            {% if form.visibility.errors %}
-            {% for error in form.visibility.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.visibility.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.visibility.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
+        {% tailwind_formfield form.team %}
+        {% tailwind_formfield form.name %}
+        {% tailwind_formfield form.visibility %}
 
         <button name="action" value="invite" class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Save</button>
         <a href="{% url "project_list" %}" class="text-cyan-500 font-bold ml-2">Cancel</a>

teams/templates/teams/team_edit.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load tailwind_forms %}
 
 {% block title %}Edit {{ team.name }} · {{ site_title }}{% endblock %}
 
@@ -13,42 +14,15 @@
         {% csrf_token %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">{{ team.name }}</h1>
+            <h1 class="text-4xl my-4 font-bold">Settings ({{ team.name }})</h1>
         </div>
 
-        {% if form.name %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.name.label }}</div>
-            <div class="flex items-center">
-                {{ form.name }}
-
-            </div>
-            {% if form.name.errors %}
-            {% for error in form.name.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.name.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.name.help_text|safe }}</div>
-            {% endif %}
+        <div class="mt-4 mb-4">
+            Team settings for "{{ team.name }}".
         </div>
-        {% endif %}
 
-        {% if form.visibility %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.visibility.label }}</div>
-            <div class="flex items-center">
-                {{ form.visibility }}
-
-            </div>
-            {% if form.visibility.errors %}
-            {% for error in form.visibility.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.visibility.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.visibility.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
+        {% tailwind_formfield form.name %}
+        {% tailwind_formfield form.visibility %}
 
         <button name="action" value="invite" class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Save</button>
         <a href="{% url "team_list" %}" class="text-cyan-500 font-bold ml-2">Cancel</a>

teams/templates/teams/team_member_settings.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load tailwind_forms %}
 
 {% block title %}Member settings · {{ team.name }}  · {{ site_title }}{% endblock %}
 
@@ -22,7 +23,7 @@
         {% endif %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">Membership settings</h1>
+            <h1 class="text-4xl my-4 font-bold">Membership settings</h1>
         </div>
 
         <div class="mt-4 mb-4">
@@ -33,39 +34,8 @@
             {% endif %}
         </div>
 
-        {% if form.role %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.role.label }}</div>
-            <div class="flex items-center">
-                {{ form.role }}
-
-            </div>
-            {% if form.role.errors %}
-            {% for error in form.role.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.role.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.role.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
-
-        {% if form.send_email_alerts %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.send_email_alerts.label }}</div>
-            <div class="flex items-center">
-                {{ form.send_email_alerts }}
-
-            </div>
-            {% if form.send_email_alerts.errors %}
-            {% for error in form.send_email_alerts.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.send_email_alerts.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.send_email_alerts.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
+        {% tailwind_formfield form.role %}
+        {% tailwind_formfield form.send_email_alerts %}
 
         <button class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Save</button>
         {% if this_is_you %}

teams/templates/teams/team_members_invite.html

@@ -31,7 +31,7 @@
             Invite a member to join the team "{{ team.name }}". They will receive an email with a link to join.
         </div>
 
-        {% tailwind_formfield form.email %}
+        {% tailwind_formfield_implicit form.email %}
 
         <div class="text-lg ml-1 mb-8">  {# ml-1 is strictly speaking not aligned, but visually it looks better "to me"; perhaps because of all of the round elements? #}
             <div class="text-slate-800 font-bold">{{ form.role.label }}</div>

teams/templates/teams/team_new.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load tailwind_forms %}
 
 {% block title %}New team  · {{ site_title }}{% endblock %}
 
@@ -13,42 +14,11 @@
         {% csrf_token %}
 
         <div>
-            <h1 class="text-4xl mt-4 font-bold">New Team</h1>
+            <h1 class="text-4xl my-4 font-bold">New Team</h1>
         </div>
 
-        {% if form.name %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.name.label }}</div>
-            <div class="flex items-center">
-                {{ form.name }}
-
-            </div>
-            {% if form.name.errors %}
-            {% for error in form.name.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.name.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.name.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
-
-        {% if form.visibility %}
-        <div class="text-lg mb-8">
-            <div class="text-slate-800 font-bold">{{ form.visibility.label }}</div>
-            <div class="flex items-center">
-                {{ form.visibility }}
-
-            </div>
-            {% if form.visibility.errors %}
-            {% for error in form.visibility.errors %}
-                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
-            {% endfor %}
-            {% elif form.visibility.help_text %}
-                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.visibility.help_text|safe }}</div>
-            {% endif %}
-        </div>
-        {% endif %}
+        {% tailwind_formfield form.name %}
+        {% tailwind_formfield form.visibility %}
 
         <button name="action" value="invite" class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Save</button>
         <a href="{% url "team_list" %}" class="text-cyan-500 font-bold ml-2">Cancel</a>

templates/signup.html

@@ -17,9 +17,9 @@
             <form method="post" action=".">
                 {% csrf_token %}
 
-                {% tailwind_formfield form.user %}
-                {% tailwind_formfield form.password1 %}
-                {% tailwind_formfield form.password2 %}
+                {% tailwind_formfield_implicit form.user %}
+                {% tailwind_formfield_implicit form.password1 %}
+                {% tailwind_formfield_implicit form.password2 %}
 
                 <button class="bg-slate-800 font-medium p-2 md:p-4 text-white uppercase w-full">Sign up</button>
 

theme/templates/tailwind_forms/formfield.html

@@ -1,6 +1,12 @@
 {% if formfield %}
 <div class="text-lg mb-6 md:mb-8">
-    <input name="{{ formfield.name }}" type="{{ formfield.field.widget.input_type }}" class="{% if formfield.errors %}bg-red-100{% else %}bg-slate-100{% endif %} pl-4 py-2 md:py-4 focus:outline-none w-full" {% if formfield.value %}value="{{ formfield.value }}"{% endif %} placeholder="{{ formfield.label }}" />
+
+    {% if not implicit %}
+        <div class="text-slate-800 font-bold">{{ formfield.label }}:</div>
+    {% endif %}
+
+    {{ formfield }}
+
     {% if formfield.errors %}
     {% for error in formfield.errors %}
         <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>

theme/templatetags/tailwind_forms.py

@@ -5,5 +5,28 @@ register = template.Library()
 
 
 @register.inclusion_tag('tailwind_forms/formfield.html')
-def tailwind_formfield(formfield):
-    return {'formfield': formfield}
+def tailwind_formfield(formfield, implicit=False):
+    # we just monkey-patch the class attr. if (i.e. as long as) it works, it ain't stupid
+    if not formfield:
+        return {"formfield": None}
+
+    if formfield.errors:
+        formfield.field.widget.attrs['class'] = "bg-red-50"
+    else:
+        formfield.field.widget.attrs['class'] = "bg-slate-50"
+    formfield.field.widget.attrs['class'] += " pl-4 py-2 md:py-4 focus:outline-none w-full"
+
+    if implicit:
+        formfield.field.widget.attrs['placeholder'] = formfield.label
+
+    return {
+        'formfield': formfield,
+        'implicit': implicit,
+    }
+
+
+@register.inclusion_tag('tailwind_forms/formfield.html')
+def tailwind_formfield_implicit(formfield):
+    # implicit meaning: the label is rendered as a placeholder. This only works for text inputs and fire-once (i.e. the
+    # first time the form is rendered)
+    return tailwind_formfield(formfield, True)

users/templates/users/request_reset_password.html

@@ -17,7 +17,7 @@
             <form method="post" action=".">
                 {% csrf_token %}
 
-                {% tailwind_formfield form.email %}
+                {% tailwind_formfield_implicit form.email %}
 
                 <button class="bg-slate-800 font-medium p-2 md:p-4 text-white uppercase w-full">Reset password</button>
             </form>

users/templates/users/resend_confirmation.html

@@ -17,7 +17,7 @@
             <form method="post" action=".">
                 {% csrf_token %}
 
-                {% tailwind_formfield form.email %}
+                {% tailwind_formfield_implicit form.email %}
 
                 <button class="bg-slate-800 font-medium p-2 md:p-4 text-white uppercase w-full">Resend verification email</button>
             </form>

users/templates/users/reset_password.html

@@ -17,8 +17,8 @@
             <form method="post" action=".">
                 {% csrf_token %}
 
-                {% tailwind_formfield form.new_password1 %}
-                {% tailwind_formfield form.new_password2 %}
+                {% tailwind_formfield_implicit form.new_password1 %}
+                {% tailwind_formfield_implicit form.new_password2 %}
 
                 <input type="hidden" name="next" value="{{ next }}" />