From 4f165b9767c2ea9c8a35f07df4ad03cf38fcc111 Mon Sep 17 00:00:00 2001
From: Giovanni Harting <539@idlegandalf.com>
Date: Thu, 25 Jan 2024 17:06:37 +0100
Subject: [PATCH] fixed mobile page design

---
 frontend/src/App.vue                          | 14 ++---
 frontend/src/components/CurrentlyBuilding.vue | 51 ++++++++++---------
 frontend/src/components/MainNav.vue           | 10 ++--
 3 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 64697bb..f327e89 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
-    <v-sheet :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`" color="transparent">
-      <main-nav :style="`padding-left: ${offsetLeft}px; padding-right: ${offsetLeft}px;`" />
+    <v-container style="max-width: 1440px" color="transparent">
+      <main-nav />
 
       <v-main>
         <build-server-stats />
@@ -10,7 +10,7 @@
 
         <packages />
       </v-main>
-    </v-sheet>
+    </v-container>
   </v-app>
 </template>
 
@@ -18,14 +18,6 @@
 import MainNav from '@/components/MainNav.vue'
 import BuildServerStats from '@/components/BuildServerStats.vue'
 import Packages from '@/components/Packages.vue'
-import { onMounted, ref } from 'vue'
 import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
 
-const contentWidth = ref(1440)
-const offsetLeft = ref(0)
-
-onMounted(() => {
-  const innerWidth = window.innerWidth
-  offsetLeft.value = (innerWidth - contentWidth.value) / 2
-})
 </script>
diff --git a/frontend/src/components/CurrentlyBuilding.vue b/frontend/src/components/CurrentlyBuilding.vue
index 75e6121..08a4677 100644
--- a/frontend/src/components/CurrentlyBuilding.vue
+++ b/frontend/src/components/CurrentlyBuilding.vue
@@ -5,35 +5,40 @@
     rounded
     style="border-radius: 10px; border: 2px solid grey"
     variant="elevated">
-    <v-card-title class="d-flex align-center justify-space-between w-100">
-      <span v-if="packageCount.building > 0" class="d-flex">
-        <div class="pulsating-circle-amber me-4" style="transform: translateY(10px)" />
-        <span>Building</span>
-      </span>
-      <span v-else class="d-flex">
-        <div class="pulsating-circle-green me-4" style="transform: translateY(10px)" />
-        <span>Idle</span>
-      </span>
-      <v-sheet class="d-flex align-center w-100">
-        <v-progress-linear
-          :max="packageCount.built + packageCount.building + packageCount.queued"
-          :model-value="packageCount.built"
-          color="light-blue"
-          height="10"
-          rounded
-          striped
-          style="transform: translateX(-620px)"></v-progress-linear>
-        <span
-          class="text-grey me-2"
-          style="font-size: 13px; min-width: 220px; width: 220px; padding-left: 60px">
+    <v-card-title>
+      <v-row style="width: 100%" class="mt-2" align="center" no-gutters>
+        <v-col class="ms-2" cols="2" v-if="packageCount.building > 0" style="max-width: 130px">
+          <v-row no-gutters>
+            <div class="pulsating-circle-amber me-4" style="transform: translateY(10px)"  />
+            <span>Building</span>
+          </v-row>
+        </v-col>
+        <v-col class="ms-2" cols="2" v-else>
+          <v-row no-gutters>
+            <div class="pulsating-circle-green me-4" style="transform: translateY(10px)" />
+            <span>Idle</span>
+          </v-row>
+        </v-col>
+        <v-col>
+          <v-progress-linear
+            :max="packageCount.built + packageCount.building + packageCount.queued"
+            :model-value="packageCount.built"
+            color="light-blue"
+            height="10"
+            rounded
+            striped></v-progress-linear>
+        </v-col>
+        <v-col class="text-grey me-2 justify-end pl-4 text-end"
+               style="font-size: 13px; min-width: 200px"
+        cols="1">
           Last updated
           {{
             lastUpdatedSeconds > 59
               ? rtf.format(-Math.floor(lastUpdatedSeconds / 60), 'minutes')
               : rtf.format(-lastUpdatedSeconds, 'seconds')
           }}
-        </span>
-      </v-sheet>
+        </v-col>
+      </v-row>
     </v-card-title>
 
     <v-card-text v-if="packageCount.building > 0 || packageCount.queued > 0" class="d-flex">
diff --git a/frontend/src/components/MainNav.vue b/frontend/src/components/MainNav.vue
index 5010afc..275baa1 100644
--- a/frontend/src/components/MainNav.vue
+++ b/frontend/src/components/MainNav.vue
@@ -4,7 +4,9 @@ import BuildStats from '@/components/BuildStats.vue'
 
 <template>
   <v-app-bar color="#191c2a" style="background: #0d1538">
-    <v-app-bar-title style="margin-left: 0 !important">
+    <v-container style="max-width: 1440px">
+      <v-row>
+      <v-app-bar-title style="align-self: center">
       <span style="font-size: 20px">
         ALHP Status
         <a
@@ -15,11 +17,11 @@ import BuildStats from '@/components/BuildStats.vue'
           <i class="fa fa-gitea"></i>
         </a>
       </span>
-    </v-app-bar-title>
+      </v-app-bar-title>
 
-    <template v-slot:append>
       <build-stats />
-    </template>
+      </v-row>
+    </v-container>
   </v-app-bar>
 </template>