button style + input field width for add item

This commit is contained in:
Sam Hadow 2024-02-16 23:51:37 +01:00
parent 4111efca63
commit a2eea73a04
3 changed files with 13 additions and 11 deletions

View File

@ -21,9 +21,9 @@
<div class="banner">
<p></p>
<div class="btn-toolbar btn-group-sm" role="toolbar" aria-label="Toolbar">
<div class="btn-group mr-2" role="group" aria-label="Add group">
<input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
<input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
<div class="btn-group mr-2 w-50" role="group" aria-label="Add group">
<input id="additemid" type="text" class="form-control input-sm w-15 w-50" placeholder="item id" pattern="[0-9]*">
<input id="addattributes" type="text" class="form-control input-sm w-15" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
<button id="addbutton" class="btn btn-secondary" type="button">add</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Manage list group">
@ -47,9 +47,9 @@
<!--popup manage list-->
<div id="manageListPopup" class="popup">
<div class="popup-content">
<button id="create_list" type="button">create</button>
<button id="modify_list" type="button">modify</button>
<button id="delete_list" type="button">delete</button>
<button id="create_list" type="button" class="btn btn-secondary">create</button>
<button id="modify_list" type="button" class="btn btn-secondary">modify</button>
<button id="delete_list" type="button" class="btn btn-secondary">delete</button>
</div>
</div>
@ -59,8 +59,8 @@
<p>Create new list</p>
<input id="listName" type="text" placeholder="name">
<input id="listDescription" type="text" placeholder="description">
<button id="create_list_add" type="button">add</button>
<button id="create_list_cancel" type="button">cancel</button>
<button id="create_list_add" type="button" class="btn btn-secondary">add</button>
<button id="create_list_cancel" type="button" class="btn btn-secondary">cancel</button>
<p>Include items</p>
<div id="checkbox-container"></div>
</div>
@ -70,8 +70,8 @@
<div id="confirmationPopup" class="popup">
<div class="popup-content">
<p>Are you sure?</p>
<button id="yesBtn">Yes</button>
<button id="noBtn">No</button>
<button id="yesBtn" type="button" class="btn btn-secondary">Yes</button>
<button id="noBtn" type="button" class="btn btn-secondary">No</button>
</div>
</div>

View File

@ -54,6 +54,7 @@ function render_graphs(items, history, show_hidden) {
} else {
hide_button.innerHTML = "show";
}
hide_button.className = "btn btn-secondary";
hide_button.style.position = "relative";
hide_button.style.top = `-${height+margin.bottom}px`;
hide_button.style.left = `${margin.left+20}px`;
@ -64,6 +65,7 @@ function render_graphs(items, history, show_hidden) {
// button to delete item
const del_button = document.createElement("button");
del_button.innerHTML = "delete";
del_button.className = "btn btn-secondary";
del_button.style.position = "relative";
del_button.style.top = `-${height+margin.bottom}px`;
del_button.style.left = `${margin.left+30}px`;

View File

@ -30,7 +30,7 @@ body {
.banner {
background-color: #30fc66;
color: #fff;
padding: 10px;
padding: 5px;
position: fixed;
z-index: 300;
top: 0;