Add carousel arrows (#4977)

* Add carousel arrows * Update featured-bounties.css * fix stylelint
gitcoinco · Aug 7, 2019 · d52a466 · d52a466
1 parent 9c3b47b
commit d52a466
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/app/assets/v2/css/featured-bounties.css b/app/assets/v2/css/featured-bounties.css
@@ -2,6 +2,36 @@
   color: #fff;
   background-color: #0d003c;
   padding: 0.7rem 1.5rem;
+  position: relative;
+}
+
+.featured-bounties__arrow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: 1;
+  color: #10ce7c;
+  background: transparent;
+  border: none;
+}
+
+.featured-bounties__arrow:hover,
+.featured-bounties__arrow:focus {
+  color: #57e6a8;
+  opacity: 1;
+}
+
+.featured-bounties:hover .featured-bounties__arrow {
+  opacity: 1;
+}
+
+.featured-bounties__arrow-left {
+  left: 0;
+}
+
+.featured-bounties__arrow-right {
+  right: 10px;
 }
 
 .featured-bounties__title {

diff --git a/app/assets/v2/js/pages/dashboard.js b/app/assets/v2/js/pages/dashboard.js
@@ -60,6 +60,20 @@ var paint_search_tabs = function() {
   target.html(html);
 };
 
+function scrollSlider(element, cardSize) {
+  const arrowLeft = $('#arrowLeft');
+  const arrowRight = $('#arrowRight');
+
+  arrowLeft.on('click', function() {
+    element[0].scrollBy({left: -cardSize, behavior: 'smooth'});
+  });
+  arrowRight.on('click', function() {
+    element[0].scrollBy({left: cardSize, behavior: 'smooth'});
+  });
+
+}
+scrollSlider($('#featured-card-container'), 288);
+
 function debounce(func, wait, immediate) {
   var timeout;
 

diff --git a/app/dashboard/templates/dashboard/featured_bounties.html b/app/dashboard/templates/dashboard/featured_bounties.html
@@ -9,5 +9,7 @@ <h3 class="featured-bounties__title">
       </span>
     </h3>
   </div>
+  <button class="featured-bounties__arrow featured-bounties__arrow-left" id="arrowLeft"><i class="fas fa-angle-left fa-2x"></i></button>
+  <button class="featured-bounties__arrow featured-bounties__arrow-right" id="arrowRight"><i class="fas fa-angle-right fa-2x"></i></button>
   <div class="scroll-carousel" id="featured-card-container"></div>
 </div>