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

View File

@ -9,7 +9,7 @@ pub fn Navbar() -> impl IntoView {
view! { view! {
<div class="navbar"> <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="/" active_class="route-active">Home</A>
<A href="/participants" active_class="route-active">Deelnemers</A> <A href="/participants" active_class="route-active">Deelnemers</A>
<A href="/times" active_class="route-active">Tijden</A> <A href="/times" active_class="route-active">Tijden</A>