Nav bar and form styling updates. (#294)

djangonaut-space · Feb 19, 2024 · d0e7d21 · d0e7d21
1 parent 5fa8db3
commit d0e7d21
Show file tree

Hide file tree

Showing 16 changed files with 123 additions and 76 deletions.
diff --git a/home/templates/forms/sign_up.html b/home/templates/forms/sign_up.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 
 
@@ -12,9 +12,8 @@
     {% if form %}
         <form action="{% url 'signup' %}" method="POST">
             {% csrf_token %}
-            {% bootstrap_form form %}
-            <input type="submit">
-            {% bootstrap_form_errors form layout='inline' %}
+            {{ form }}
+            <input type="submit" class="block rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-300 cursor-pointer">
         </form>
     {% else %}
         <div>You can fill in the from only one time.</div>

diff --git a/indymeet/settings/base.py b/indymeet/settings/base.py
@@ -16,6 +16,8 @@
 
 from dotenv import load_dotenv
 
+from django.forms.renderers import TemplatesSetting
+
 load_dotenv()
 
 PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -57,12 +59,13 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "django.forms",
     # azure storage
     "storages",
     # other
     "tailwind",
     "theme",
-    "bootstrap3",
+    "widget_tweaks",
 ]
 
 MIDDLEWARE = [
@@ -243,3 +246,10 @@
         "django.request": {"handlers": [], "level": "ERROR"},
     },
 }
+
+
+class FormRenderer(TemplatesSetting):
+    form_template_name = "forms/form.html"
+
+
+FORM_RENDERER = "indymeet.settings.base.FormRenderer"
diff --git a/indymeet/templates/forms/form.html b/indymeet/templates/forms/form.html
@@ -0,0 +1,20 @@
+{% load widget_tweaks %}
+<div class="grid grid-cols-1 gap-6 mb-2">
+  {% if form.non_field_errors %}
+  <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
+    <ul>{{ form.non_field_errors.as_ul }}</ul>
+  </div>
+  {% endif %}
+  {% for field in form %}
+  <label class="block">
+    <span>{{ field.label }}</span>
+    <!-- Checkbox -->
+    {% if field|field_type == 'booleanfield' %} {{ field|add_class:"rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50" }}
+    {% else %}
+    {{ field|add_class:"mt-1 block rounded-lg border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"|attr:"placeholder:" }}
+    {% endif %}
+    {% if field.help_text %}<div class="text-gray-500"{% if field.auto_id %} id="{{ field.auto_id }}_helptext"{% endif %}>{{ field.help_text|safe }}</div>{% endif %}
+    {% if field.errors %}<ul class="text-red-700">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
+  </label>
+  {% endfor %}
+</div>
diff --git a/indymeet/templates/includes/nav.html b/indymeet/templates/includes/nav.html
@@ -9,49 +9,64 @@
         <nav aria-label="Global" class="hidden md:block">
             <ul class="flex items-center gap-6">
                 <li>
-                    <a class="outline-link text-gray-700 transition hover:text-ds-purple" target="_blank" href="https://github.com/djangonaut-space/program/blob/main/README.md">
+                    <a class="outline-link text-gray-700 transition hover:text-ds-purple cursor-pointer" target="_blank" href="https://github.com/djangonaut-space/program/blob/main/README.md">
                         {% trans "Program Documentation" %}
                     </a>
                 </li>
                 <li>
-                    <a class="outline-link text-gray-700 transition hover:text-ds-purple" href="{% url 'signup' %}">
-                        {% trans "Join us!" %}
-                    </a>
-                </li>
-                <li>
-                    <a class="outline-link text-gray-700 transition hover:text-ds-purple"  href="{% url 'event_list' %}">
+                    <a class="outline-link text-gray-700 transition hover:text-ds-purple cursor-pointer"  href="{% url 'event_list' %}">
                         {% trans "Events" %}
                     </a>
                 </li>
                 <li>
