UI: manage multi select on table - improve basket management layout

1 files changed, 15 insertions, 6 deletions

diff --git a/ishtar_common/templates/ishtar/basket_list.html b/ishtar_common/templates/ishtar/basket_list.html
index 011ed97a0..43236aeb0 100644
--- a/ishtar_common/templates/ishtar/basket_list.html
+++ b/ishtar_common/templates/ishtar/basket_list.html
@@ -1,10 +1,19 @@
 {% load i18n %}
-<table>
-<tr>{% for item in basket.items.all %}
-    <td><a class="display_details" href="#" onclick="load_window('{{item_url}}/{{item.pk}}/');"><i class="fa fa-info-circle" aria-hidden="true"></i></a></td>
-    <td>{{item.full_label}}</td>
-    <td><a class='async-link' data-target='#basket-content' href='{{delete_url}}/{{basket.pk}}/{{item.pk}}/'>{% trans "remove" %}</a></td></tr>{% endfor %}
-</table>
+<ul class="list-group">
+    {% for item in basket.items.all %}
+    <li class="list-group-item">
+        <a class="display_details" href="#"
+            onclick="load_window('{{item_url}}/{{item.pk}}/');"><i class="fa fa-info-circle" aria-hidden="true"></i>
+        </a>
+        <span>{{item.full_label}}</span>
+        <a class='async-link text-danger float-right'
+           data-target='#basket-content'
+           href='{{delete_url}}/{{basket.pk}}/{{item.pk}}/'>
+            <i class="fa fa-times" aria-hidden="true"></i>
+        </a>
+    </li>
+    {% endfor %}
+</ul>
 <script type='text/javascript'>
     $("a.async-link").click(manage_async_link);
 </script>