From cab054debad717d33459c84cf2b7c6c9728f4bf5 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 14 Jun 2024 11:52:23 +0000 Subject: [PATCH 1/2] From steps 1-5 layout tweaks --- .../provider_registration/base_form.html | 8 +- .../network_footprint.html | 31 +++-- .../src/css/custom/forms-custom.css | 112 +++++++++++++++--- .../theme/static_src/src/css/custom/forms.css | 15 +-- 4 files changed, 123 insertions(+), 43 deletions(-) diff --git a/apps/accounts/templates/provider_registration/base_form.html b/apps/accounts/templates/provider_registration/base_form.html index 840e53df..d6ba4617 100644 --- 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 %} -
+ {% else %} - + {% endif %} {% csrf_token %} - +
{{ wizard.management_form }} {% if wizard.form.forms %} {{ wizard.form.management_form }} @@ -35,7 +35,7 @@ {% if wizard.steps.prev %} -
+
diff --git a/apps/accounts/templates/provider_registration/network_footprint.html b/apps/accounts/templates/provider_registration/network_footprint.html index 41e003b6..32835c13 100644 --- a/apps/accounts/templates/provider_registration/network_footprint.html +++ b/apps/accounts/templates/provider_registration/network_footprint.html @@ -65,9 +65,9 @@

Network footprint

{% if form.is_multipart %} - + {% else %} - + {% endif %} {% csrf_token %} @@ -86,28 +86,25 @@

Network footprint

{% if wizard.form.non_field_errors %} -
-
-
-
- {{ wizard.form.non_field_errors }} -
-
+
+
+ {{ wizard.form.non_field_errors }}
{% endif %} -
+

Identify this provider by IP range

You can submit one or more IP ranges which will be used to identify any websites running on this provider.

-

Notes:

-
    -
  • IPv4 and IPv6 formats are supported
    • -
  • To add a single IP address, put the same address in both the START and END fields
    • -
+ +

Notes:

+
    +
  • IPv4 and IPv6 formats are supported
    • +
  • To add a single IP address, put the same address in both the START and END fields
    • +
{{ wizard.form.ips.management_form }} @@ -201,8 +198,8 @@

Identify this provider by ASN

