Hs directory mvp styling (#503)

* Style header / search form with added more info details box

* Add info circly styling

* Style provider listing evidence and website url

* Output a count of countries and providers

* Style header / search form with added more info details box

* Add info circly styling

* Style provider listing evidence and website url

* Output a count of countries and providers

* Begin styling footer

* Finish footr and CTA changes

* Amend link text in footer

* Fix template check tests

* Add in green sunburst icon with white bg

* Correct english if there is only one country or one hosting provider

* Improve header text and directory help text

* Little text tweaks and fixes

* Add improve this listing message and prompt

* Improve "Update this listing" text

* Reintroduce underscores for partial file names

* Revise update this listing text

* Revise CTA heading wording

* Add links into footer options

* Improve link text for services in header

apps/greencheck/tests/test_directory.py

@@ -79,4 +79,4 @@ def test_fallback_when_no_filter_view_has_no_results(client, hosting_provider_fa
     # and: we should see the "no results" template in our list of templates
     # in use
     templates = [tpl.name for tpl in res.templates]
-    assert "greencheck/partials/_no_directory_results.html" in templates
+    assert "greencheck/partials/_directory_no_results.html" in templates

apps/greencheck/views.py

@@ -8,6 +8,7 @@
 from django.http import HttpResponseRedirect
 from django.urls import reverse
 from django.utils import timezone
+from django.utils.safestring import mark_safe
 from django.utils.decorators import method_decorator
 from django.views.decorators.cache import cache_page
 from django.views.generic.base import TemplateView
@@ -221,7 +222,7 @@ class ProviderFilter(django_filters.FilterSet):
 
     services = django_filters.ModelChoiceFilter(
         field_name="services",
-        label="Services offered",
+        label="Web hosting service",
         queryset=ac_models.Service.objects.all(),
     )
     # note: this is commented out for Han,

apps/theme/static_src/src/css/components.css

@@ -12,6 +12,7 @@
 		@apply no-underline;
 		@apply border-2;
 		@apply uppercase;
+		@apply text-center;
 	}
 	.btn:hover {
 		@apply bg-green-200;
@@ -73,21 +74,80 @@
 	.service-label {
 		@apply bg-green-100;
 		@apply rounded-3xl;
-		@apply mb-4;
+		@apply mb-2;
 		@apply mr-6;
 		@apply last:mr-0;
 		@apply px-4;
-		@apply py-2;
+		@apply py-1.5;
 		@apply text-sm;
+		@apply leading-normal;
 	}
 	.service-label:before {
 		@apply inline-block;
+		@apply relative;
+		@apply top-[2px];
 		@apply rounded-xl;
 		content: '';
 		@apply bg-green;
 		@apply w-4;
 		@apply h-4;
-		@apply mt-1;
 		@apply mr-2;
 	}
+	.utility-icon {
+		@apply relative;
+		@apply -top-0.5; 
+		@apply inline-block;
+		@apply leading-none;
+		@apply text-center;
+		@apply h-5;
+		@apply w-5;
+	}
+	.info-circle {
+		@apply border-2;
+		@apply border-solid;
+		@apply border-neutral-300;
+		@apply text-neutral-300;
+		@apply rounded-3xl;
+	}
+	.external-link-icon {
+		@apply m-0;
+		@apply inline-block;
+	}
+	.evidence-description p {
+		@apply my-1.5;
+	}
+	h3[class^="heading-icon"] {
+		@apply relative;
+		@apply pl-20;
+		@apply md:pl-16;
+		@apply lg:pl-20;
+		@apply leading-snug;
+	}
+	h3[class^="heading-icon"]::before {
+		content: '';
+		@apply absolute;
+		@apply left-0;
+		top: calc( 50% - 3px );
+		transform: translate(0, -50%);
+		@apply w-16;
+		@apply h-16;
+		@apply md:w-14;
+		@apply md:h-14;
+		@apply lg:w-16;
+		@apply lg:h-16;
+		@apply bg-no-repeat;
+		@apply bg-contain;
+	}
+	.heading-icon__sunburst--green::before {
+		@apply bg-sunburst-green;
+	}
+	.heading-icon__sunburst--yellow::before {
+		@apply bg-sunburst-yellow;
+	}
+	.heading-icon__plant--orange::before {
+		@apply bg-plant-orange;
+	}
+	.heading-icon__lightning--purple::before {
+		@apply bg-lightning-purple;
+	}
 }

apps/theme/static_src/src/css/custom/forms-custom.css

@@ -181,9 +181,26 @@ table[class^="form__table--"] label {
 	@apply text-base;
 }
 .form__directory select {
-	@apply text-neutral-400;
-	@apply text-3xl;
+	@apply text-white;
+	@apply sm:text-2xl;
 	@apply bg-neutral-900;
 	@apply border-green;
 	@apply h-16;
+
+	background-image:
+		linear-gradient(45deg, transparent 50%, white 50%),
+    	linear-gradient(135deg, white 50%, transparent 50%);
+	background-position:
+		calc(100% - 24px) calc(1em + 6px),
+		calc(100% - 16px) calc(1em + 6px);
+	background-size:
+		8px 8px,
+		8px 8px;
+	background-repeat: no-repeat;
+}
+.form__directory select:focus {
+	/* @apply border-neutral-400; */
+}
+.form__directory p {
+	@apply lg:col-span-2;
 }

apps/theme/static_src/tailwind.config.js

@@ -78,6 +78,19 @@ module.exports = {
 					900: '#671D7F',
 					DEFAULT: '#CB2CFF',
 				},
+				'blue': {
+					50: '#EEF5FF',
+					100: '#E0ECFF',
+					200: '#C7DDFE',
+					300: '#A5C8FC',
+					400: '#0066FF',
+					500: '#0066FF',
+					600: '#4686E5',
+					700: '#3872CA',
+					800: '#305EA3',
+					900: '#2E4F81',
+					DEFAULT: '#0066FF',
+				},
             },			
 			fontFamily: {
 				sans: ['TWKEverett', 'sans-serif'],
@@ -114,6 +127,15 @@ module.exports = {
 					},
 				},
 			}),