-                    <a class="outline-link text-gray-700 transition hover:text-ds-purple"  href="{% url 'session_list' %}">
+                    <a class="outline-link text-gray-700 transition hover:text-ds-purple cursor-pointer"  href="{% url 'session_list' %}">
                         {% trans "Sessions" %}
                     </a>
                 </li>
                 <li>
-                    <a class="outline-link text-gray-700 transition hover:text-ds-purple"  href="{% slugurl "comms" %}">
+                    <a class="outline-link text-gray-700 transition hover:text-ds-purple cursor-pointer"  href="{% slugurl "comms" %}">
                         {% trans "Blog" %}
                     </a>
                 </li>
             </ul>
         </nav>
 
+        {% if not user.is_authenticated %}
         <div class="flex items-center gap-4">
-        {% comment %} <div class="sm:flex sm:gap-4">
-            <a
-              class="block rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-500"
-              href="#"
-            >
-              Login
-            </a>
-
-            <a
-              class="hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-ds-purple transition hover:text-black sm:block"
-              href="#"
-            >
-              Register
-            </a>
-          </div> {% endcomment %}
+            <div class="sm:flex sm:gap-4">
+                {% if "login" not in request.path %}
+                <a class="hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-ds-purple transition hover:bg-gray-300 sm:block cursor-pointer" href="{% url "login" %}">
+                  {% trans "Login" %}
+                </a>
+                {% endif %}
+                {% if "signup" not in request.path %}
+                <a class="block rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-300 hover:text-ds-purple cursor-pointer" href="{% url "signup" %}">
+                  {% trans "Sign Up" %}
+                </a>
+                {% endif %}
+          </div>
+          {% else %}
+           <div class="relative hidden md:block" x-data="{ showDropdown: false }">
+              <button type="button" class="block bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" @click="showDropdown = !showDropdown">
+                <span class="sr-only">Open user menu</span>
+                <img class="w-8 h-8 rounded-full" src={%  if user.profile.bio_image %}"{{ user.profile.bio_image }}"{% else %}"{% static 'img/favicon.png' %}"{% endif %} alt="Profile photo">
+              </button>
+              <div x-cloak x-show="showDropdown">
+                <ul class="py-2 absolute right-0 py-2 mt-2 bg-gray-100 rounded-md shadow-xl w-44" aria-labelledby="user-menu-button">
+                  <li class="p-2">
+                    <a href="{% url 'profile' %}" class="block outline-link text-gray-500 transition hover:text-ds-purple">
+                        {% trans "Profile" %}
+                    </a>
+                  </li>
+                  <li class="p-2">
+                    <a href="{% url 'logout' %}" class="block outline-link text-gray-500 transition hover:text-ds-purple">
+                        {% trans "Logout" %}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+           </div>
+           {% endif %}
             <div class="relative block md:hidden" x-data="{ showDropdown: false }">
                 <button
                     class="block rounded bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden" @click="showDropdown = !showDropdown"
@@ -76,12 +91,6 @@
                             </a>
                         </li>
 
-                        <li class="p-2">
-                            <a class="block outline-link text-gray-500 transition hover:text-ds-purple" target="_blank"  href="https://forms.gle/4vNuqQwEK6o48WqHA">
-                                {% trans "Join us!" %}
-                            </a>
-                        </li>
-
                         <li class="p-2">
                             <a class="block outline-link text-gray-500 transition hover:text-ds-purple"  href="{% url 'event_list' %}">
                                 {% trans "Events" %}
@@ -98,6 +107,24 @@
                                 {% trans "Blog" %}
                             </a>
                         </li>
+                        {% if user.is_authenticated %}
+                        <li class="p-2">
+                            <a class="block outline-link text-gray-500 transition hover:text-ds-purple"  href="{% url 'profile' %}">
+                                {% trans "Profile" %}
+                            </a>
+                        </li>
+                        <li class="p-2">
+                            <a class="block outline-link text-gray-500 transition hover:text-ds-purple"  href="{% url 'logout' %}">
+                                {% trans "Logout" %}
+                            </a>
+                        </li>
+                        {%  else %}
+                        <li class="p-2">
+                            <a class="block outline-link text-gray-500 transition hover:text-ds-purple"  href="{% url 'login' %}">
+                                {% trans "Login" %}
+                            </a>
+                        </li>
+                        {% endif %}
                     </ul>
                 </div>
             </div>

