From 706e5ed07ebda5367353e8092793826caec46f78 Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Mon, 19 Feb 2024 10:44:39 +0100
Subject: [PATCH] Better connection status styling

---
 application/public/styles.scss       | 10 +++++++++-
 application/src/components/navbar.rs |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/application/public/styles.scss b/application/public/styles.scss
index 4e7c9a2..6dfbded 100644
--- a/application/public/styles.scss
+++ b/application/public/styles.scss
@@ -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;
diff --git a/application/src/components/navbar.rs b/application/src/components/navbar.rs
index 9c23195..812cdba 100644
--- a/application/src/components/navbar.rs
+++ b/application/src/components/navbar.rs
@@ -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>