edward/endstat
1
0
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

Made ui much nicer

Browse source
This commit is contained in:
Edward Shen 2019-05-01 18:02:49 -04:00
parent f0c38b4d79
commit 993019f352
Signed by: edward
GPG key ID: F350507060ED6C90
1 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
templates/index.html
View file

@ -16,7 +16,8 @@
} }
main { main {
padding: 1rem 0; padding: 1rem;
width: 100%;
} }
header { header {
@ -38,20 +39,28 @@
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
h1 { display: block; margin: 0; } h1 { margin: 0; }
h3 { margin-top: 0; } h3 { margin: 0; text-align: justify; }
.info {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.spacer {
flex: 1 0 1rem;
}
.indicator { .indicator {
width: 1rem; width: 1rem;
min-height: 100%; min-height: 100%;
border-radius: 1rem 0 0 1rem; border-radius: 1rem 0 0 1rem;
margin-right: 1rem;
} }
.ok { background-color: #4ed34e; } .ok { background-color: #4ed34e; }
.warn { background-color: #fcfc64; } .warn { background-color: #fcfc64; }
.error { background-color: #ff392e; } .error { background-color: #ff392e; }
.error-msg { font-family: 'Source Code Pro', monospace;} .error-msg { margin-top: 1rem; font-family: 'Source Code Pro', monospace;}
</style> </style>
</head> </head>
<body> <body>
@ -65,8 +74,11 @@
<section> <section>
<aside class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></aside> <aside class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></aside>
<main> <main>
<div class="info">
<h3>{{ status.endpoint }}</h3> <h3>{{ status.endpoint }}</h3>
<div class="spacer"></div>
<a href="{{ status.location }}">{{ status.location }}</a> <a href="{{ status.location }}">{{ status.location }}</a>
</div>
{% if status.error %}<p class="error-msg">{{ status.error }}</p>{% endif %} {% if status.error %}<p class="error-msg">{{ status.error }}</p>{% endif %}
</main> </main>
</section> </section>