Merge pull request #266 from karlomikus/develop

Bugfix release

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v3.5.1
+## Fixed
+- Added missing stats tile: Bar shelf ingredients
+- Fixed missing checkmark in ingredient finder
+- Fixed site logo not updating on bar update
+
 # v3.5.0
 ## New
 - Show prices in cocktail details
@@ -7,6 +13,15 @@
     - This will add a new menu category with all menus from bar shelf
 - You can now export menu as CSV
 - Add "Clear category" action to menu category
+- Added more amounts to amount suggestions
+
+## Changes
+- Public menu now uses thumbnail images
+- Updated maintenance mode page
+
+## Fixes
+- Calories and alcohol units now update with the recipe scaling
+- Added missing translations
 
 # v3.4.1
 ## Fixes

docker/nginx.conf

@@ -4,6 +4,7 @@ events { worker_connections 1024; }
 
 http {
     include mime.types;
+
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;

src/api/BarAssistantClient.ts

@@ -29,7 +29,6 @@ const authMiddleware: Middleware = {
     const scopedState = new AppState()
     accessToken = scopedState.token
     request.headers.set("Authorization", `Bearer ${accessToken}`);
-    // request.headers.set("Accept", "application/json");
     return request;
   },
 };
@@ -56,7 +55,7 @@ const rejectOnError: Middleware = {
 };
 
 const apiBaseUrl = window.srConfig.API_URL + '/api'
-const client = createClient<paths>({ baseUrl: apiBaseUrl });
+const client = createClient<paths>({ baseUrl: apiBaseUrl, headers: { "Accept": "application/json" } });
 client.use(authMiddleware);
 client.use(barIdMiddleware);
 client.use(rejectOnError);

src/assets/base.css

@@ -155,17 +155,17 @@
     --clr-accent-green: #212d25;
     --clr-accent-purple: #14101b;
 
-    --clr-gray-50: #faf9f9;
-    --clr-gray-100: #f5f4f4;
-    --clr-gray-200: #ebebea;
-    --clr-gray-300: #d6d3d2;
-    --clr-gray-400: #bbb6b4;
-    --clr-gray-500: #9b9492;
-    --clr-gray-600: #6a6461;
-    --clr-gray-700: #605a58;
-    --clr-gray-800: #504a49;
-    --clr-gray-900: #433f3d;
-    --clr-gray-950: #282625;
+    --clr-gray-50: #f9f9fa;
+    --clr-gray-100: #f5f4f5;
+    --clr-gray-200: #eaeaeb;
+    --clr-gray-300: #d3d2d6;
+    --clr-gray-400: #b7b4bb;
+    --clr-gray-500: #94929b;
+    --clr-gray-600: #64616a;
+    --clr-gray-700: #5a5860;
+    --clr-gray-800: #4c4950;
+    --clr-gray-900: #413d43;
+    --clr-gray-950: #272528;
 }
 
 *,

src/assets/dropdown.css

@@ -8,7 +8,7 @@
 
 .dropdown-menu {
     background-color: #fff;
-    padding: 8px;
+    padding: 0.5rem;
     border-radius: var(--radius-3);
     display: flex;
     flex-direction: column;

src/assets/forms.css

@@ -28,19 +28,23 @@
     --form-clr-label: var(--clr-gray-200);
 }
 
-@media (max-width: 450px) {
-    .form-label {
-        font-size: 0.85rem;
-    }
-}
-
 .form-label--required::after {
     content: '•';
     font-size: 1rem;
     color: rgb(202, 13, 39);
     text-shadow: 0 0 3px red;
 }
 
