diff options
author | Wojtek Kosior <koszko@koszko.org> | 2022-01-10 23:38:56 +0100 |
---|---|---|
committer | Wojtek Kosior <koszko@koszko.org> | 2022-01-10 23:38:56 +0100 |
commit | 19304cd1ae4e4ba4f6dcf4f1db14de1e4e70c250 (patch) | |
tree | 2e7e6f904ad16f9402827a7bc215a419de5c2656 /html/item_list.html | |
parent | 38650a8102fe0841617cd80f3a6e45b1f5f62fd5 (diff) | |
download | browser-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.html | 39 |
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> |