Update public recipe page

karlomikus · Oct 14, 2023 · 00fe199 · 00fe199
1 parent ded6f9e
commit 00fe199
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -1,4 +1,5 @@
-@import url('https://api.fonts.coollabs.io/css2?family=Alice&family=Inter:wght@400;700&family=Space+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Alice&family=Inter:wght@400;700&family=Space+Mono&display=swap');
+/* @import url('https://api.fonts.coollabs.io/css2?family=Alice&family=Inter:wght@400;700&family=Space+Mono&display=swap'); */
 
 :root {
     /* Base color scheme */

diff --git a/src/components/Cocktail/PublicRecipe.vue b/src/components/Cocktail/PublicRecipe.vue
@@ -17,8 +17,12 @@
             <div class="public-cocktail-recipe__summary__section">
                 <h3>{{ $t('ingredients.title') }}</h3>
                 <ul>
-                    <li v-for="ing in cocktail.ingredients" :key="ing.id" itemprop="recipeIngredient" :content="ing.name + ' - ' + parseIngredientAmount(ing)">
-                        <span>{{ ing.name }}</span><span class="spacer"></span><span class="amount-units">{{ parseIngredientAmount(ing) }}</span>
+                    <li v-for="ing in cocktail.ingredients" :key="ing.id" itemprop="recipeIngredient" :content="ing.name + ' - ' + printAmount(ing)">
+                        <div class="cocktail-ingredient">
+                            <span>{{ ing.name }}<template v-if="ing.note"> &middot; {{ ing.note }}</template></span>
+                            <span class="cocktail-ingredient__substitutes" v-if="ing.substitutes.length > 0">{{ $t('substitutes') }}: {{ printSubstitutes(ing.substitutes) }}</span>
+                        </div>
+                        <div class="amount-units">{{ printAmount(ing) }}</div>
                     </li>
                 </ul>
             </div>
@@ -52,6 +56,7 @@ export default {
             type: Object,
             default() {
                 return {
+                    bar: {},
                     images: []
                 }
             }
@@ -113,9 +118,14 @@ export default {
         this.currentUnit = appState.defaultUnit
     },
     methods: {
-        parseIngredientAmount(ingredient) {
+        printAmount(ingredient) {
             return UnitHandler.print(ingredient, this.currentUnit)
         },
+        printSubstitutes(substitutes) {
+            return substitutes.map(sub => {
+                return new String(sub.name + ' ' + UnitHandler.print(sub, this.currentUnit, this.servings)).trim()
+            }).join(', ')
+        }
     }
 }
 </script>
@@ -177,36 +187,20 @@ export default {
     font-family: var(--font-heading);
 }
 
-.public-cocktail-recipe h3 {
-    font-size: 0.75rem;
-    letter-spacing: 1px;
-    font-weight: var(--fw-bold);
-    color: var(--clr-gray-400);
-    text-transform: uppercase;
-    flex-basis: 120px;
-    flex-shrink: 0;
-    line-height: 2;
-}
-
 .public-cocktail-recipe__summary {
     padding: 2rem;
     display: flex;
     flex-direction: column;
     gap: var(--gap-size-3);
 }
 
-.public-cocktail-recipe__summary__section {
-    display: flex;
-    flex-direction: row;
-}
-
-@media (max-width: 450px) {
-    .public-page .public-cocktail-recipe h3 {
-        flex-basis: 100%;
-    }
-    .public-page .public-cocktail-recipe__summary__section {
-        flex-direction: column;
-    }
+.public-cocktail-recipe__summary h3 {
+    font-size: 0.75rem;
+    letter-spacing: 1px;
+    font-weight: var(--fw-bold);
+    color: var(--clr-accent-600);
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
 }
 
 .public-cocktail-recipe__content {
@@ -226,22 +220,31 @@ export default {
 .public-cocktail-recipe__summary ul {
     padding: 0;
     width: 100%;
+    list-style: none;
 }
 
 .public-cocktail-recipe__summary ul li {
+    padding: var(--gap-size-1) 0;
+    border-bottom: 1px dotted var(--clr-gray-300);
+    margin-bottom: var(--gap-size-1);
     display: flex;
-    justify-content: space-between;
-    align-items: baseline;
 }
 
-.public-cocktail-recipe__summary ul li .spacer {
-    flex-grow: 1;
-    border-bottom: 1px dotted var(--clr-gray-300);
-    margin: 0 0.5rem;
+.public-cocktail-recipe__summary .cocktail-ingredient {
+    display: flex;
+    flex-direction: column;
+}
+
+.cocktail-ingredient__substitutes {
+    font-size: 0.75rem;
+    color: var(--clr-gray-500);
 }
 
 .public-cocktail-recipe__summary ul li .amount-units {
     font-weight: var(--fw-bold);
+    margin-left: auto;
+    flex-shrink: 0;
+    text-align: right;
 }
 
 .public-cocktail-recipe__units {

diff --git a/src/components/Layout/SiteLogo.vue b/src/components/Layout/SiteLogo.vue
@@ -19,12 +19,22 @@ export default {
             appState: new AppState()
         }
     },
+    props: {
+        barName: {
+            type: String,
+            default: 'Salt Rim'
+        },
+        barSubtitle: {
+            type: String,
+            default: 'Your personal bar assistant'
+        }
+    },
     computed: {
         name() {
-            return this.appState.bar.name || 'Salt Rim'
+            return this.appState.bar.name || this.barName
         },
         description() {
-            return this.appState.bar.subtitle || 'Your personal bar assistant'
+            return this.appState.bar.subtitle || this.barSubtitle
         }
     }
 }