aboutsummaryrefslogtreecommitdiff
path: root/html/item_list.html
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2022-01-10 23:38:56 +0100
committerWojtek Kosior <koszko@koszko.org>2022-01-10 23:38:56 +0100
commit19304cd1ae4e4ba4f6dcf4f1db14de1e4e70c250 (patch)
tree2e7e6f904ad16f9402827a7bc215a419de5c2656 /html/item_list.html
parent38650a8102fe0841617cd80f3a6e45b1f5f62fd5 (diff)
downloadbrowser-extension-19304cd1ae4e4ba4f6dcf4f1db14de1e4e70c250.tar.gz
browser-extension-19304cd1ae4e4ba4f6dcf4f1db14de1e4e70c250.zip
improve item list styling; add payload creation form; exend dialog mechanism
Diffstat (limited to 'html/item_list.html')
-rw-r--r--html/item_list.html39
1 files changed, 30 insertions, 9 deletions
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>