Add button to navigate back to the top of the list.

kgodey · kgodey · commit 01505cd91564 · 2019-02-01T19:39:44.000-05:00
diff --git a/assets/static/script.js b/assets/static/script.js
@@ -0,0 +1,9 @@
+$(document).ready(function() {
+    $(window).scroll(function() {
+        if ($(this).scrollTop() > 500) {
+            $('#back-to-top').fadeIn();
+        } else {
+            $('#back-to-top').fadeOut();
+        }
+    });
+});
diff --git a/assets/static/style.css b/assets/static/style.css
@@ -29,4 +29,14 @@
     border-width: 10px;
     padding-left: 0px;
     font-size: 1.5em;
-}
+}
+
+#back-to-top {
+    cursor: pointer;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: none;
+    background-color: #00b5da;
+    border: none;
+}
diff --git a/templates/layout.html b/templates/layout.html
@@ -2,9 +2,10 @@
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <link rel="stylesheet" href="{{ '/static/style.css'|url }}">
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script type="text/javascript" src="{{ '/static/script.js'|url }}"></script>
 <title>{% block title %}Welcome{% endblock %} — Creative Commons on GitHub</title>
 <body>
   <header>
diff --git a/templates/project-ideas-page.html b/templates/project-ideas-page.html
@@ -2,12 +2,10 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
-  <h1>Google Summer of Code 2019 Project Ideas</h1>
+  <a name="ideas-top"><h1>Google Summer of Code 2019 Project Ideas</h1></a>
   {% set ideas = site.query('/project-ideas-page/project-ideas').include_undiscoverable(true).all() %}
   <div class="mt-4">
     <div>
-      <p>The following list contains Creative Commons proposed ideas for the Google Summer of Code 2019</p>
-
       <ul class="list-unstyled m3">
       {% for idea in ideas %}
         <li class="my-2"><a href="#{{ idea._slug }}">{{ idea.title }}</a></li>
@@ -28,5 +26,6 @@ <h2 class="card-header"><a name="{{ idea._slug }}">{{ idea.title }}</a></h5>
         </ul>
       </div>
     {% endfor %}
+    <a id="back-to-top" href="#ideas-top" class="btn btn-dark btn-sm" role="button">Back to list</a>
   </div>
 {% endblock %}