+			backgroundImage: {
+				'gradient-135': 'linear-gradient(135deg, var(--tw-gradient-stops))',
+				'external-link': "url('../../img/icon-external-link.svg')",
+				'sunburst-green': "url('../../img/GWF-icon-sunburst--green.svg')",
+				'sunburst-yellow': "url('../../img/GWF-icon-sunburst--yellow.svg')",
+				'plant-orange': "url('../../img/GWF-icon-plant--orange.svg')",
+				'lightning-purple': "url('../../img/GWF-icon-lightning--purple.svg')",
+
+			},
         },
     },
     plugins: [

apps/theme/templates/base_directory.html

@@ -48,20 +48,16 @@ <h1 class="text-5xl">Django + Tailwind = ❤️</h1>
 			</div>
 		</div>
 
-
-		{% block footer-open %}
-		<footer class="bg-green mt-12 py-12 border-t-2">
-		{% endblock  %}
-
 		{% block footer-content %}
-			<div class="container mx-auto px-2 sm:px-4 md:p-0 prose">
-				<div class="p-6 bg-white border-2 rounded-xl">
-					<h3 class="text-xl uppercase">Need help?</h3>
-					<p>Our friendly support team are on hand to clarify anything you're not sure about.</p>
-					<p class="mt-10 mb-6"><a href="https://www.thegreenwebfoundation.org/support-form/" class="btn btn-white" target="_blank" rel="noopener noreferrer">Contact our support team</a></p>
+			<footer class="bg-green mt-12 py-12 border-t-2">
+				<div class="container mx-auto px-2 sm:px-4 md:p-0 prose">
+					<div class="p-6 bg-white border-2 rounded-xl">
+						<h3 class="text-xl uppercase">Need help?</h3>
+						<p>Our friendly support team are on hand to clarify anything you're not sure about.</p>
+						<p class="mt-10 mb-6"><a href="https://www.thegreenwebfoundation.org/support-form/" class="btn btn-white" target="_blank" rel="noopener noreferrer">Contact our support team</a></p>
+					</div>
 				</div>
-			</div>
-		</footer>
+			</footer>
 		{% endblock  %}
 
 

apps/theme/templates/greencheck/directory_index.html

@@ -3,23 +3,62 @@
 {% load static %}
 {% load widget_tweaks %}
 {% load tailwind_filters %}
+
 {% block content %}
     <div class="full-width bg-neutral-900 relative -top-6 md:-top-8">
-        <section class="container mx-auto text-white px-2 sm:px-4 p-12">
-            <p class="uppercase text-green">Green Web Directory</p>
-            <h1 class="text-disp-sm mt-12 pb-4">I am looking for</h1>
+        <section class="container mx-auto text-white pt-12 pb-8 px-2 sm:px-4 lg:pb-12">
+
+            <h2 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h2>
             <form method="get"
-                class="form__directory mt-4 grid grid-cols-1 md:grid-cols-3 grid-rows-3 md:grid-rows-1 gap-8">
+                class="form__directory mt-4 grid grid-cols-1 lg:grid-cols-4 grid-rows-3 lg:grid-rows-1 gap-6">
                 {{ filter.form.as_p }}
-                <input type="submit" class="btn p-4 mt-4 mb-4" value="Find" />
+                <input type="submit" class="btn p-4 mt-4 mb-4 lg:col-span-4 lg:justify-self-end lg:w-1/4" value="Find" />
             </form>
+
+			<details class="prose mt-6 md:mt-8 lg:mt-0">
+				<summary class="uppercase text-green">More about this directory 
+					<span class="utility-icon info-circle">&#x2139;</span>
+				</summary>
+				<p class="text-white mt-2">
+					The Green Web Directory is a searchable list which enables people to 
+					quickly find verified green hosting companies. These are organisations that offer 
+					hosting services and can demonstrate they are taking steps to avoid, reduce or offset 
+					the greenhouse gas emissions caused by using electricity to provide their 
+					services. To become verified they share evidence with us, Green Web Foundation, 
+					to show they're doing this on a yearly basis, or better. Verification is free. 
+				</p>
+
+				<ul class="pl-0">
+					<li class="inline-block border-r-2 border-neutral-500 mr-1 pl-0 pr-1.5">
+						<a class="text-white m-0" href="https://www.thegreenwebfoundation.org/directory/services-offered/" target="_blank" rel="noopener noreferrer">
+						Services you can search by</a>
+					</li>
+					<li class="inline-block border-r-2 border-neutral-500 m-0 mr-1 pl-0 pr-1.5">
+						<a class="text-white m-0" href="https://www.thegreenwebfoundation.org/green-web-dataset/get-verified/" target="_blank" rel="noopener noreferrer">
+						How to get verified</a>
+					</li>
+					<li class="inline-block m-0 pl-0">
+						<a class="text-white m-0" href="https://www.thegreenwebfoundation.org/support-form/" target="_blank" rel="noopener noreferrer">
+						Get help</a>
+					</li>
+				</p>
+			</details>
+
         </section>
     </div>
-    <section class="main-content container mx-auto">
+
+    <section class="main-content container mx-auto md:mb-8 mt-4 lg:mt-6">
         {% if not ordered_results %}
-            {% include "greencheck/partials/_no_directory_results.html" %}
+            {% include "greencheck/partials/_directory_no_results.html" %}
         {% else %}
             {% include "greencheck/partials/_directory_results.html" %}
         {% endif %}
-    </section>
+	</section> 
+
+	{% include "greencheck/partials/_directory_ctas.html" %}
+
 {% endblock %}
+
+{% block footer-content %}
+	{% include "greencheck/partials/_directory_footer.html" %}
+{% endblock  %}