diff --git a/indymeet/templates/includes/no_field_errors.html b/indymeet/templates/includes/no_field_errors.html
diff --git a/indymeet/templates/registration/logged_out.html b/indymeet/templates/registration/logged_out.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 {% block title %}{% translate "Logged out | Djangonaut Space" %}{% endblock %}
 {% block meta_title %}{% translate "Logged out | Djangonaut Space" %}{% endblock %}

diff --git a/indymeet/templates/registration/login.html b/indymeet/templates/registration/login.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 {% block title %}{% translate "Login | Djangonaut Space" %}{% endblock %}
 {% block meta_title %}{% translate "Login | Djangonaut Space" %}{% endblock %}
@@ -23,21 +23,20 @@
                 </div>
             </div>
         {% endif %}
-        {% include 'includes/no_field_errors.html' %}
 
         <div class="row">
           <div class="col">
             <form method="post">
               {% csrf_token %}
 
-              {% bootstrap_form form layout="horizontal" %}
-              <button type="submit" class="bg-purple-500 hover:bg-purple-400 no-underline text-white font-bold py-2 px-4 rounded">Login</button>
+              {{ form }}
+              <button type="submit">Login</button>
               <input type="hidden" name="next" value="{{ next }}">
             </form>
           </div>
           <div class="row pt-4 pb-4">
             <div class="col">
-                <p>{% translate "Forgotten your password?" %}<a class="link" href="{% url 'password_reset' %}">{% translate "Reset password." %}</a></p>
+                <p>{% translate "Forgotten your password?" %} <a href="{% url 'password_reset' %}" class="text-ds-purple hover:underline">{% translate "Reset password." %}</a></p>
             </div>
           </div>
           <div class="col"></div>

diff --git a/indymeet/templates/registration/password_reset_confirm.html b/indymeet/templates/registration/password_reset_confirm.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 {% block title %}{% translate "Password reset confirmation | Djangonaut Space" %}{% endblock %}
 {% block meta_title %}{% translate "Password reset confirmation | Djangonaut Space" %}{% endblock %}
@@ -14,15 +14,14 @@
     <div class="section-container">
         <h1 class="text-5xl">{% translate "Reset password" %}</h1>
         {% if validlink %}
-        {% include 'includes/no_field_errors.html' %}
 
         <div class="row pt-4 pb-4">
           <div class="col">
             <form method="post">
               {% csrf_token %}
 
-              {% bootstrap_form form layout="horizontal" %}
-              <button type="submit" class="bg-purple-500 hover:bg-purple-400 no-underline text-white font-bold py-2 px-4 rounded mt-2">{% translate "Change password" %}</button>
+              {{ form }}
+              <button type="submit">{% translate "Change password" %}</button>
 
             </form>
           </div>

diff --git a/indymeet/templates/registration/password_reset_form.html b/indymeet/templates/registration/password_reset_form.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 {% block title %}{% translate "Password reset | Djangonaut Space" %}{% endblock %}
 {% block meta_title %}{% translate "Password reset | Djangonaut Space" %}{% endblock %}
@@ -18,14 +18,13 @@ <h1 class="text-5xl">{% translate "Reset password" %}</h1>
             <p>{% translate "Forgotten your password? Enter your email address below, and we’ll email instructions for setting a new one." %}</p>
           </div>
         </div>
-        {% include 'includes/no_field_errors.html' %}
 
         <div class="row">
           <div class="col">
             <form method="post">
               {% csrf_token %}
-              {% bootstrap_form form layout="horizontal" %}
-              <button type="submit" class="bg-purple-500 hover:bg-purple-400 no-underline text-white font-bold py-2 px-4 rounded mt-2">{% translate "Rest password" %}</button>
+              {{ form }}
+              <button type="submit">{% translate "Rest password" %}</button>
             </form>
           </div>
           <div class="col"></div>

