Merge pull request #599 from thegreenwebfoundation/hs-form-layout-fixes

WIP: Form layout fixes
thegreenwebfoundation · Jun 14, 2024 · 10e720f · 10e720f
2 parents eadd01c + dc3e6ab
commit 10e720f
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 124 deletions.
diff --git a/apps/accounts/templates/provider_registration/base_form.html b/apps/accounts/templates/provider_registration/base_form.html
@@ -15,12 +15,12 @@
 {% endblock %}
 
 {% if form.is_multipart %}
-    <form enctype="multipart/form-data" method="post" action="" class="form__table">
+    <form enctype="multipart/form-data" method="post" action="" class="gwf-form">
 {% else %}
-    <form method="post" action="" class="form__table">
+    <form method="post" action="" class="gwf-form">
 {% endif %}
 {% csrf_token %}
-<table>
+<table class="my-0">
 {{ wizard.management_form }}
 {% if wizard.form.forms %}
     {{ wizard.form.management_form }}
@@ -35,7 +35,7 @@
 <input class="btn" type="submit" value="{% trans "next" %}"/>
 
 {% if wizard.steps.prev %}
-<div class="">
+<div class="nav-buttons">
 	<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
 	<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
 </div>

diff --git a/apps/accounts/templates/provider_registration/consent.html b/apps/accounts/templates/provider_registration/consent.html
@@ -15,14 +15,14 @@ <h1>One last thing...</h1>
 	{% endblock %}
 
 	{% if form.is_multipart %}
-		<form enctype="multipart/form-data" method="post" action="" class="form__table form__table--consent">
+		<form enctype="multipart/form-data" method="post" action="" class="gwf-form form__consent">
 	{% else %}
-		<form method="post" action="" class="form__table form__table--consent max-w-4xl">
+		<form method="post" action="" class="gwf-form form__consent max-w-4xl">
 	{% endif %}
 
 		{% csrf_token %}
 
-		<table class="">
+		<table class="m-0">
 			{{ wizard.management_form }}
 
 			{% if wizard.form.forms %}
@@ -38,7 +38,7 @@ <h1>One last thing...</h1>
 		<input class="btn" type="submit" value="{% trans " next" %}" />
 
 		{% if wizard.steps.prev %}
-			<div class="">
+			<div class="nav-buttons">
 				<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
 				<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
 			</div>

diff --git a/apps/accounts/templates/provider_registration/evidence.html b/apps/accounts/templates/provider_registration/evidence.html
@@ -140,7 +140,7 @@ <h1>Submit your evidence</h1>
 		</div>
 
         {% if wizard.steps.prev %}
-		<div>
+		<div class="nav-buttons">
        		<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
         	<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
 		</div>

diff --git a/apps/accounts/templates/provider_registration/locations.html b/apps/accounts/templates/provider_registration/locations.html
@@ -58,11 +58,9 @@ <h1>Where is your organisation active?</h1>
 		{% endcomment %}
 		{% if wizard.form.non_field_errors %}
 			<div class="prose my-10 mx-auto">
-				<div class="convenient-form bg-neutral-50 rounded-xl px-4 ">
-					<div class="form__basetext-fields form--location lg:flex lg:flex-wrap">
-						<div class="w-full">
-							{{ wizard.form.non_field_errors}}
-						</div>
+				<div class="convenient-form bg-neutral-50 rounded-xl border border-purple px-4">
+					<div class="w-full">
+						{{ wizard.form.non_field_errors}}
 					</div>
 				</div>
 			</div>
@@ -101,7 +99,7 @@ <h1>Where is your organisation active?</h1>
 			<input class="btn mt-8" type="submit" value="{% trans 'next' %}" />
 
 			{% if wizard.steps.prev %}
-			<div>
+			<div class="nav-buttons">
 				<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
 				<button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
 			</div>

diff --git a/apps/accounts/templates/provider_registration/network_footprint.html b/apps/accounts/templates/provider_registration/network_footprint.html
@@ -65,9 +65,9 @@ <h1>Network footprint</h1>
   </div>
 
   {% if form.is_multipart %}
