fix(core): fix safari favicon and tooltips

include fonts in service worker
simonwep · Jul 31, 2023 · b41e5e5 · b41e5e5
1 parent 224bc0f
commit b41e5e5
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -1,39 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
-        <!-- Theme colors -->
-        <meta name="theme-color" content="#1f2026" data-meta="theme-color"/>
-        <meta name="msapplication-navbutton-color" content="#1f2026" data-meta="theme-color"/>
+  <!-- Theme colors -->
+  <meta name="theme-color" content="#1f2026" data-meta="theme-color" />
+  <meta name="msapplication-navbutton-color" content="#1f2026" data-meta="theme-color" />
 
-        <!-- Hide status bar -->
-        <meta name="mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <!-- Hide status bar -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
-        <!-- Icons -->
-        <link rel="icon" href="/favicon.svg"/>
-        <link rel="mask-icon" href="/favicon.svg" color="#fff">
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
+  <!-- Icons -->
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="mask-icon" href="/favicon-maskable.svg" type="image/svg+xml" color="#3f5df3">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
-        <!-- SEO -->
-        <meta name="keywords" content="budget, finances, money"/>
-        <meta name="description" content="A simplistic, straight-forward budgeting tool."/>
-        <meta name="subject" content="Budgeting">
-        <meta name="topic" content="Budgeting">
-        <meta name="summary" content="A simplistic, straight-forward budgeting tool.">
-        <meta name="copyright" content="Simon Reinisch">
-        <meta name="owner" content="Simon Reinisch">
-        <meta name="robots" content="index, follow"/>
-        <meta name="url" content="https://budget.reinisch.io/">
-        <meta name="revisit-after" content="7 days">
+  <!-- SEO -->
+  <meta name="keywords" content="budget, finances, money" />
+  <meta name="description" content="A simplistic, straight-forward budgeting tool." />
+  <meta name="subject" content="Budgeting">
+  <meta name="topic" content="Budgeting">
+  <meta name="summary" content="A simplistic, straight-forward budgeting tool.">
+  <meta name="copyright" content="Simon Reinisch">
+  <meta name="owner" content="Simon Reinisch">
+  <meta name="robots" content="index, follow" />
+  <meta name="url" content="https://budget.reinisch.io/">
+  <meta name="revisit-after" content="7 days">
 
-        <title>Ocular</title>
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
+  <title>Ocular</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/public/favicon-maskable.svg b/public/favicon-maskable.svg
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/app/components/base/context-menu/ContextMenu.vue b/src/app/components/base/context-menu/ContextMenu.vue
@@ -134,6 +134,7 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  -webkit-backdrop-filter: var(--context-menu-backdrop);
   backdrop-filter: var(--context-menu-backdrop);
   box-shadow: var(--context-menu-shadow);
   border-radius: var(--border-radius-m);

diff --git a/src/app/components/base/dialog/Dialog.vue b/src/app/components/base/dialog/Dialog.vue
@@ -73,6 +73,7 @@ onMounted(() => {
 .dialog,
 .dialog[open]::backdrop {
   visibility: hidden;
+  -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   opacity: 0;
   transition:

diff --git a/src/directives/v-tooltip/vTooltip.module.scss b/src/directives/v-tooltip/vTooltip.module.scss
@@ -1,4 +1,5 @@
 .tooltip {
+  -webkit-backdrop-filter: var(--tooltip-backdrop);
   backdrop-filter: var(--tooltip-backdrop);
   padding: 4px 8px;
   font-size: var(--font-size-xs);

diff --git a/vite.config.ts b/vite.config.ts
@@ -21,6 +21,11 @@ export default defineConfig({
         defineModel: true
       }
     }),
-    VitePWA({ manifest })
+    VitePWA({
+      manifest,
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,woff2}']
+      }
+    })
   ]
 });