From eaa4c17d4da1f2e9832cc61e54bbb3fb71c3bb02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Sat, 10 Sep 2022 13:11:48 +0000
Subject: [PATCH] title bar basic layout

---
 ui/.gitignore                  |  2 +-
 ui/.vscode/tasks.json          |  9 +++++++++
 ui/src/components/Clock.vue    |  2 +-
 ui/src/components/TitleBar.vue | 29 ++++++++++++++++++++++++-----
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/ui/.gitignore b/ui/.gitignore
index 403adbc..7836f2f 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -15,7 +15,7 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
+# .vscode
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/ui/.vscode/tasks.json b/ui/.vscode/tasks.json
index d6c42e7..819e029 100644
--- a/ui/.vscode/tasks.json
+++ b/ui/.vscode/tasks.json
@@ -9,6 +9,15 @@
 				"ui"
 			],
 			"problemMatcher": []
+		},
+		{
+			"label": "Vue Serve",
+			"type": "shell",
+			"command": "vue",
+			"args": [
+				"serve"
+			],
+			"problemMatcher": []
 		}
 	]
 }
\ No newline at end of file
diff --git a/ui/src/components/Clock.vue b/ui/src/components/Clock.vue
index a0e3611..a2a2dc1 100644
--- a/ui/src/components/Clock.vue
+++ b/ui/src/components/Clock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>{{ formatted }}</div>
+  <span>{{ formatted }}</span>
 </template>
 
 <script lang="ts">
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index a010fd5..e80e2b8 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -1,11 +1,30 @@
 <template>
   <v-toolbar color="primary" prominent dark>
-    <v-spacer />
+    <v-row class="d-flex">
+      <v-col
+        cols="3"
+        class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
+      >
+        LOGO
+      </v-col>
 
-    <v-col>
-      <Clock format="DDD" />
-      <Clock format="T" />
-    </v-col>
+      <v-col
+        cols="6"
+        class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
+      >
+        TITLE
+      </v-col>
+
+      <v-col
+        cols="3"
+        class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
+      >
+        <div class="flex-column">
+          <Clock class="d-flex justify-end" format="DDD" />
+          <Clock class="d-flex justify-end" format="T" />
+        </div>
+      </v-col>
+    </v-row>
   </v-toolbar>
 </template>