-    <form enctype="multipart/form-data" method="post" action="" class="form__table">
+    <form enctype="multipart/form-data" method="post" action="" class="gwf-form">
   {% else %}
-    <form method="post" action="" class="form__table">
+    <form method="post" action="" class="gwf-form">
   {% endif %}
 
   {% csrf_token %}
@@ -86,28 +86,25 @@ <h1>Network footprint</h1>
 
 
   {% if wizard.form.non_field_errors %}
-    <div class="prose my-10 mx-auto">
-      <div class="convenient-form bg-neutral-50 rounded-xl px-4 ">
-        <div class="form__basetext-fields form--location lg:flex lg:flex-wrap">
-          <div class="w-full">
-            {{ wizard.form.non_field_errors }}
-          </div>
-        </div>
+    <div class="prose !py-0 mx-auto">
+      <div class="convenient-form bg-neutral-50 rounded-xl p-4">
+        {{ wizard.form.non_field_errors }}
       </div>
     </div>
   {% endif %}
 
-  <div class="lg:grid grid-cols-2 gap-16 my-10">
+  <div class="lg:!grid grid-cols-2 gap-16 lg:!items-stretch">
 
     <section class="prose mx-auto bg-white border-2 rounded-xl mb-6 lg:mb-0 p-6">
 
       <h3 class="text-3xl mt-0">Identify this provider by IP range</h3>
       <p>You can submit one or more IP ranges which will be used to identify any websites running on this provider.</p>
-		<p class="font-bold">Notes:</p>
-		<ul class="!pl-4">
-			<li class="list-disc">IPv4 and IPv6 formats are supported</li>
-			<li class="list-disc">To add a single IP address, put the same address in both the START and END fields</li>
-		</ul>
+
+      <p class="font-bold mb-0">Notes:</p>
+      <ul class="!pl-4">
+        <li class="list-disc">IPv4 and IPv6 formats are supported</li>
+        <li class="list-disc">To add a single IP address, put the same address in both the START and END fields</li>
+      </ul>
 
       {{ wizard.form.ips.management_form }}
 
@@ -122,7 +119,7 @@ <h3 class="text-3xl mt-0">Identify this provider by IP range</h3>
         {% endfor %}
       </div>
 
-      <div class="my-12">
+      <div class="mt-12">
         <input class="btn btn-white"  type="button" id="add-form-button-ips" value="Add an IP range">
       </div>
 
@@ -155,7 +152,7 @@ <h3 class="text-3xl mt-0">Identify this provider by ASN</h3>
           {% endfor %}
         </div>
 
-        <div class="my-12">
+        <div class="mt-12">
           <input class="btn btn-white" type="button" id="add-form-button-asns" value="Add an AS number">
         </div>
 
@@ -183,8 +180,6 @@ <h3 class="text-3xl mt-0">Identify this provider by ASN</h3>
 
         {{ wizard.form.extra.missing_network_explanation.as_widget }}
 
-
-
         <div class="mt-8">
 
           <label class="text-med" for="{{ wizard.form.extra.network_import_required.id_for_label }}">
@@ -201,11 +196,11 @@ <h3 class="text-3xl mt-0">Identify this provider by ASN</h3>
 
     </div>
 
-    <div class="prose mx-auto">
-      <input class="btn" type="submit" value="{% trans "next" %}" />
+    <div class="prose mx-auto !p-0">
+      <input class="btn !w-auto" type="submit" value="{% trans "next" %}" />
 
       {% if wizard.steps.prev %}
-        <div>
+        <div class="nav-buttons">
           <button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
           <button class="btn btn-sm btn-black" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
         </div>

diff --git a/apps/accounts/templates/provider_registration/partials/_location_form.html b/apps/accounts/templates/provider_registration/partials/_location_form.html
@@ -21,8 +21,8 @@
 			</div>
 		{% endfor %}
 
-		<p class="lg:w-full mt-8">
+		<div class="lg:w-full">
 			<input class="text-sm hover:text-base" type="button" id="delete-form-button" value="&#x274C; Delete this location">
-		</p>
+		</div>
 	</div>
 </div>