medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: Log search box that is less visually offensive

This commit is contained in:
jamesread 2024-11-01 22:36:10 +00:00 committed by James Read
parent 8717997b0e
commit 8fe91101db
2 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
webui.dev/index.html
View File

@ -55,8 +55,13 @@
<main title = "main content"> <main title = "main content">
<section id = "contentLogs" title = "Logs" class = "box-shadow" hidden> <section id = "contentLogs" title = "Logs" class = "box-shadow" hidden>
<div class = "toolbar"> <div class = "toolbar">
<input placeholder = "Search for action name" id = "logSearchBox" /> <label class = "input-with-icons">
<button id = "searchLogsClear" title = "Clear search filter" disabled>X</button> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/></svg>
<input placeholder = "Search for action name" id = "logSearchBox" />
<button id = "searchLogsClear" title = "Clear search filter" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
</button>
</label>
</div> </div>
<table title = "Logs"> <table title = "Logs">
<thead> <thead>

44
webui.dev/style.css
View File

@ -524,10 +524,6 @@ div.toolbar {
flex-direction: row; flex-direction: row;
} }
div.toolbar * {
margin-right: 1em;
}
div.display { div.display {
border: 1px solid #666; border: 1px solid #666;
box-shadow: 0 0 6px 0 #aaa; box-shadow: 0 0 6px 0 #aaa;
@ -598,6 +594,36 @@ div.display {
vertical-align: middle; vertical-align: middle;
} }
label.input-with-icons {
border: 1px solid #ccc;
display: flex;
flex-direction: row;
align-items: center;
}
label.input-with-icons input {
border: 0;
padding: .6em;
flex-grow: 1;
}
label.input-with-icons svg {
font-size: 1.5em;
}
label.input-with-icons button {
border: 0;
background-color: transparent;
padding-top: 0;
padding-bottom: 0;
box-shadow: none;
transition: color .3s ease;
}
label.input-with-icons button:disabled {
display: none;
}
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
fieldset { fieldset {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@ -653,6 +679,16 @@ div.display {
background-color: #222; background-color: #222;
} }
label.input-with-icons {
border: 1px solid #666;
background-color: #383838;
}
input {
background-color: #383838;
color: white;
}
button, button,
input[type="submit"] { input[type="submit"] {
border: 1px solid #666; border: 1px solid #666;