Better connection status styling

This commit is contained in:
xeovalyte 2024-02-19 10:44:39 +01:00
parent fe5a35208e
commit 706e5ed07e
No known key found for this signature in database
2 changed files with 10 additions and 2 deletions

View File

@ -12,6 +12,7 @@ $text-color: #f3efef;
html,
body {
height: 100vh;
max-width: 100vw;
margin: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
@ -44,10 +45,11 @@ a {
.navbar {
background-color: $secondary-bg-color;
position: relative;
width: 100%;
display: flex;
justify-content: center;
padding: 8px;
padding: 8px 0;
}
.navbar > a {
@ -62,6 +64,12 @@ a {
color: $text-color !important;
}
.db-connection {
position: absolute;
left: 0px;
padding: 8px 16px;
}
.btn-add-link {
width: 100%;
padding: 12px 0;

View File

@ -9,7 +9,7 @@ pub fn Navbar() -> impl IntoView {
view! {
<div class="navbar">
<p>{ move || websocket.ready_state.get().to_string()}</p>
<span class="db-connection">"Connection: "{ move || websocket.ready_state.get().to_string()}</span>
<A href="/" active_class="route-active">Home</A>
<A href="/participants" active_class="route-active">Deelnemers</A>
<A href="/times" active_class="route-active">Tijden</A>