+@media (max-width: 450px) {
+    .form-label {
+        font-size: 0.85rem;
+    }
+
+    .form-label--required::after {
+        font-size: 0.85rem;
+    }
+}
+
 .form-input,
 .form-select {
     --form-clr-text: var(--clr-gray-800);

src/components/Bar/BarForm.vue

@@ -61,6 +61,7 @@ import PageHeader from './../PageHeader.vue'
 import slug from 'slug'
 import BarAssistantClient from '@/api/BarAssistantClient'
 import ImageUpload from '../ImageUpload.vue'
+import { barBus } from '@/composables/eventBus'
 
 export default {
     components: {
@@ -166,6 +167,7 @@ export default {
                     appState.setBar(resp.data)
                     this.isLoading = false
                     this.$toast.default(this.$t('bars.add-success', { name: this.bar.name }))
+                    barBus.emit('barUpdated', resp.data)
                     this.$router.push({ name: 'bars' })
                 }).catch(e => {
                     this.isLoading = false

src/components/Bar/BarIndex.vue

@@ -25,7 +25,7 @@
                             {{ getRoleName(bar.access.role_id) }}
                             <template v-if="bar.created_user.id == appState.user.id">&middot; Owner</template>
                         </span>
-                        <h4 class="bar__title">{{ bar.name }}</h4>
+                        <a href="#" @click.prevent="selectBar(bar)"><h4 class="bar__title">{{ bar.name }}</h4></a>
                         <p class="bar__owner">{{ $t('created-by') }} {{ bar.created_user.name }} &middot;
                             <DateFormatter :date="bar.created_at" />
                         </p>

src/components/Cocktail/CocktailForm.vue

@@ -21,11 +21,14 @@
                 <p class="form-input-hint">{{ $t('field-supports-md') }}</p>
             </div>
         </div>
-        <h3 class="form-section-title">{{ $t('media') }}</h3>
-        <SubscriptionCheck>Subscribe to "Mixologist" plan to upload more than one cocktail recipe image!</SubscriptionCheck>
-        <ImageUpload ref="imagesUpload" :images="cocktail.images" :max-images="10" />
         <h3 class="form-section-title">{{ $t('ingredient.ingredients') }}</h3>
         <div class="block-container block-container--padded block-container--inset">
+            <div v-show="cocktail.ingredients.length === 0" class="cocktail-form__ingredients__onboard">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+                    <path d="m15.139 7.813 4.638 18.29h8.446l4.638-18.29ZM19.723 29.861l-4.7 10.674 8.977-.02 8.977.02-4.7-10.674-3.619.002h-1.316zM18.88 26.61v2.997h10.24V26.61z" style="fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+                </svg>
+                <p>Here you can manage this cocktail's ingredients and amounts. Start by adding your first ingredient.</p>
+            </div>
             <ul v-show="cocktail.ingredients.length > 0" class="cocktail-form__ingredients" style="margin-bottom: 20px;">
                 <li v-for="ing in cocktail.ingredients" :key="ing.ingredient.id" class="block-container" :data-id="ing.ingredient.id">
                     <div class="drag-handle"></div>
@@ -63,14 +66,16 @@
                     </div>
                 </li>
             </ul>
-            <SaltRimDialog v-model="showDialog">
-                <template #trigger>
-                    <button class="button button--dark" type="button" @click="addIngredient">{{ $t('ingredient.add') }}</button>
-                </template>
-                <template #dialog>
-                    <IngredientModal :cocktail-ingredient="cocktailIngredientForEdit" @close="showDialog = false" />
-                </template>
-            </SaltRimDialog>
+            <div style="text-align: center;">
+                <SaltRimDialog v-model="showDialog">
+                    <template #trigger>
+                        <button class="button button--dark" type="button" @click="addIngredient">{{ $t('ingredient.add') }}</button>
+                    </template>
+                    <template #dialog>
+                        <IngredientModal :cocktail-ingredient="cocktailIngredientForEdit" @close="showDialog = false" />
+                    </template>
+                </SaltRimDialog>
+            </div>
         </div>
         <SaltRimDialog v-model="showSubstituteDialog">
             <template #trigger>
@@ -80,6 +85,9 @@
                 <SubstituteModal :value="cocktailIngredientForSubstitutes" @close="showSubstituteDialog = false" />
             </template>
         </SaltRimDialog>
+        <h3 class="form-section-title">{{ $t('media') }}</h3>
+        <SubscriptionCheck>Subscribe to "Mixologist" plan to upload more than one cocktail recipe image!</SubscriptionCheck>
+        <ImageUpload ref="imagesUpload" :images="cocktail.images" :max-images="10" />
         <h3 class="form-section-title">{{ $t('additional-information') }}</h3>
         <div class="block-container block-container--padded">
             <div class="form-group">
@@ -458,4 +466,19 @@ export default {
     gap: var(--gap-size-3);
     margin-top: 0.5rem;
 }
+
+.cocktail-form__ingredients__onboard {
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+.cocktail-form__ingredients__onboard p {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.cocktail-form__ingredients__onboard svg {
+    height: 64px;
+    stroke: var(--clr-gray-700);
+}
 </style>

src/components/Cocktail/IngredientModal.vue

@@ -25,7 +25,6 @@ const props = defineProps<{
 const originalCocktailingredient = JSON.parse(JSON.stringify(props.cocktailIngredient)) as CocktailIngredient
 const localCocktailingredient = ref(props.cocktailIngredient)
 const isLoading = ref(false)
-const hasVariableAmount = ref(props.cocktailIngredient.amount_max != null)
 
 localCocktailingredient.value.amount = UnitHandler.convertFromTo(localCocktailingredient.value.units, localCocktailingredient.value.amount, appState.defaultUnit)
 if (localCocktailingredient.value.amount_max) {
@@ -57,7 +56,10 @@ function selectIngredient(item: FinderIngredient): void {
     <form @submit.prevent="save">
         <OverlayLoader v-if="isLoading" />
         <div class="dialog-title">{{ t('ingredient.title') }}</div>
-        <IngredientFinder :cocktail-ingredient="localCocktailingredient" @ingredient-selected="selectIngredient"></IngredientFinder>
+        <p style="margin: 0 0 1rem 0;">
+            {{ t('ingredient.units-help') }}
+        </p>
+        <IngredientFinder :selected-ingredients="[localCocktailingredient.ingredient.id]" @ingredient-selected="selectIngredient"></IngredientFinder>
         <div class="selected-ingredient">
             <small>{{ t('ingredient.dialog.current') }}:</small>
             <p>{{ localCocktailingredient.ingredient.name }}</p>
@@ -66,19 +68,12 @@ function selectIngredient(item: FinderIngredient): void {
             <input v-model="localCocktailingredient.optional" type="checkbox">
             <span>{{ t('ingredient.dialog.optional-checkbox') }}</span>
         </label>
-        <label class="form-checkbox">
-            <input v-model="hasVariableAmount" type="checkbox">
-            <span>{{ t('ingredient.has-variable-amount') }}</span>
-        </label>
-        <p style="margin: 0.5rem 0;">
-            {{ t('ingredient.units-help') }}
-        </p>
         <div class="ingredient-form-group">
             <div class="form-group">
                 <label class="form-label form-label--required" for="ingredient-amount">{{ t('amount') }}:</label>
                 <AmountInput id="ingredient-amount" v-model="localCocktailingredient.amount" required></AmountInput>
             </div>
-            <div v-if="hasVariableAmount" class="form-group">
+            <div class="form-group">
                 <label class="form-label" for="ingredient-amount-max">{{ t('amount') }} max:</label>
                 <AmountInput id="ingredient-amount-max" v-model="localCocktailingredient.amount_max"></AmountInput>
             </div>
@@ -125,13 +120,15 @@ function selectIngredient(item: FinderIngredient): void {
 
 .ingredient-form-group {
     margin-top: 1rem;
+    margin-bottom: 1rem;
     display: flex;
     flex-wrap: wrap;
     gap: var(--gap-size-1);
 }
 
 .ingredient-form-group .form-group {
     flex-basis: 150px;
+    margin: 0;
 }
 
 .ingredient-form-group .form-group:last-child {

src/components/Cocktail/SubstituteModal.vue

@@ -3,7 +3,7 @@
         <OverlayLoader v-if="isLoading" />
         <div class="dialog-title">{{ $t('ingredient.dialog.select-substitutes') }}</div>
         <p style="margin-bottom: 1rem;">{{ $t('ingredient.dialog.select-substitutes-for', {name: cocktailIngredient.ingredient.name}) }}</p>
-        <IngredientFinder @ingredient-selected="selectIngredient"></IngredientFinder>
+        <IngredientFinder :selected-ingredients="selectedSubstitutes.map(s => s.ingredient.id)" @ingredient-selected="selectIngredient"></IngredientFinder>
         <div class="substitutes">
             <h4>{{ $t('substitutes') }}:</h4>
             <div v-for="(substitute, index) in selectedSubstitutes" :key="substitute.ingredient.id" class="substitutes__substitute">

src/components/ImageUpload.vue

@@ -163,8 +163,9 @@ async function save() {
     <div class="block-container block-container--padded block-container--inset image-upload">
         <OverlayLoader v-if="isLoading" />
         <div class="image-upload__images" ref="imageList">
-            <div v-if="images.length == 0">
-                No images attached.
+            <div v-if="images.length == 0" class="image-upload__images__onboard">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM72,56H216v62.75l-10.07-10.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L72,109.37ZM184,200H40V88H56v80a16,16,0,0,0,16,16H184Zm32-32H72V132l36-36,49.66,49.66a8,8,0,0,0,11.31,0L194.63,120,216,141.38V168ZM160,84a12,12,0,1,1,12,12A12,12,0,0,1,160,84Z"></path></svg>
+                <p>No images attached. Start by uploading your first image.</p>
             </div>
             <div class="block-container block-container--padded image-upload__images__item" v-for="(img, idx) in images" :key="idx" :data-id="img.fileName">
                 <div class="drag-handle"></div>
@@ -230,4 +231,22 @@ async function save() {
         gap: var(--gap-size-2);
     }
 }
+
+.image-upload__actions {
+    text-align: center;
+}
+
+.image-upload__images__onboard {
+    text-align: center;
+}
+
+.image-upload__images__onboard p {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.image-upload__images__onboard svg {
+    height: 64px;
+    fill: var(--clr-gray-700);
+}
 </style>

src/components/Ingredient/IngredientForm.vue

@@ -50,21 +50,20 @@
         <h3 class="form-section-title">{{ $t('recipe-matching') }}</h3>
         <div class="block-container block-container--padded">
             <div class="form-group">
-                <SaltRimCheckbox id="parent-ingredient-checkbox" v-model="isParent" :label="$t('ingredient.is-variety')" :description="$t('ingredient.variety-note')"></SaltRimCheckbox>
+                <SaltRimCheckbox id="parent-ingredient-checkbox" v-model="isParent" :label="$t('ingredient.is-variety')" :description="'[EXPERIMENTAL] ' + $t('ingredient.variety-note')"></SaltRimCheckbox>
             </div>
             <div v-show="isParent" class="form-group">
                 <IngredientFinder v-show="ingredient.parent_ingredient == null" v-model="ingredient.parent_ingredient" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
                 <div v-if="ingredient.parent_ingredient" style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-                    <button type="button" class="button button--outline">{{ ingredient.parent_ingredient.name }}</button>
-                    <button type="button" class="button button--dark" @click="ingredient.parent_ingredient = null">{{ $t('remove') }}</button>
+                    {{ ingredient.parent_ingredient.name }} &middot; <a href="#" @click.prevent="ingredient.parent_ingredient = null">{{ $t('remove') }}</a>
                 </div>
             </div>
             <div class="form-group">
                 <SaltRimCheckbox id="complex-ingredient-checkbox" v-model="isComplex" :label="$t('ingredient.is-complex')" :description="$t('ingredient.complex-note')"></SaltRimCheckbox>
             </div>
             <div v-show="isComplex" class="ingredient-form__complex-ingredients">
                 <div>
-                    <IngredientFinder @ingredient-selected="selectIngredientPart" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
+                    <IngredientFinder :selected-ingredients="ingredient.ingredient_parts.map(i => i.id)" @ingredient-selected="selectIngredientPart" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
                 </div>
                 <div>
                     <ul v-if="ingredient.ingredient_parts.length > 0" class="block-container block-container--inset ingredient-form__complex-ingredients__list">
@@ -79,6 +78,12 @@
         <h3 class="form-section-title">{{ $t('price.prices') }}</h3>
         <div class="block-container block-container--padded block-container--inset ingredient-prices">
             <template v-if="priceCategories.length > 0">
+                <div v-show="ingredient.prices.length === 0" class="ingredient-prices__onboard">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+                        <path d="M184,89.57V84c0-25.08-37.83-44-88-44S8,58.92,8,84v40c0,20.89,26.25,37.49,64,42.46V172c0,25.08,37.83,44,88,44s88-18.92,88-44V132C248,111.3,222.58,94.68,184,89.57ZM232,132c0,13.22-30.79,28-72,28-3.73,0-7.43-.13-11.08-.37C170.49,151.77,184,139,184,124V105.74C213.87,110.19,232,122.27,232,132ZM72,150.25V126.46A183.74,183.74,0,0,0,96,128a183.74,183.74,0,0,0,24-1.54v23.79A163,163,0,0,1,96,152,163,163,0,0,1,72,150.25Zm96-40.32V124c0,8.39-12.41,17.4-32,22.87V123.5C148.91,120.37,159.84,115.71,168,109.93ZM96,56c41.21,0,72,14.78,72,28s-30.79,28-72,28S24,97.22,24,84,54.79,56,96,56ZM24,124V109.93c8.16,5.78,19.09,10.44,32,13.57v23.37C36.41,141.4,24,132.39,24,124Zm64,48v-4.17c2.63.1,5.29.17,8,.17,3.88,0,7.67-.13,11.39-.35A121.92,121.92,0,0,0,120,171.41v23.46C100.41,189.4,88,180.39,88,172Zm48,26.25V174.4a179.48,179.48,0,0,0,24,1.6,183.74,183.74,0,0,0,24-1.54v23.79a165.45,165.45,0,0,1-48,0Zm64-3.38V171.5c12.91-3.13,23.84-7.79,32-13.57V172C232,180.39,219.59,189.4,200,194.87Z"></path>
+                    </svg>
+                    <p>Here you can manage this ingredient's prices. Start by adding your first price.</p>
+                </div>
                 <div v-for="(price, idx) in ingredient.prices" :key="idx" class="block-container ingredient-prices__price">
                     <CloseButton @closed="removeIngredientPrice(price)"></CloseButton>
                     <div class="form-group" style="width: 100%; max-width: 300px;">
@@ -108,7 +113,7 @@
                         <input :id="'ingredient-price-description-' + idx" v-model="price.description" type="text" class="form-input">
                     </div>
                 </div>
-                <div>
+                <div style="text-align: center;">
                     <button class="button button--dark" type="button" @click="addIngredientPrice">{{ $t('prices.add') }}</button>
                 </div>
             </template>
@@ -362,4 +367,18 @@ export default {
 .ingredient-prices__price .form-group {
     margin: 0;
 }
+
+.ingredient-prices__onboard {
+    text-align: center;
+}
+
+.ingredient-prices__onboard p {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.ingredient-prices__onboard svg {
+    height: 64px;
+    fill: var(--clr-gray-700);
+}
 </style>