fix: Update headline font weights and margin in recipe view

Signed-off-by: Sebastian Fey <[email protected]>
nextcloud · Feb 13, 2024 · 3005528 · 3005528
1 parent 48b0c1e
commit 3005528
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
@@ -22,6 +22,10 @@
 	display: flex;
 }
 
+.inline-flex {
+	display: inline-flex;
+}
+
 .flex-col {
 	flex-direction: column;
 }
@@ -155,6 +159,14 @@
 	}
 }
 
+/** Height */
+
+.h-0 {
+	height: 0;
+}
+
+/** Width */
+
 .w-32
 {
 	width: 8rem;

diff --git a/src/components/RecipeView/RecipeView.vue b/src/components/RecipeView/RecipeView.vue
@@ -144,6 +144,20 @@
                                     <ContentCopyIcon :size="20" />
                                 </template>
                             </NcButton>
+                            <div class="inline-flex h-0 align-items-center">
+                                <NcButton
+                                    v-if="scaledIngredients.length"
+                                    class="copy-ingredients print-hidden"
+                                    :type="'tertiary'"
+                                    aria-label="t('cookbook', 'Copy ingredients to the clipboard')"
+                                    :title="t('cookbook', 'Copy ingredients')"
+                                    @click="copyIngredientsToClipboard"
+                                >
+                                    <template #icon>
+                                        <ContentCopyIcon :size="20" />
+                                    </template>
+                                </NcButton>
+                            </div>
                         </h3>
                         <ul v-if="scaledIngredients.length">
                             <RecipeIngredient
@@ -763,10 +777,12 @@ h2 {
 h3 {
     font-size: 1.5rem;
     line-height: 1.8rem;
-    margin: 12px 0 20px;
+    margin: 12px 0 0.6em;
+    font-weight: 200;
 
     @media (min-width: 1200px) {
         font-size: 1.4rem;
+        font-weight: 250;
         line-height: 1.7rem;
     }
 }