From c679a8a0df73c39fca2185119ac80a8f1b16745f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 26 Feb 2023 15:52:52 +0100
Subject: [PATCH] pragotron: responsywne aspect ratio

---
 src/App.vue                 |  1 +
 src/views/PragotronView.vue | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index ae3209f..e15fbe7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,6 +52,7 @@ export default defineComponent({
   flex-direction: column;
 
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 nav {
diff --git a/src/views/PragotronView.vue b/src/views/PragotronView.vue
index d145655..9238cf9 100644
--- a/src/views/PragotronView.vue
+++ b/src/views/PragotronView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pragotron">
+  <div class="pragotron" ref="pragotron">
     <div class="pragotron_content">
       <div class="filters">
         <div>
@@ -170,6 +170,16 @@ export default defineComponent({
   async created() {
     await this.fetchSceneryInfo();
     this.selectDefaultCheckpoint();
+
+    window.addEventListener('resize', (e) => {
+      const elRef = this.$refs['pragotron'] as HTMLElement;
+      if (!elRef) return;
+
+      const scale = Math.min(window.innerWidth / elRef.clientWidth, window.innerHeight / elRef.clientHeight);
+      if (scale > 1) return;
+
+      elRef.style.transform = `scale(${scale})`;
+    });
   },
 
   activated() {
@@ -420,6 +430,10 @@ export default defineComponent({
 
 /* ************** */
 
+.pragotron {
+  padding: 1em;
+}
+
 .filters {
   display: flex;
   justify-content: space-between;