From 19304cd1ae4e4ba4f6dcf4f1db14de1e4e70c250 Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Mon, 10 Jan 2022 23:38:56 +0100
Subject: improve item list styling; add payload creation form; exend dialog
 mechanism

---
 html/item_list.html | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

(limited to 'html/item_list.html')

diff --git a/html/item_list.html b/html/item_list.html
index d082c5d..5d2a163 100644
--- a/html/item_list.html
+++ b/html/item_list.html
@@ -41,20 +41,41 @@
 #LOADCSS html/base.css
 #LOADCSS html/grid.css
 <style>
+  .item_list {
+      overflow-y: scroll;
+  }
+  .item_list>li {
+      cursor: pointer;
+      padding: 0.15em 0.3em;
+  }
+  .list_main_view {
+      grid-template-columns: auto 1fr;
+  }
   .item_li_highlight {
       background-color: #c0c0c0;
   }
+  .item_list>li.item_li_highlight {
+      cursor: default;
+  }
+  .list_buttons {
+      margin: 1em auto;
+      text-align: center;
+  }
 </style>
 <template>
-  <div id="item_list" data-template="main_div" class="grid_2">
-    <ul data-template="ul"></ul>
-    <div data-template="preview_container" class="hide">
-      <!-- preview div will be dynamically inserted here -->
-
-      <button data-template="remove_but">Remove</button>
-      <!--<button data-template="export_but">Export</button>-->
-    </div>
-    <div data-template="dialog_container" class="hide">
+  <div id="item_list" data-template="main_div" class="grid_2 list_main_view">
+    <ul data-template="ul" class="item_list"></ul>
+    <div>
+      <div data-template="preview_container" class="hide">
+	<!-- preview div will be dynamically inserted here -->
+	<div class="list_buttons">
+	  <button data-template="remove_but">Remove</button>
+	  <!--<button data-template="export_but">Export</button>-->
+	</div>
+      </div>
+      <div data-template="dialog_container" class="hide">
+	<!-- dialog div will be dynamically inserted here -->
+      </div>
     </div>
   </div>
 </template>
-- 
cgit v1.2.3