From bc81e8403de3404c979ee885146f28c68ca09b4b Mon Sep 17 00:00:00 2001
From: Aaron Axvig <aaron@axvigs.com>
Date: Mon, 3 Aug 2026 22:19:54 -0500
Subject: [PATCH] Add configurable stacked recipe layout

---
 MMM-NextcloudCookbook.css | 8 ++++++++
 MMM-NextcloudCookbook.js  | 4 +++-
 README.md                 | 9 ++++++++-
 package-lock.json         | 4 ++--
 package.json              | 2 +-
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/MMM-NextcloudCookbook.css b/MMM-NextcloudCookbook.css
index 4689eeb..91256fa 100644
--- a/MMM-NextcloudCookbook.css
+++ b/MMM-NextcloudCookbook.css
@@ -79,6 +79,14 @@
 }
 
 .MMM-NextcloudCookbook .ncc-columns {
+  display: block;
+}
+
+.MMM-NextcloudCookbook .ncc-layout-stacked section:first-child {
+  margin-bottom: calc(42px * var(--ncc-type-scale));
+}
+
+.MMM-NextcloudCookbook .ncc-layout-side-by-side {
   display: grid;
   grid-template-columns: minmax(260px, 0.8fr) minmax(400px, 1.4fr);
   gap: 42px;
diff --git a/MMM-NextcloudCookbook.js b/MMM-NextcloudCookbook.js
index 26289d6..6b78200 100644
--- a/MMM-NextcloudCookbook.js
+++ b/MMM-NextcloudCookbook.js
@@ -5,6 +5,7 @@ Module.register("MMM-NextcloudCookbook", {
     controlPath: "/MMM-NextcloudCookbook/control",
     controlUrl: "",
     animationSpeed: 400,
+    layout: "stacked",
     shareUrl: "",
     sharePassword: ""
   },
@@ -156,7 +157,8 @@ Module.register("MMM-NextcloudCookbook", {
     article.appendChild(header);
 
     const columns = document.createElement("div");
-    columns.className = "ncc-columns";
+    const layout = this.config.layout === "side-by-side" ? "side-by-side" : "stacked";
+    columns.className = `ncc-columns ncc-layout-${layout}`;
 
     const ingredients = document.createElement("section");
     const ingredientsTitle = document.createElement("h2");
diff --git a/README.md b/README.md
index 3e52382..d016a5d 100644
--- a/README.md
+++ b/README.md
@@ -16,11 +16,18 @@ link; it should look like `https://cloud.example.test/s/SHARE_TOKEN`.
   position: "bottom_right",
   config: {
     shareUrl: "https://cloud.example.test/s/SHARE_TOKEN",
-    controlUrl: "http://mirror.example.test:8080/MMM-NextcloudCookbook/control"
+    controlUrl: "http://mirror.example.test:8080/MMM-NextcloudCookbook/control",
+    layout: "stacked"
   }
 }
 ```
 
+`layout` controls the full-screen recipe arrangement. Its default value,
+`"stacked"`, displays the ingredients above the instructions. Set it to
+`"side-by-side"` to display ingredients and instructions in two columns. Both
+layouts automatically enlarge the recipe to make the best use of the available
+screen while keeping all of its content visible.
+
 The configured `position` controls where the QR controller appears during the
 normal MagicMirror layout. When a recipe is activated, the module displays a
 fixed full-screen overlay regardless of that region. Exiting recipe mode
diff --git a/package-lock.json b/package-lock.json
index 58938db..1409d91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mmm-nextcloud-cookbook",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mmm-nextcloud-cookbook",
-      "version": "0.1.2",
+      "version": "0.2.0",
       "dependencies": {
         "fast-xml-parser": "5.10.1",
         "qrcode": "1.5.4"
diff --git a/package.json b/package.json
index b2ce630..af29649 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mmm-nextcloud-cookbook",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": true,
   "description": "Display recipes from a Nextcloud Cookbook share on MagicMirror",
   "main": "node_helper.js",