From steps 1-5 layout tweaks

thegreenwebfoundation · Jun 14, 2024 · cab054d · cab054d
1 parent f2a4bb4
commit cab054d
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 43 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/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">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 }}
 
@@ -201,8 +198,8 @@ <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>

diff --git a/apps/theme/static_src/src/css/custom/forms-custom.css b/apps/theme/static_src/src/css/custom/forms-custom.css
@@ -2,6 +2,7 @@
 /* 0.1 BASE SIZED TEXT FIELDS     */
 
 /* Styles for forms that are laid out as tables */
+/* 1. GENERAL gwf-form           */
 /* 1. GENERAL form_table         */
 /* 2. NETWORK FOOTPRINT TABLE    */
 /* 3. CONSENT TABLE              */
@@ -23,6 +24,9 @@
 .errorlist li {
 	@apply mb-4;
 }
+.errorlist li:last-of-type {
+	@apply mb-0;
+}
 
 .helptext {
 	@apply text-base;
@@ -42,10 +46,77 @@
 	@apply w-full;
 }
 
+/* **************************** */
+/* 1. GENERAL gwf-form          */
+.gwf-form {
+	@apply my-8;	
+}
+.gwf-form > div {
+	@apply flex;
+	@apply flex-col;
+	@apply items-start;
+	@apply py-8;
+	@apply border-b-0;
+}
+.gwf-form > div > * {
+	@apply w-full;
+}
+/* .form__table td {
+	@apply flex;
+	@apply flex-col;
+	@apply pl-0;
+} */
+.gwf-form label {
+	@apply block;
+	@apply text-left;
+}
+.gwf-form .helptext {
+	/* @apply order-first; */
+	@apply pb-6;
+}
+.gwf-form .nav-buttons {
+	@apply block;
+	@apply py-0;
+}
+.gwf-form .nav-buttons > * {
+	@apply w-auto;
+}
+.gwf-form ul {
+	@apply my-0;
+	@apply list-none;
+	@apply pl-0;
+}
+.gwf-form li {
+	@apply pl-0;
+}
+.gwf-form fieldset {
+	@apply flex;
+	@apply flex-col;
+	@apply items-start;
+}
+.gwf-form fieldset .errorlist {
+	@apply -order-2;
+}
+
+/* table[class^="form__table--"] tbody {
+	@apply flex;
+	@apply gap-8;
+}
+table[class^="form__table--"] tbody > * {
+	@apply py-0;
+	@apply w-1/5;
+}
+/* Typically within the th element */
+/*table[class^="form__table--"] label {
+	@apply text-sm;
+	@apply uppercase;
+	@apply font-normal;
+} */
 
 /* **************************** */
 /* 1. GENERAL form_table        */
-.form__table {
+
+/* .form__table {
 	@apply my-8;
 }
 .form__table tr {
@@ -57,31 +128,31 @@
 }
 .form__table tr > * {
 	@apply w-full;
-}
+} */
 
-.form__table td {
+/* .form__table td {
 	@apply flex;
 	@apply flex-col;
 	@apply pl-0;
 }
 .form__table label {
 	@apply block;
 	@apply text-left;
-}
-.form__table span.helptext {
+} */
+/* .form__table span.helptext {
 	@apply order-first;
 	@apply pb-6;
-}
-.form__table ul {
+} */
+/* .form__table ul {
 	@apply my-0;
 	@apply list-none;
 	@apply pl-0;
-}
-.form__table .errorlist {
+} */
+/* .form__table .errorlist {
 	@apply order-2;
-}
+} */
 
-table[class^="form__table--"] tbody {
+/* table[class^="form__table--"] tbody {
 	@apply flex;
 	@apply gap-8;
 }
@@ -90,23 +161,34 @@ table[class^="form__table--"] tbody > * {
 	@apply w-1/5;
 }
 /* Typically within the th element */
-table[class^="form__table--"] label {
+/*table[class^="form__table--"] label {
 	@apply text-sm;
 	@apply uppercase;
 	@apply font-normal;
-}
+} */
 
 
 /* 2. NETWORK FOOTPRINT TABLE   */
 .form__table--network tbody {
+	@apply flex;
 	@apply flex-wrap;
-	@apply 2xl:flex-nowrap;
+	@apply gap-x-8;
+	@apply xl:flex-nowrap;
 }
 .form__table--network tbody > tr {
 	@apply w-auto;
+	@apply border-0;
+}
+.form__table--network tbody th {
+	@apply w-16;
+}
+.form__table--network tbody td {
+	@apply w-52;
 }
 .form__table--network label {
-	@apply mb-1;
+	@apply mb-0;
+	@apply pb-0;
+	@apply text-med;
 }
 
 /* 3. CONSENT TABLE               */

diff --git a/apps/theme/static_src/src/css/custom/forms.css b/apps/theme/static_src/src/css/custom/forms.css
@@ -1,6 +1,13 @@
-label {
+label,
+legend {
 	@apply text-4xl;
 	@apply text-black;
+	@apply leading-normal;
+	@apply pb-4;
+}
+fieldset label {
+	@apply text-base;
+	@apply uppercase;
 }
 
 [type="text"],
@@ -38,9 +45,3 @@ textarea {
 [type="radio"]:checked {
 	@apply bg-black;
 }
-
-/* Form layouts specific to Django HTML output */
-form li label {
-	@apply text-base;
-	@apply uppercase;
-}