adjust views for basic 2-column layout

GramyPomagamy · Aug 5, 2024 · 6d81eb6 · 6d81eb6
1 parent 3c3c9bb
commit 6d81eb6
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 114 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -38,7 +38,7 @@ const appVersion = import.meta.env.PACKAGE_VERSION
       <RouterView />
     </v-main>
 
-    <v-footer class="d-flex flex-column">
+    <v-footer class="d-flex flex-column bg-surface-variant">
       By Halamix2 &#9874; 2024 - {{ new Date().getFullYear() }}, wersja {{ appVersion }}. Halamix
       nie potrafi we frontend, a jednak to zrobił; what's your excuse?
     </v-footer>

diff --git a/src/components/CanvasItem.vue b/src/components/CanvasItem.vue
@@ -65,7 +65,7 @@ onMounted(() => {
 <template>
   <div>
     <canvas
-      :class="`cursor-grab`"
+      :class="`cursor-grab h-100 w-100`"
       @drop.prevent="canvasDrop"
       @wheel.prevent="canvasWheel"
       @mousedown.prevent="canvasMouseDown"

diff --git a/src/views/PhotoView.vue b/src/views/PhotoView.vue
@@ -219,43 +219,53 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main">
-    <h1>Miniaturka runnera na Twittera</h1>
-    <CanvasItem
-      :canvasWidth="canvasWidth"
-      :canvasHeight="canvasHeight"
-      @canvasContext="(can) => (mainCanvas = can)"
-      @updateBackground="(b) => (photo = b)"
-      @updateScale="
-        (s) => {
-          photoScale += s
-          photoScale = Math.max(photoScale, 0.01)
-        }
-      "
-      @updatePos="
-        (l, t) => {
-          photoLeft += l
-          photoTop += t
-        }
-      "
-      @updateRotation="(r) => (photoRotation = (photoRotation + r) % 360)"
-    />
-    <InputItem
-      @updateBackground="(b: string) => (photo = b)"
-      @updateRunner="(r: string) => (runner = r)"
-      @updateTitle="(t: string) => (title = t)"
-      @updateSubtitle="(s: string) => (subtitle = s)"
-      @updateCategory="(c: string) => (category = c)"
-      @updateMoney="(m: number) => (money = m)"
-      :runner="initialRunner"
-      :title="initialTitle"
-      :subtitle="initialSubtitle"
-      :category="initialCategory"
-      :enable-money="true"
-      :money="initialMoney"
-      :canvasModel="mainCanvas"
-    />
-  </div>
+  <v-container fluid class="main bg-surface">
+    <v-row>
+      <v-col>
+        <h1>Miniaturka runnera na Twittera</h1>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <CanvasItem
+          :canvasWidth="canvasWidth"
+          :canvasHeight="canvasHeight"
+          @canvasContext="(can) => (mainCanvas = can)"
+          @updateBackground="(b) => (photo = b)"
+          @updateScale="
+            (s) => {
+              photoScale += s
+              photoScale = Math.max(photoScale, 0.01)
+            }
+          "
+          @updatePos="
+            (l, t) => {
+              photoLeft += l
+              photoTop += t
+            }
+          "
+          @updateRotation="(r) => (photoRotation = (photoRotation + r) % 360)"
+        />
+      </v-col>
+      <v-col cols="12" md="4">
+        <InputItem
+          @updateBackground="(b: string) => (photo = b)"
+          @updateRunner="(r: string) => (runner = r)"
+          @updateTitle="(t: string) => (title = t)"
+          @updateSubtitle="(s: string) => (subtitle = s)"
+          @updateCategory="(c: string) => (category = c)"
+          @updateMoney="(m: number) => (money = m)"
+          :runner="initialRunner"
+          :title="initialTitle"
+          :subtitle="initialSubtitle"
+          :category="initialCategory"
+          :enable-money="true"
+          :money="initialMoney"
+          :canvasModel="mainCanvas"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <!-- <style>

diff --git a/src/views/RunnerView.vue b/src/views/RunnerView.vue
@@ -203,47 +203,52 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-container class="main">
+  <v-container fluid class="main bg-surface">
     <v-row>
-      <h1>Miniaturka runnera na Twittera</h1>
+      <v-col>
+        <h1>Miniaturka runnera na Twittera</h1>
+      </v-col>
     </v-row>
     <v-row>
-      <CanvasItem
-        :canvasWidth="canvasWidth"
-        :canvasHeight="canvasHeight"
-        @canvasContext="(can) => (mainCanvas = can)"
-        @updateBackground="(b) => (photo = b)"
-        @updateScale="
-          (s) => {
-            photoScale += s
-            photoScale = Math.max(photoScale, 0.01)
-          }
-        "
-        @updatePos="
-          (l, t) => {
-            photoLeft += l
-            photoTop += t
-          }
-        "
-        @updateRotation="(r) => (photoRotation = (photoRotation + r) % 360)"
-      />
-    </v-row>
-    <v-row>
-      <InputItem
-        @updateBackground="(b: string) => (photo = b)"
-        @updateRunner="(r: string) => (runner = r)"
-        @updateTitle="(t: string) => (title = t)"
-        @updateSubtitle="(s: string) => (subtitle = s)"
-        @updateCategory="(c: string) => (category = c)"
-        @updateMoney="(m: number) => (money = m)"
-        :runner="initialRunner"
-        :title="initialTitle"
-        :subtitle="initialSubtitle"
-        :category="initialCategory"
-        :enable-money="true"
-        :money="initialMoney"
-        :canvasModel="mainCanvas"
-      />
+      <v-col>
+        <CanvasItem
+          :class="`h-auto w-auto`"
+          :canvasWidth="canvasWidth"
+          :canvasHeight="canvasHeight"
+          @canvasContext="(can) => (mainCanvas = can)"
+          @updateBackground="(b) => (photo = b)"
+          @updateScale="
+            (s) => {
+              photoScale += s
+              photoScale = Math.max(photoScale, 0.01)
+            }
+          "
+          @updatePos="
+            (l, t) => {
+              photoLeft += l
+              photoTop += t
+            }
+          "
+          @updateRotation="(r) => (photoRotation = (photoRotation + r) % 360)"
+        />
+      </v-col>
+      <v-col cols="12" md="4">
+        <InputItem
+          @updateBackground="(b: string) => (photo = b)"
+          @updateRunner="(r: string) => (runner = r)"
+          @updateTitle="(t: string) => (title = t)"
+          @updateSubtitle="(s: string) => (subtitle = s)"
+          @updateCategory="(c: string) => (category = c)"
+          @updateMoney="(m: number) => (money = m)"
+          :runner="initialRunner"
+          :title="initialTitle"
+          :subtitle="initialSubtitle"
+          :category="initialCategory"
+          :enable-money="true"
+          :money="initialMoney"
+          :canvasModel="mainCanvas"
+        />
+      </v-col>
     </v-row>
   </v-container>
 </template>

diff --git a/src/views/YoutubeView.vue b/src/views/YoutubeView.vue
@@ -177,43 +177,53 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main">
-    <h1>Miniaturka runnera na Twittera</h1>
-    <CanvasItem
-      :canvasWidth="canvasWidth"
-      :canvasHeight="canvasHeight"
-      @canvasContext="(can) => (mainCanvas = can)"
-      @updateBackground="(b) => (photo = b)"
-      @updateScale="
-        (s) => {
-          photoScale += s
-          photoScale = Math.max(photoScale, 0.01)
-        }
-      "
-      @updatePos="
-        (l, t) => {
-          photoLeft += l
-          photoTop += t
-        }
-      "
-      @updateRotation="(r) => (photoRotation = (photoRotation + r) % 360)"
-    />
-    <InputItem
-      @updateBackground="(b: string) => (photo = b)"
-      @updateRunner="(r: string) => (runner = r)"
-      @updateTitle="(t: string) => (title = t)"
-      @updateSubtitle="(s: string) => (subtitle = s)"
-      @updateCategory="(c: string) => (category = c)"
-      @updateTime="(t: string) => (time = t)"
-      :runner="initialRunner"
-      :title="initialTitle"
-      :subtitle="initialSubtitle"
-      :category="initialCategory"
-      :enable-time="true"
-      :time="initialTime"
-      :canvasModel="mainCanvas"
-    />
-  </div>
+  <v-container fluid class="main bg-surface">
+    <v-row>
+      <v-col>
+        <h1>Miniaturka runnera na Twittera</h1>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <CanvasItem
+          :canvasWidth="canvasWidth"
+          :canvasHeight="canvasHeight"
+          @canvasContext="(can) => (mainCanvas = can)"
+          @updateBackground="(b) => (photo = b)"
+          @updateScale="
+            (s) => {
+              photoScale += s
+              photoScale = Math.max(photoScale, 0.01)
+            }
+          "
+          @updatePos="
+            (l, t) => {
+              photoLeft += l
+              photoTop += t
+            }
+          "
+          @updateRotation="(r) => (photoRotation = (photoRotation + r) % 360)"
+        />
+      </v-col>
+      <v-col cols="12" md="4">
+        <InputItem
+          @updateBackground="(b: string) => (photo = b)"
+          @updateRunner="(r: string) => (runner = r)"
+          @updateTitle="(t: string) => (title = t)"
+          @updateSubtitle="(s: string) => (subtitle = s)"
+          @updateCategory="(c: string) => (category = c)"
+          @updateTime="(t: string) => (time = t)"
+          :runner="initialRunner"
+          :title="initialTitle"
+          :subtitle="initialSubtitle"
+          :category="initialCategory"
+          :enable-time="true"
+          :time="initialTime"
+          :canvasModel="mainCanvas"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <!-- <style>