Safari: fix popup size

IITC-CE · Sep 14, 2022 · feced0b · feced0b
1 parent 1d24f8e
commit feced0b
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 8 deletions.
diff --git a/public/assets/images/IITC-black-horizontally.webp b/public/assets/images/IITC-black-horizontally.webp
diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -1,6 +1,6 @@
 <!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
 <template>
-  <div id="app">
+  <div id="app" :class="{ is_safari: is_safari }">
     <section class="section main-menu">
       <SectionMainMenu
         v-bind:categories="categories"
@@ -39,15 +39,27 @@ export default {
       categories: {},
       plugins: {},
       plugins_flat: {},
-      category_name: ""
+      category_name: "",
+      is_safari: this.detect_safari()
     };
   },
   components: { SectionMainMenu, SectionOptions, SectionPlugins, Message },
-  async mounted() {
+  beforeCreate() {
     document.body.id = "main-menu";
+  },
+  async mounted() {
     await data.init(this);
     await data.onChangedListener(this);
     await data.onMessageListener(this);
+  },
+  methods: {
+    detect_safari: function() {
+      let userAgentString = navigator.userAgent;
+      let chromeAgent = userAgentString.indexOf("Chrome") > -1;
+      let safariAgent = userAgentString.indexOf("Safari") > -1;
+
+      return safariAgent && !chromeAgent;
+    }
   }
 };
 </script>
@@ -70,6 +82,13 @@ body {
   font-size: 20px;
 }
 
+#app {
+  width: 315px;
+  height: 513px;
+  overflow: hidden;
+  /*transform: translateZ(0); * hack of popup size in safari *!*/
+}
+
 object {
   pointer-events: none;
 }
@@ -92,11 +111,13 @@ object {
  */
 .section {
   display: block;
+  background: #fff;
   position: absolute;
   top: 0;
   margin-left: 100vw;
   transition: margin-left 0.15s ease-in-out;
   width: 100vw;
+  height: 100vh;
 }
 .section.main-menu {
   margin-left: -100vw;
@@ -110,6 +131,24 @@ body#plugins .section.plugins {
   margin-left: 0;
 }
 
+#app.is_safari .section {
+  display: none;
+  width: 100vw;
+}
+
+#app.is_safari .section.main-menu {
+  display: none;
+}
+
+body#main-menu #app.is_safari .section.main-menu {
+  display: block;
+}
+
+body#options #app.is_safari .section.options,
+body#plugins #app.is_safari .section.plugins {
+  display: block;
+}
+
 :root {
   --color-white: #fff;
   --color-blue: #0074d9;

diff --git a/src/popup/components/Message.vue b/src/popup/components/Message.vue
@@ -57,4 +57,15 @@ export default {
 .message.opened {
   bottom: 0;
 }
+
+#app.is_safari .message {
+  display: none;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+#app.is_safari .message.opened {
+  display: block;
+}
 </style>
diff --git a/src/popup/components/Title.vue b/src/popup/components/Title.vue
@@ -5,11 +5,10 @@
       class="title__logo-wrapper title__button"
       v-on:click.prevent="openIITC"
     >
-      <object
+      <img
         class="title__logo"
-        type="image/svg+xml"
-        data="/assets/images/IITC-black-horizontally.svg"
-      ></object>
+        src="/assets/images/IITC-black-horizontally.webp"
+      />
       <ProgressBar></ProgressBar>
     </div>
     <div class="title__button" v-on:click="openOptions">
@@ -53,9 +52,10 @@ export default {
 }
 .title__logo {
   height: 50px;
-  width: 100%;
+  width: 106px;
   z-index: 3;
   position: relative;
+  left: calc(50% - 106px / 2);
 }
 .title__button {
   color: var(--color-white);