Add to top link at bottom of results

thegreenwebfoundation · Aug 22, 2023 · bad7a07 · bad7a07
1 parent bf64ae2
commit bad7a07
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/apps/theme/templates/greencheck/directory_index.html b/apps/theme/templates/greencheck/directory_index.html
@@ -6,7 +6,7 @@
 
 {% block content %}
     <div class="full-width bg-neutral-900 relative -top-6 md:-top-8">
-        <section class="container mx-auto text-white pt-12 pb-8 px-2 sm:px-4 lg:pb-12">
+        <section class="container mx-auto text-white pt-12 pb-8 px-2 sm:px-4 lg:pb-12" id="filters-top">
 
             <h2 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h2>
             <form method="get"

diff --git a/apps/theme/templates/greencheck/partials/_directory_results.html b/apps/theme/templates/greencheck/partials/_directory_results.html
@@ -23,7 +23,7 @@
 
 		<section class="country-list my-2 lg:my-4">
 
-			<h2 class="text-2xl my-4 border-b-2 border-black">{{ country.grouper }} ({{ country.list|length }})</h2>
+			<h2 class="sticky z-10 top-0 mb-4 pt-4 text-2xl bg-white border-b-2 border-black">{{ country.grouper }} ({{ country.list|length }})</h2>
 
 			{% for obj in country.list %}
 				<article class="provider-listing lg:w-3/4 my-6 lg:mr-0 lg:ml-auto py-6 last-of-type:pb-2 border-b-2 border-neutral-200 last:border-0">
@@ -113,4 +113,6 @@ <h4 class="inline-block mb-0 font-bold text-xl" id="{{ obj.id }}">
 
 			{% endfor %}
 		</section>
-{% endfor %}
+	{% endfor %}
+
+<p>End of results. <a href="#filters-top">To the top</a>.