💄 import tables: vertical scroll buttons (#6400)

3 files changed, 45 insertions, 1 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index d78cc3b12..bcc2b7940 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -39,6 +39,12 @@ if (typeof String.prototype.format !== 'function') {
     };
 }
 
+(function($) {
+    $.fn.hasHorizontalScrollBar = function() {
+        return this.get(0).scrollWidth > this.get(0).clientWidth;
+    }
+})(jQuery);
+
 $.urlParam = function(name){
     var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
     if (results==null) {
@@ -2252,3 +2258,24 @@ function load_window(url, speed, on_success, no_jump){
         }
     });
 }
+
+var display_horizontal_nav = function(div){
+    if ($(div).hasHorizontalScrollBar()){
+        $(".vscroll-arrows").show();
+    } else {
+        $(".vscroll-arrows").hide();
+    }
+};
+
+var register_vscroll_icons = function(){
+    $("#vscroll-left").click(function(){
+        let item = $(this).parent().parent();
+        item.scrollLeft(0);
+        return false;
+    });
+    $("#vscroll-right").click(function(){
+        let item = $(this).parent().parent();
+        item.scrollLeft(item.get(0).scrollWidth);
+        return false;
+    });
+};
diff --git a/ishtar_common/templates/ishtar/import_table.html b/ishtar_common/templates/ishtar/import_table.html
index 7e4a5afff..2a9959ffa 100644
--- a/ishtar_common/templates/ishtar/import_table.html
+++ b/ishtar_common/templates/ishtar/import_table.html
@@ -20,15 +20,27 @@
     {% endif %}{% endfor %}
     var need_refresh = false;
     if (import_table_update_import_ids.length) need_refresh = true;
-
     $(document).ready(function(){
         setTimeout(function(){$(".alert-info.alert-dismissible").hide("fade");}, 5000);
         register_qa();
+        register_vscroll_icons();
+        display_horizontal_nav("#import-container");
+        $(window).on('resize', function() {display_horizontal_nav("#import-container")});
         if (need_refresh) setInterval(function(){
             import_table_update_import_list(import_table_update_import_ids)
         }, 3 * 1000);
     });
 </script>
+
+<div class="vscroll-arrows">
+    <button class="btn btn-sm btn-secondary" id="vscroll-left">
+        <i class="fa fa-arrow-left" aria-hidden="true"></i>
+    </button>
+    <button class="btn btn-sm btn-secondary" id="vscroll-right">
+        <i class="fa fa-arrow-right" aria-hidden="true"></i>
+    </button>
+</div>
+
 <h2>{{page_name}}</h2>
 <div class='form' id="import-list">
     {% if not object_list %}
diff --git a/scss/custom.scss b/scss/custom.scss
index 8903a52c3..5b1aba8f8 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -335,6 +335,11 @@ ul.table-import-diag > li  span.btn{
     width: 10rem;
 }
 
+.vscroll-arrows{
+    position: absolute;
+    right: 3em;
+}
+
 .table-scroll {
     padding: 1em;
     table {