diff --git a/indymeet/templates/registration/profile.html b/indymeet/templates/registration/profile.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 {% block title %}{% translate "Profile | Djangonaut Space" %}{% endblock %}
 {% block meta_title %}{% translate "Profile | Djangonaut Space" %}{% endblock %}

diff --git a/indymeet/templates/registration/signup.html b/indymeet/templates/registration/signup.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n wagtailcore_tags bootstrap3 static %}
+{% load i18n wagtailcore_tags static %}
 
 {% block title %}{% translate "Registration | Djangonaut Space" %}{% endblock %}
 {% block meta_title %}{% translate "Registration | Djangonaut Space" %}{% endblock %}
@@ -18,15 +18,14 @@ <h1 class="text-5xl">{% translate "Registration" %}</h1>
             <p>{% translate "Sign up to keep up with all things Djangonaut Space!" %}</p>
           </div>
         </div>
-        {% include 'includes/no_field_errors.html' %}
 
         <div class="row">
           <div class="col">
             <form method="post">
               {% csrf_token %}
 
-              {% bootstrap_form form layout="horizontal" %}
-              <button type="submit" class="bg-purple-500 hover:bg-purple-400 no-underline text-white font-bold py-2 px-4 rounded">{% translate "Submit" %}</button>
+              {{ form }}
+              <button type="submit">{% translate "Submit" %}</button>
 
             </form>
           </div>

diff --git a/requirements/requirements-dev.txt b/requirements/requirements-dev.txt
@@ -1,5 +1,5 @@
 #
-# This file is autogenerated by pip-compile with Python 3.9
+# This file is autogenerated by pip-compile with Python 3.12
 # by the following command:
 #
 #    pip-compile --output-file=requirements/requirements-dev.txt --strip-extras requirements/requirements-dev.in
@@ -105,9 +105,7 @@ django-anymail==9.0
     #   -r requirements/requirements-test.txt
     #   -r requirements/requirements.txt
 django-bootstrap3==23.6
-    # via
-    #   -r requirements/requirements-test.txt
-    #   -r requirements/requirements.txt
+    # via -r requirements/requirements-test.txt
 django-browser-reload==1.12.1
     # via django-tailwind
 django-colorful==1.3
@@ -173,6 +171,10 @@ django-treebeard==4.7
     #   -r requirements/requirements-test.txt
     #   -r requirements/requirements.txt
     #   wagtail
+django-widget-tweaks==1.5.0
+    # via
+    #   -r requirements/requirements-test.txt
+    #   -r requirements/requirements.txt
 djangorestframework==3.14.0
     # via
     #   -r requirements/requirements-test.txt

diff --git a/requirements/requirements-test.txt b/requirements/requirements-test.txt
@@ -57,7 +57,6 @@ django==4.1.13
     # via
     #   -r requirements/requirements.txt
     #   django-anymail
-    #   django-bootstrap3
     #   django-colorful
     #   django-debug-toolbar
     #   django-el-pagination
@@ -75,8 +74,6 @@ django==4.1.13
     #   wagtail
 django-anymail==9.0
     # via -r requirements/requirements.txt
-django-bootstrap3==23.6
-    # via -r requirements/requirements.txt
 django-colorful==1.3
     # via
     #   -r requirements/requirements.txt
@@ -120,6 +117,8 @@ django-treebeard==4.7
     # via
     #   -r requirements/requirements.txt
     #   wagtail
+django-widget-tweaks==1.5.0
+    # via -r requirements/requirements.txt
 djangorestframework==3.14.0
     # via
     #   -r requirements/requirements.txt

diff --git a/requirements/requirements.in b/requirements/requirements.in
@@ -14,6 +14,6 @@ django-extensions
 django-debug-toolbar
 typing-extensions
 django-tailwind
-django-bootstrap3
 sentry-sdk[django]
 supervisor
+django-widget-tweaks