Merge pull request #540 from thegreenwebfoundation/hs-directory-to-to…

…p-button

Hs directory to top button

apps/theme/templates/base_directory.html

@@ -70,5 +70,46 @@ <h3 class="text-xl uppercase">Need help?</h3>
 
 		<script async defer src="https://scripts.withcabin.com/hello.js"></script>
 
+		<script>
+			// Get distance of main-content box from top.
+			const mainContent = document.getElementById('main-content'),
+				mainContentTopPos = mainContent.getBoundingClientRect().top + window.scrollY;		
+
+			// Set a variable for our button element.
+			const scrollToTopButton = document.getElementById('scroll-to-top');
+
+			var timer;
+
+			const scrollFunc = () => {
+
+				if( timer ) {
+					window.clearTimeout( timer );
+				}
+
+				timer = window.setTimeout( function() {
+
+					// Get the current scroll value
+					let y = window.scrollY;
+
+					// If the main-content box is at the top of the screen, show button.
+					if ( y > mainContentTopPos ) {
+						console.log( "remove" );
+						scrollToTopButton.classList.remove( "invisible" );
+					} else {
+						console.log( "add" );
+						scrollToTopButton.classList.add( "invisible" );
+					}
+				}, 150);
+			};
+
+			window.addEventListener( "scroll", scrollFunc );
+
+			// When the button is clicked scroll to the top.
+			scrollToTopButton.onclick = function( e ) {
+				e.preventDefault();
+				document.body.scrollIntoView({ behavior: "smooth" });
+			}
+		</script>
+
 	</body>
 </html>

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" id="filters-top">
+        <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"
@@ -16,7 +16,8 @@ <h2 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h2>
             </form>
 
 			<details class="prose mt-6 md:mt-8 lg:mt-0">
-				<summary class="uppercase text-green">More about this directory 
+				<summary class="uppercase text-green">
+					<span class="underline hover:no-underline">About this directory</span> 
 					<span class="utility-icon info-circle">&#x2139;</span>
 				</summary>
 				<p class="text-white mt-2">
@@ -47,7 +48,7 @@ <h2 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h2>
         </section>
     </div>
 
-    <section class="main-content container mx-auto md:mb-8 mt-4 lg:mt-6">
+    <section id="main-content" class="main-content container mx-auto md:mb-8 mt-4 lg:mt-6">
         {% if not ordered_results %}
             {% include "greencheck/partials/_directory_no_results.html" %}
         {% else %}
@@ -57,8 +58,15 @@ <h2 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h2>
 
 	{% include "greencheck/partials/_directory_ctas.html" %}
 
+	<a href="#">
+		<button id="scroll-to-top" class="fixed bottom-2 sm:bottom-4 right-2 sm:right-4 z-50 btn btn-sm hover:bg-purple hover:text-white m-0 py-4 rounded-md border-0 flex items-center invisible">
+			<svg class="scroll-to-top-icon -mt-1" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><rect width="15" height="15" fill="none"></rect><path fill="currentColor" d="M2,8.48l-.65-.65a.71.71,0,0,1,0-1L7,1.14a.72.72,0,0,1,1,0l5.69,5.7a.71.71,0,0,1,0,1L13,8.48a.71.71,0,0,1-1,0L8.67,4.94v8.42a.7.7,0,0,1-.7.7H7a.7.7,0,0,1-.7-.7V4.94L3,8.47a.7.7,0,0,1-1,0Z"></path></svg>
+			<span class="scroll-to-top-label font-bold pl-1.5">To the top</span>
+		</button>
+	</a>
+
 {% endblock %}
 
 {% block footer-content %}
 	{% include "greencheck/partials/_directory_footer.html" %}
-{% endblock  %}
+{% endblock  %}

apps/theme/templates/greencheck/partials/_directory_ctas.html

@@ -12,7 +12,7 @@ <h2 class="text-2xl md:text-4xl md:text-black border-none mb-0">Found this Direc
 
 			<h3 class="heading-icon__lightning--black uppercase text-2xl md:text-med lg:text-2xl font-normal">Support<br/> the mission</h3>
 			<p class="mt-3 lg:mt-4 pt-4 lg:pt-6 border-t-2">Help sustain this work as an open source project in service to the public’s interest.</p>
-			<a class="btn btn-green btn-sm mt-4 lg:mt-6" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/donate/">
+			<a class="btn btn-green btn-sm mt-4 lg:mt-6 mb-16 md:mb-0" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/donate/">
 				How donating works
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>			

apps/theme/templates/greencheck/partials/_directory_results.html

@@ -114,5 +114,3 @@ <h4 class="inline-block mb-0 font-bold text-xl">
         {% endfor %}
     </section>
 {% endfor %}
-
-<p>End of results. <a href="#filters-top">To the top</a>.