Safari fixes

CHANGELOG.md

@@ -1,5 +1,21 @@
-# v3.5.2
+# v3.6.1
 ## Fixed
+- Fixed missing theme toggle icon on iOS Safari
+- Fixed custom radio buttons overflowing on iOS Safari
+- Fixed custom radio buttons having wrong color on iOS Safari
+- Fixed selecting a suggested tag not working on iOS Safari
+- Fixed missing icons on shopping list actions on iOS Safari
+
+# v3.6.0
+## New
+- Cocktail import now shows similar cocktails to prevent possible duplicates
+- You can now drag files into the image upload component
+
+## Changes
+- Search tokens are now always fetched from API instead of local storage
+
+## Fixed
+- Fixed some component warnings in shelf
 - Fixed broken layout on cocktail/ingredient details page
 
 # v3.5.1

docker/config.js

@@ -10,3 +10,4 @@ window.srConfig.BILLING_ENABLED = "$BILLING_ENABLED" === 'true';
 window.srConfig.BILLING_ENV = "$BILLING_ENV";
 window.srConfig.ANALYTICS_HOST = "$ANALYTICS_HOST";
 window.srConfig.ALLOW_REGISTRATION = "$ALLOW_REGISTRATION";
+window.srConfig.SENTRY_DSN = "$SENTRY_DSN";

package.json

@@ -14,6 +14,7 @@
     "@floating-ui/vue": "^1.1.5",
     "@meilisearch/instant-meilisearch": "^1.0.0",
     "@paddle/paddle-js": "^1.2.1",
+    "@sentry/vue": "^8.47.0",
     "@types/sortablejs": "^1.15.8",
     "@vueuse/core": "^11.0.3",
     "cropperjs": "^1.6.1",

src/components/Cocktail/CocktailImport.vue

@@ -696,6 +696,7 @@ async function getBar(barId: number): Promise<void> {
 .import-types {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
     gap: var(--gap-size-2);
 }
 

src/components/SaltRimRadio.vue

@@ -99,6 +99,10 @@ export default {
     text-align: left;
 }
 
+.sr-radio__content h3 {
+    color: var(--clr-body-font);
+}
+
 .sr-radio__content p {
     color: var(--clr-description);
     font-size: 0.85rem;

src/components/Settings/BillingInfo.vue

@@ -274,6 +274,7 @@ export default {
     display: grid;
     gap: var(--gap-size-3);
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
     margin: 1rem 0;
 }
 

src/components/ShoppingList/ShoppingListIndex.vue

@@ -164,4 +164,9 @@ async function shareFromFormat(format: string) {
     padding: 0;
     margin: 0;
 }
+
+.shopping-list__quantity-actions svg {
+    width: 24px;
+    height: 24px;
+}
 </style>

src/components/TagSelector.vue

@@ -163,7 +163,7 @@ function handleBlur(e) {
                 <div v-show="filteredOptions.length > 0 && showDropdown" ref="content" class="floating-element" :style="floatingStyles">
                     <div class="dropdown-menu dropdown-menu--tags">
                         <span class="dropdown-menu__title">{{ $t('suggestions') }}:</span>
-                        <a v-for="option in filteredOptions" :key="option.name" class="dropdown-menu__item" :class="{'dropdown-menu__item--focused': currentFocusedDropdownOption == option}" href="#" @click.prevent="selectOption(option[props.labelKey])" @mouseover="currentFocusedDropdownOption = option">
+                        <a v-for="option in filteredOptions" :key="option.name" class="dropdown-menu__item" tabindex="0" :class="{'dropdown-menu__item--focused': currentFocusedDropdownOption == option}" href="#" @click.prevent="selectOption(option[props.labelKey])" @mouseover="currentFocusedDropdownOption = option">
                             {{ option.name }}
                         </a>
                     </div>

src/components/ThemeToggle.vue

@@ -1,12 +1,12 @@
 <template>
-    <button type="button" class="header-bar__navigation__link" @click="toggleTheme">
+    <a href="#" class="header-bar__navigation__link" @click="toggleTheme">
         <svg v-show="current == 'dark'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path>
         </svg>
         <svg v-show="current == 'light'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path>
         </svg>
-    </button>
+    </a>
 </template>
 
 <script>

src/main.js

@@ -10,6 +10,7 @@ import AppState from './AppState.js'
 import Plausible from 'plausible-tracker'
 import { registerSW } from 'virtual:pwa-register'
 import { register as registerSwiperElements } from 'swiper/element/bundle'
+import * as Sentry from "@sentry/vue";
 
 import en_US from './locales/en-US'
 import hr_HR from './locales/hr-HR'
@@ -45,6 +46,16 @@ if (userSelectedTheme == 'dark' && !document.body.classList.contains('dark-theme
 }
 
 const app = createApp(App)
+
+if (window.srConfig.SENTRY_DSN && window.srConfig.SENTRY_DSN != '') {
+    Sentry.init({
+        app,
+        release: window.srConfig.VERSION,
+        dsn: window.srConfig.SENTRY_DSN,
+        integrations: [],
+    });
+}
+
 const i18n = createI18n({
     legacy: false,
     locale: userSelectedLocale,