From f1812d680e7f9225a0d9d5310876caff9af68a4b Mon Sep 17 00:00:00 2001
From: Dehalion <mail_github@pdav.at>
Date: Tue, 20 Dec 2022 19:16:10 +0000
Subject: [PATCH] Display ingredients and recipe side by side

This tries to improve PR#1628 from
adamschmalhofer:feature-recipe-side-by-side
to implement Feature Request:
Recipe fullscreen ingredients and preparation both visible #2051
---
 public/css/grocy.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/public/css/grocy.css b/public/css/grocy.css
index 45c4588f..02155df3 100755
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -662,3 +662,24 @@ canvas.drawingBuffer {
 	pointer-events: none;
 	opacity: 0.5;
 }
+
+@media only screen and (min-width: 60rem) {
+	/* See ingredients and recipe side by side */
+
+	.fullscreen [id^=recipe-] .tab-content {
+		display: flex;
+	}
+
+	.fullscreen [id^=recipe-] .nav-tabs {
+		display: none;
+	}
+
+	.fullscreen [id^=recipe-] [id^=ingredients-] {
+		width: 20rem;
+		padding-right: 3rem;
+	}
+
+	.fullscreen [id^=recipe-] [id^=prep-] {
+		display: inline;
+	}
+}
\ No newline at end of file