feature: Slightly nicer looking logs and diagnostics pages (#427)

This commit is contained in:
James Read 2024-10-11 18:40:40 +01:00 committed by GitHub
parent 35dca50863
commit a187c8c8a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 10 deletions

View File

@ -48,7 +48,7 @@
</header> </header>
<main title = "main content"> <main title = "main content">
<section id = "contentLogs" title = "Logs" hidden> <section id = "contentLogs" title = "Logs" class = "box-shadow" hidden>
<div class = "toolbar"> <div class = "toolbar">
<input placeholder = "Search for action name" id = "logSearchBox" /> <input placeholder = "Search for action name" id = "logSearchBox" />
<button id = "searchLogsClear" title = "Clear search filter" disabled>X</button> <button id = "searchLogsClear" title = "Clear search filter" disabled>X</button>
@ -66,15 +66,15 @@
</table> </table>
</section> </section>
<section id = "contentDiagnostics" title = "Diagnostics" hidden> <section id = "contentDiagnostics" title = "Diagnostics" class = "box-shadow" hidden>
<div id = "diagnostics" class = "ta-left"> <div id = "diagnostics" class = "ta-left">
<p><strong>Note:</strong> Diagnostics are only generated on OliveTin startup - they are not updated in real-time or when you refresh this page. They are intended as a "quick reference" to help you.</p> <p><strong>Note:</strong> Diagnostics are only generated on OliveTin startup - they are not updated in real-time or when you refresh this page. They are intended as a "quick reference" to help you.</p>
<p>If you are having problems with OliveTin and want to raise a support request, please don't take a screenshot or copy text from this page, but instead it is highly recommended to include a <a href = "https://docs.olivetin.app/sosreport.html">sosreport</a> which is more detailed, and makes it easier to help you.</p> <p>If you are having problems with OliveTin and want to raise a support request, please don't take a screenshot or copy text from this page, but instead it is highly recommended to include a <a href = "https://docs.olivetin.app/sosreport.html">sosreport</a> which is more detailed, and makes it easier to help you.</p>
<table> <table>
<tbody> <tbody>
<th colspan = "0">SSH</th> <th colspan = "99">SSH</th>
<tr> <tr>
<td>Found Key</td> <td width = "10%">Found Key</td>
<td id = "diagnostics-sshfoundkey">?</td> <td id = "diagnostics-sshfoundkey">?</td>
</tr> </tr>

View File

@ -175,12 +175,11 @@ table {
background-color: white; background-color: white;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
box-shadow: 0 0 5px 0 #444;
} }
th, th,
td { td {
border: 1px solid #efefef; border-top: 1px solid #efefef;
text-align: left; text-align: left;
padding: 0.6em; padding: 0.6em;
} }
@ -488,12 +487,20 @@ span.annotation-value {
color: black; color: black;
} }
.box-shadow {
box-shadow: 0 0 5px 0 #444;
}
.box-shadow p {
padding: .6em;
background-color: #fff;
margin: 0;
}
div.toolbar { div.toolbar {
padding: .4em; padding: .4em;
text-align: left; text-align: left;
background-color: #efefef; background-color: #fff;
border: 1px solid #999;
border-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -575,6 +582,14 @@ div.display {
color: white; color: white;
} }
.box-shadow {
box-shadow: 0 0 6px 0 #ccc;
}
.box-shadow p {
background-color: #222;
}
dialog { dialog {
background-color: #222; background-color: #222;
color: white; color: white;
@ -628,7 +643,7 @@ div.display {
table, table,
td, td,
th { th {
border: 1px solid gray; border-top: 1px solid gray;
} }
td, td,