Better connection status styling
This commit is contained in:
parent
fe5a35208e
commit
706e5ed07e
@ -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;
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user