Improve basket management UI

5 files changed, 56 insertions, 14 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 0cbd23136..f3797408c 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -53,14 +53,22 @@ var datatables_default = {
     "scrollX": true,
     "scrollY": true,
     "searching": false,
-    "scrollCollapse": true
+    "scrollCollapse": true,
+    "pageLength": 10,
+    "lengthMenu": [ 5, 10, 25, 50, 100 ]
 };
 
 var datatables_static_default = {
     "searching": false,
-    "scrollCollapse": true
+    "scrollCollapse": true,
+    "pageLength": 10,
+    "lengthMenu": [ 5, 10, 25, 50, 100 ]
 };
 
+var activate_all_search_msg = "Searches in the shortcut menu deals with all items.";
+var activate_own_search_msg = "Searches in the shortcut menu deals with only your items.";
+var added_message = " items added.";
+
 var advanced_menu = false;
 var shortcut_menu_hide = false;
 var activate_all_search_url = '/activate-all-search/';
@@ -658,9 +666,6 @@ function show_hide_flex(id){
     }
 }
 
-var activate_all_search_msg = "Searches in the shortcut menu deals with all items.";
-var activate_own_search_msg = "Searches in the shortcut menu deals with only your items.";
-
 function activate_all_search(){
     $('.activate_all_search').removeClass('disabled');
     $('.activate_own_search').addClass('disabled');
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index bce02f61d..ef3060a5f 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -40,6 +40,7 @@
     var activate_own_search_url = '{% url "activate-own-search" %}';
     var activate_all_search_msg = "{% trans 'Searches in the shortcut menu deal with all items.' %}";
     var activate_own_search_msg = "{% trans 'Searches in the shortcut menu deal with only your items.' %}";
+    var added_message = "{% trans " items added." %}";
     var YES = "{% trans 'yes' %}";
     var NO = "{% trans 'no' %}";
     var autorefresh_message_start = "{% trans 'Autorefresh start. The form is disabled.' %}";
diff --git a/ishtar_common/templates/ishtar/manage_basket.html b/ishtar_common/templates/ishtar/manage_basket.html
index d611ed8a0..28d713e9a 100644
--- a/ishtar_common/templates/ishtar/manage_basket.html
+++ b/ishtar_common/templates/ishtar/manage_basket.html
@@ -4,19 +4,22 @@
 <h2>{{page_name}}{% trans ":"%} {{basket}}</h2>
 <form enctype="multipart/form-data" action="." method="post"
     id="wizard-form">{% csrf_token %}
-<div class='form'>
+<div class='form' id="basket-manage">
     <div class="alert alert-warning" role="alert">
         {% trans 'Checking "Select all" only selects the current page.' %}
     </div>
     {{form}}
-    <div class="text-center">
+    <div class="text-center" id="basket-add-button">
         <button class="btn btn-primary" type="button" id='add_to'>
-            {% trans "Add" %}
+            <span class="d-none d-lg-block">{% trans "Add" %}</span>
+            <span class="d-block d-lg-none">&gt;</span>
         </button>
     </div>
-<h3>{% trans "Basket content" %}</h3>
-<div id='basket-content' style='text-align:left'>
-</div>
+    <div id="basket-content-wrapper">
+        <h3>{% trans "Basket content" %}</h3>
+        <div id='basket-content'>
+        </div>
+    </div>
     {% block "footer" %}
     <div id="footer">
         <div id='validation-bar'>
@@ -31,10 +34,14 @@
 </form>
 <script type='text/javascript' language='javascript'>
 
+var current_item_number = 0;
+
 function load_list(data, last){
     $('#basket-content').html(data);
-    if (last){
+    if (last == true){
         close_wait();
+        var added = $("#basket-content li").length - current_item_number;
+        display_info(added + added_message);
     }
 }
 
@@ -42,6 +49,7 @@ $('#add_to').click(function(){
     var selected_items = datatable_pk.rows( { selected: true } ).data();
     if(!selected_items) return false;
     $('.modal-progress').modal('show');
+    current_item_number = $("#basket-content li").length;
     for (i = 0, n = selected_items.length; i < n; i++) {
         var selected_item = selected_items[i]['id'];
         last = i == n - 1;
diff --git a/scss/custom.scss b/scss/custom.scss
index 26d9747de..77f17c6e0 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -536,6 +536,34 @@ div#foot a:hover {
 }
 
 
+#basket-manage #foot_pk{
+    display: none;
+}
+
+#basket-manage
+#grid_pk_meta_wrapper{
+    width: 50%;
+    float: left;
+    padding-bottom: 80px;
+}
+
+#basket-add-button{
+    width: 8%;
+    float: left;
+    margin: 20vh 1% 0 1%;
+}
+
+#basket-content-wrapper{
+    width: 40%;
+    float: left;
+}
+
+#basket-content{
+    text-align: left;
+    overflow: auto;
+    max-height: 60vh;
+}
+
 /* ui-autocomplete - start */
 
 .ui-widget-content {
diff --git a/version.py b/version.py
index 78cee22d8..a124d3647 100644
--- a/version.py
+++ b/version.py
@@ -1,5 +1,5 @@
-# 2.1.dev.13
-VERSION = (2, 1, 'dev', 13)
+# 2.1.dev.14
+VERSION = (2, 1, 'dev', 14)
 
 
 def get_version():