From b7f46c9dfa8838fe276cf100f3520819086ca3f2 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 5 Mar 2018 15:35:58 +0000
Subject: [PATCH] adding scroll to top functionality for the activity feed
---
.../templates/funds/includes/activity-feed.html | 5 +++++
opentech/static_src/src/javascript/main.js | 3 +++
.../static_src/src/sass/apply/components/_icon.scss | 13 +++++++++++++
.../static_src/src/sass/apply/components/_link.scss | 10 ++++++++++
opentech/templates/includes/sprites.html | 6 +++++-
5 files changed, 36 insertions(+), 1 deletion(-)
diff --git a/opentech/apply/funds/templates/funds/includes/activity-feed.html b/opentech/apply/funds/templates/funds/includes/activity-feed.html
index a70b728a6..e51c07d70 100644
--- a/opentech/apply/funds/templates/funds/includes/activity-feed.html
+++ b/opentech/apply/funds/templates/funds/includes/activity-feed.html
@@ -26,4 +26,9 @@
{% include "activity/include/all_activity_list.html" with submission_title=True %}
</div>
</div>
+
+ <a href="#" class="js-to-top link link--to-top">
+ <svg class="icon icon--to-top"><use xlink:href="#chevron"></use></svg>
+ <h6>Back to top</h6>
+ </a>
</div>
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index ecee7c148..6255aa010 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -47,6 +47,9 @@ import Tabs from './components/tabs';
e.preventDefault();
$('.js-activity-feed').removeClass('is-open');
});
+
+ // Scroll to the top of the activity feed
+ $('.js-to-top').click(() => $('.js-activity-feed').animate({ scrollTop: 0 }, 250));
});
// Add active class to filters - dropdowns are dynamically appended to the dom,
diff --git a/opentech/static_src/src/sass/apply/components/_icon.scss b/opentech/static_src/src/sass/apply/components/_icon.scss
index e085a98a0..d2b6907b5 100644
--- a/opentech/static_src/src/sass/apply/components/_icon.scss
+++ b/opentech/static_src/src/sass/apply/components/_icon.scss
@@ -59,4 +59,17 @@
margin-left: 10px;
}
}
+
+ &--to-top {
+ display: flex;
+ align-items: center;
+ width: 65px;
+ height: 65px;
+ padding: 20px;
+ margin: 0 0 5px;
+ background-color: $color--white;
+ border: 2px solid $color--black-50;
+ border-radius: 50%;
+ fill: $color--black-50;
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_link.scss b/opentech/static_src/src/sass/apply/components/_link.scss
index d1cb3e28c..148322e36 100644
--- a/opentech/static_src/src/sass/apply/components/_link.scss
+++ b/opentech/static_src/src/sass/apply/components/_link.scss
@@ -119,4 +119,14 @@
}
}
}
+
+ &--to-top {
+ position: fixed;
+ right: 20px;
+ bottom: 20px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ color: $color--black-50;
+ }
}
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index a60008448..cd09420dd 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -211,7 +211,7 @@
<path d="M8.176 13.833V2.167M8.303 14l4.991-4.714M8 14L3.009 9.286M13.824 19.5H2.176" />
</g>
</symbol>
-
+
<symbol id="wifi" viewBox="0 0 69 42">
<g stroke-width="6" fill="none" fill-rule="evenodd">
<path d="M2 16.365c20.786-17.82 42.253-17.82 64.402 0M15 27.842c12.195-10.456 24.79-10.456 37.785 0M27 39c4.666-4 9.484-4 14.456 0" />
@@ -273,4 +273,8 @@
<symbol id="speech-bubble" viewBox="0 0 18 19">
<path d="M8.573 16.715l-3.32 2.007a1 1 0 0 1-1.518-.856v-2.545A8.358 8.358 0 0 1 8.358 0H9.47a8.358 8.358 0 0 1 0 16.715h-.898z" fill-rule="evenodd"/>
</symbol>
+
+ <symbol id="chevron" viewBox="0 0 23 12">
+ <path d="M11.5 0l-.975.824L0 9.737 1.95 12l9.55-8.089L21.05 12 23 9.737 12.475.824z" fill-rule="nonzero" />
+ </symbol>
</svg>
--
GitLab