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>
<main title = "main content">
<section id = "contentLogs" title = "Logs" hidden>
<section id = "contentLogs" title = "Logs" class = "box-shadow" hidden>
<div class = "toolbar">
<input placeholder = "Search for action name" id = "logSearchBox" />
<button id = "searchLogsClear" title = "Clear search filter" disabled>X</button>
@ -66,15 +66,15 @@
</table>
</section>
<section id = "contentDiagnostics" title = "Diagnostics" hidden>
<section id = "contentDiagnostics" title = "Diagnostics" class = "box-shadow" hidden>
<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>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>
<tbody>
<th colspan = "0">SSH</th>
<th colspan = "99">SSH</th>
<tr>
<td>Found Key</td>
<td width = "10%">Found Key</td>
<td id = "diagnostics-sshfoundkey">?</td>
</tr>

View File

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