status bar to build status page

This commit is contained in:
Evgenii Alekseev 2021-03-15 04:43:10 +03:00
parent 7fd22e9f16
commit 2cef540cc0
2 changed files with 61 additions and 15 deletions

View File

@ -11,7 +11,7 @@
<body>
<div class="root">
<h1>ahriman {{ version|e }} ({{ architecture|e }})<sup class="service-{{ service.status|e }}" title="{{ service.timestamp }}">{{ service.status|e }}</sup></h1>
<h1>ahriman {{ version|e }} ({{ architecture|e }})</h1>
{% include "search-line.jinja2" %}
@ -31,11 +31,21 @@
<td class="include-search">{{ package.packages|join("<br>"|safe) }}</td>
<td>{{ package.version|e }}</td>
<td>{{ package.timestamp|e }}</td>
<td class="package-{{ package.status|e }}">{{ package.status|e }}</td>
<td class="status package-{{ package.status|e }}">{{ package.status|e }}</td>
</tr>
{% endfor %}
</table>
</section>
<footer>
<ul class="navigation">
<li class="status" style="text-align: left; padding-right: 32px;">Service status</li>
<li class="status service-{{ service.status|e }}" title="last update at {{ service.timestamp|e }}">{{ service.status|e }}</li>
<li><a href="https://github.com/arcan1s/ahriman" title="sources">ahriman</a></li>
<li><a href="https://github.com/arcan1s/ahriman/releases" title="releases list">releases</a></li>
<li><a href="https://github.com/arcan1s/ahriman/issues" title="issues tracker">report a bug</a></li>
</ul>
</footer>
</div>
</body>

View File

@ -5,6 +5,11 @@
--color-pending: 255, 255, 146;
--color-success: 94, 255, 94;
--color-unknown: 225, 225, 225;
--color-header: 200, 200, 255;
--color-hover: 255, 255, 225;
--color-line-blue: 235, 235, 255;
--color-line-white: 255, 255, 255;
}
@keyframes blink-building {
@ -26,7 +31,7 @@
padding: 15px 15% 0;
}
section.element {
section.element, footer {
width: 100%;
padding: 10px 0;
}
@ -40,19 +45,23 @@
}
tr.package:nth-child(odd) {
background-color: rgba(255, 255, 255, 1);
background-color: rgba(var(--color-line-white), 1.0);
}
tr.package:nth-child(even) {
background-color: rgba(235, 235, 255, 1);
background-color: rgba(var(--color-line-blue), 1.0);
}
tr.package:hover {
background-color: rgba(255, 255, 225, 1);
background-color: rgba(var(--color-hover), 1.0);
}
tr.header{
background-color: rgba(200, 200, 255, 1);
background-color: rgba(var(--color-header), 1.0);
}
td.status {
text-align: center;
}
td.package-unknown {
@ -76,12 +85,10 @@
background-color: rgba(var(--color-success), 1.0);
}
sup.service-unknown {
font-weight: lighter;
li.service-unknown {
background-color: rgba(var(--color-unknown), 1.0);
}
sup.service-building {
font-weight: lighter;
li.service-building {
background-color: rgba(var(--color-building), 1.0);
animation-name: blink-building;
animation-duration: 1s;
@ -89,12 +96,41 @@
animation-iteration-count: infinite;
animation-direction: alternate;
}
sup.service-failed {
font-weight: lighter;
li.service-failed {
background-color: rgba(var(--color-failed), 1.0);
}
sup.service-success {
font-weight: lighter;
li.service-success {
background-color: rgba(var(--color-success), 1.0);
}
ul.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(var(--color-header), 1.0);
}
ul.navigation li {
float: left;
}
ul.navigation li.status {
display: block;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul.navigation li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul.navigation li a:hover {
background-color: rgba(var(--color-hover), 1.0);
}
</style>