From d52a466ffdfceb0916f3bb06ac44cbfc817dd954 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Octavio=20Amuch=C3=A1stegui?=
 <octavioamuchastegui@gmail.com>
Date: Wed, 7 Aug 2019 10:58:42 -0300
Subject: [PATCH] Add carousel arrows (#4977)

* Add carousel arrows

* Update featured-bounties.css

* fix stylelint
---
 app/assets/v2/css/featured-bounties.css       | 30 +++++++++++++++++++
 app/assets/v2/js/pages/dashboard.js           | 14 +++++++++
 .../dashboard/featured_bounties.html          |  2 ++
 3 files changed, 46 insertions(+)

diff --git a/app/assets/v2/css/featured-bounties.css b/app/assets/v2/css/featured-bounties.css
index fa938f10cc6..3044bd0530e 100644
--- 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
index 4dc79bc8069..03acadf2ae8 100644
--- 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
index ed81fa629ff..0f7e68027ec 100644
--- 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>