-
- +
+ {% if wizard.steps.prev %}
diff --git a/apps/theme/static_src/src/css/custom/forms-custom.css b/apps/theme/static_src/src/css/custom/forms-custom.css index e8fe4316..4de0c52c 100644 --- 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,9 +128,9 @@ } .form__table tr > * { @apply w-full; -} +} */ -.form__table td { +/* .form__table td { @apply flex; @apply flex-col; @apply pl-0; @@ -67,21 +138,21 @@ .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 index 88009d13..086e1b02 100644 --- 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; -} From dc3e6abfaf000a9aec688eee3a758a9125252b1a Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 14 Jun 2024 14:02:11 +0000 Subject: [PATCH 2/2] Complete form layout tweaks for steps 6-8 --- .../provider_registration/consent.html | 8 +- .../provider_registration/evidence.html | 2 +- .../provider_registration/locations.html | 10 +- .../network_footprint.html | 10 +- .../partials/_location_form.html | 4 +- .../src/css/custom/forms-custom.css | 232 +++++++----------- 6 files changed, 98 insertions(+), 168 deletions(-) diff --git a/apps/accounts/templates/provider_registration/consent.html b/apps/accounts/templates/provider_registration/consent.html index 402cc5a9..32e203b8 100644 --- a/apps/accounts/templates/provider_registration/consent.html +++ b/apps/accounts/templates/provider_registration/consent.html @@ -15,14 +15,14 @@

One last thing...

{% endblock %} {% if form.is_multipart %} - + {% else %} - + {% endif %} {% csrf_token %} -
+
{{ wizard.management_form }} {% if wizard.form.forms %} @@ -38,7 +38,7 @@

One last thing...

{% if wizard.steps.prev %} -
+
diff --git a/apps/accounts/templates/provider_registration/evidence.html b/apps/accounts/templates/provider_registration/evidence.html index b561b4c4..edc98e7a 100644 --- a/apps/accounts/templates/provider_registration/evidence.html +++ b/apps/accounts/templates/provider_registration/evidence.html @@ -140,7 +140,7 @@

Submit your evidence

{% if wizard.steps.prev %} -
+
diff --git a/apps/accounts/templates/provider_registration/locations.html b/apps/accounts/templates/provider_registration/locations.html index 539b0407..9fc1d32b 100644 --- a/apps/accounts/templates/provider_registration/locations.html +++ b/apps/accounts/templates/provider_registration/locations.html @@ -58,11 +58,9 @@

Where is your organisation active?

{% endcomment %} {% if wizard.form.non_field_errors %}
-
-
-
- {{ wizard.form.non_field_errors}} -
+
+
+ {{ wizard.form.non_field_errors}}
@@ -101,7 +99,7 @@

Where is your organisation active?

{% if wizard.steps.prev %} -
+
diff --git a/apps/accounts/templates/provider_registration/network_footprint.html b/apps/accounts/templates/provider_registration/network_footprint.html index 32835c13..565f90d2 100644 --- a/apps/accounts/templates/provider_registration/network_footprint.html +++ b/apps/accounts/templates/provider_registration/network_footprint.html @@ -100,7 +100,7 @@

Network footprint

Identify this provider by IP range

You can submit one or more IP ranges which will be used to identify any websites running on this provider.

-

Notes:

+

Notes:

  • IPv4 and IPv6 formats are supported
  • To add a single IP address, put the same address in both the START and END fields
    • @@ -119,7 +119,7 @@

    Identify this provider by IP range

    {% endfor %}
-
+
@@ -152,7 +152,7 @@

Identify this provider by ASN

{% endfor %}
-
+
@@ -180,8 +180,6 @@

Identify this provider by ASN

{{ wizard.form.extra.missing_network_explanation.as_widget }} - -
diff --git a/apps/theme/static_src/src/css/custom/forms-custom.css b/apps/theme/static_src/src/css/custom/forms-custom.css index 4de0c52c..cd7154a7 100644 --- a/apps/theme/static_src/src/css/custom/forms-custom.css +++ b/apps/theme/static_src/src/css/custom/forms-custom.css @@ -1,19 +1,24 @@ /* 0. GENERAL CUSTOM FORM STYLES */ -/* 0.1 BASE SIZED TEXT FIELDS */ +/* 0.1 ERROR LIST */ +/* 0.2 HELPTEXT */ +/* 0.3 BASE SIZED TEXT FIELDS */ + +/* General form layout */ +/* 1. DEFAULT gwf-form */ +/* 11. EVIDENCE FORM */ +/* 12. CONSENT TABLE */ +/* 13. DIRECTORY FORMS */ /* Styles for forms that are laid out as tables */ -/* 1. GENERAL gwf-form */ -/* 1. GENERAL form_table */ /* 2. NETWORK FOOTPRINT TABLE */ -/* 3. CONSENT TABLE */ -/* Other kinds of form layout. */ -/* 21. EVIDENCE FORM */ -/* 22. DIRECTORY FORMS */ +/* **************************** */ /* 0. GENERAL CUSTOM FORM STYLES */ + +/* 0.1 ERROR LIST */ .errorlist { @apply text-purple; } @@ -21,18 +26,25 @@ .errorlist + select { @apply border-purple; } +ul.errorlist { + @apply mb-4; + @apply list-none; + @apply pl-0; +} .errorlist li { @apply mb-4; + @apply pl-0; } .errorlist li:last-of-type { @apply mb-0; } +/* 0.2 HELPTEXT */ .helptext { @apply text-base; } -/* 0.1 BASE SIZED TEXT FIELDS */ +/* 0.3 BASE SIZED TEXT FIELDS */ .form__basetext-fields .form__row { @apply my-6; } @@ -40,16 +52,16 @@ @apply text-base; @apply font-bold; } - .form__basetext-fields input[type="text"], .form__basetext-fields input[type="password"] { @apply w-full; } /* **************************** */ -/* 1. GENERAL gwf-form */ + +/* 1. DEFAULT gwf-form */ .gwf-form { - @apply my-8; + @apply mt-8; } .gwf-form > div { @apply flex; @@ -61,17 +73,11 @@ .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 { @@ -81,138 +87,8 @@ .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 { - @apply my-8; -} -.form__table tr { - @apply flex; - @apply flex-col; - @apply items-start; - @apply py-8; - @apply border-b-0; -} -.form__table tr > * { - @apply w-full; -} */ - -/* .form__table td { - @apply flex; - @apply flex-col; - @apply pl-0; -} -.form__table label { - @apply block; - @apply text-left; -} */ -/* .form__table span.helptext { - @apply order-first; - @apply pb-6; -} */ -/* .form__table ul { - @apply my-0; - @apply list-none; - @apply pl-0; -} */ -/* .form__table .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; -} */ - - -/* 2. NETWORK FOOTPRINT TABLE */ -.form__table--network tbody { - @apply flex; - @apply flex-wrap; - @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-0; - @apply pb-0; - @apply text-med; -} - -/* 3. CONSENT TABLE */ -.form__table--consent tr { - @apply relative; -} -.form__table--consent tr th { - @apply ml-16; -} -.form__table--consent tr td input { - @apply absolute; - @apply top-10; - width: 2rem; - height: 2rem; - @apply border-2; -} -.form__table--consent .helptext { - @apply ml-16; -} - - -/* **************************** */ - -/* 21. EVIDENCE FORM */ +/* 11. EVIDENCE FORM */ .form__evidence .convenient-form { @apply md:flex; @apply flex-wrap; @@ -254,9 +130,34 @@ table[class^="form__table--"] tbody > * { @apply order-first; @apply mb-0; } +.form__evidence--field-id, +.form__evidence--field-DELETE { + @apply mb-0; + @apply !pt-0; +} +/* 12. CONSENT TABLE */ +.form__consent > div { + @apply relative; +} +.form__consent label { + @apply w-auto; + @apply ml-16; + @apply text-xl; + @apply lg:text-2xl; +} +.form__consent > div input { + @apply absolute; + @apply top-10; + width: 2rem; + height: 2rem; + @apply border-2; +} +.form__consent .helptext { + @apply ml-16; +} -/* 22. DIRECTORY FORMS */ +/* 13. DIRECTORY FORMS */ .form__directory label { @apply block; @apply text-white; @@ -286,3 +187,36 @@ table[class^="form__table--"] tbody > * { .form__directory p { @apply lg:col-span-2; } + + +/* **************************** */ + +/* 2. NETWORK FOOTPRINT TABLE */ +.form__table--network tbody { + @apply flex; + @apply flex-wrap; + @apply gap-x-8; +} +.form__table--network tbody > tr { + @apply w-auto; + @apply border-0; +} +/* Targetting the errors list, which won't have a th before the td */ +.form__table--network tbody > tr >td:first-child { + @apply w-full; + @apply p-0; +} +.form__table--network tbody .errorlist { + @apply my-0; +} +.form__table--network tbody th { + @apply w-16; +} +.form__table--network tbody td { + @apply w-52; +} +.form__table--network label { + @apply mb-0; + @apply pb-0; + @apply text-med; +} \ No newline at end of file