Improve UI scaling

g3force · g3force · commit c3ad9c6c7821 · 2023-04-29T11:32:35.000+02:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SSL Remote Control</title>
   </head>
-  <body style="height: 100vh; margin: 0">
+  <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -40,11 +40,25 @@ api?.RegisterStateConsumer((s) => {
   width: 100%;
 }
 
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
 #main {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
-  padding: 0.5vh 0.5vw;
+  padding: 1vh 1vw;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -169,12 +183,4 @@ api?.RegisterStateConsumer((s) => {
   background: #269CE9;
   color: #93D5FF;
 }
-
-/* Chromium has a minimum width of 500px, but the Pi display is only 480px, so we need to add a padding here */
-@media (max-width: 500px) {
-  #app {
-    padding-right: 40px;
-  }
-}
-
 </style>
diff --git a/frontend/src/components/ErrorMessageBar.vue b/frontend/src/components/ErrorMessageBar.vue
@@ -34,6 +34,5 @@ api?.RegisterErrorConsumer((s) => {
 <style scoped>
 .error-message {
   text-align: center;
-  height: 1em;
 }
 </style>
diff --git a/frontend/src/components/StatusBar.vue b/frontend/src/components/StatusBar.vue
@@ -27,26 +27,27 @@ online.value = false
 </script>
 
 <template>
-  <div>
+  <div class="online-state" :class="{online: online, offline: !online}"/>
+
+  <div class="left-bar">
+    <div class="left-bar-element">
+      Robots: <strong>{{ numRobots }}</strong> / <strong>{{ maxRobots }}</strong>
+    </div>
     <div class="left-bar-element">
       Yellow cards due:
       <span class="yellow-card-time" v-for="yellowCardDue of yellowCardsDue">{{ Math.round(yellowCardDue) }}s</span>
     </div>
-    <div class="right-bar-element online-state" :class="{online: online, offline: !online}"/>
-    <div class="right-bar-element">
-      Robots: <strong>{{ numRobots }}</strong> / <strong>{{ maxRobots }}</strong>
-    </div>
   </div>
 </template>
 
 <style scoped>
-.right-bar-element {
-  float: right;
-  margin-left: 1em;
+.left-bar {
+  width: 80%;
 }
 
 .left-bar-element {
   float: left;
+  text-align: left;
   margin-right: 1em;
 }
 
@@ -59,6 +60,9 @@ online.value = false
   width: 1em;
   height: 1em;
   border-radius: 1em;
+  position: absolute;
+  right: 0.5em;
+  top: 0.5em;
 }
 
 .online-state.online {

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,5 @@ api?.RegisterErrorConsumer((s) => {`
`34`	`34`	`<style scoped>`
`35`	`35`	`.error-message {`
`36`	`36`	`text-align: center;`
`37`		`- height: 1em;`
`38`	`37`	`}`
`39`	`38`	`</style>`