X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2FApp.vue;h=1a0b1d6428ffab304a84fa3800cb0fe57b0dfb4a;hb=29fe6fd834029f21b22a23a3342f86b43c277c56;hp=87c7aa45293f9c1282cde9c51cfd38a0576d17bc;hpb=1d41bc6b533ef7361954f472811263c24cd6f64b;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 87c7aa45..1a0b1d64 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -1,22 +1,48 @@
 <template>
   <router-view />
+  <Container
+    v-show="$route.name !== 'charging-stations' && $route.name !== 'not-found'"
+    id="action-container"
+  >
+    <router-view name="action" />
+  </Container>
 </template>
 
+<script setup lang="ts">
+import Container from '@/components/Container.vue'
+</script>
+
 <style>
 #app {
   height: fit-content;
-  width: fit-content;
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  width: 100%;
+  font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  display: flex;
+  flex-direction: row;
+  color: black;
+  background-color: white;
 }
 
-body {
+#action-container {
+  min-width: max-content;
   height: fit-content;
-  width: fit-content;
-  margin: 0.05%;
-  padding: 0.05%;
-  background-color: rgb(233, 227, 227);
+  display: flex;
+  position: sticky;
+  top: 0.008%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-right: 0.2%;
+  margin-left: 0.2%;
+  padding: 0.4%;
+  border: solid 0.25px black;
+}
+
+body {
+  margin: 0.008%;
+  padding: 0.008%;
 }
 </style>