Keep recipe content clear of QR control

MMM-NextcloudCookbook.css

@@ -12,6 +12,7 @@
   overflow: hidden;
   padding: 42px 48px;
   background: #11110f;
+  text-align: left;
 }
 
 .MMM-NextcloudCookbook .ncc-qr {
@@ -46,8 +47,14 @@
   height: 144px;
 }
 
+.MMM-NextcloudCookbook .ncc-recipe header {
+  box-sizing: border-box;
+  min-height: 175px;
+  padding-right: 220px;
+}
+
 .MMM-NextcloudCookbook .ncc-recipe h1 {
-  margin: 0 220px calc(26px * var(--ncc-type-scale)) 0;
+  margin: 0 0 calc(26px * var(--ncc-type-scale));
   color: #fff6d8;
   font-size: calc(82px * var(--ncc-type-scale));
   line-height: 1.08;
@@ -55,6 +62,7 @@
 
 .MMM-NextcloudCookbook .ncc-meta {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px 22px;
   align-items: baseline;
   margin: 0 0 calc(36px * var(--ncc-type-scale));

MMM-NextcloudCookbook.js

@@ -97,7 +97,9 @@ Module.register("MMM-NextcloudCookbook", {
     const qrLabel = document.createElement("span");
     qrLabel.textContent = "Recipe mode control:";
     const qrImage = document.createElement("img");
-    qrImage.src = "/MMM-NextcloudCookbook/qr.svg";
+    const qrParameters = new URLSearchParams();
+    if (this.config.controlUrl) qrParameters.set("url", this.config.controlUrl);
+    qrImage.src = `/MMM-NextcloudCookbook/qr.svg${qrParameters.size ? `?${qrParameters}` : ""}`;
     qrImage.alt = "Recipe controller QR code";
     qr.append(qrLabel, qrImage);
     root.appendChild(qr);

node_helper.js

@@ -57,7 +57,8 @@ module.exports = NodeHelper.create({
     );
     this.expressApp.get("/MMM-NextcloudCookbook/qr.svg", async (request, response, next) => {
       try {
-        const url = this.config.controlUrl
+        const url = request.query.url
+          || this.config.controlUrl
           || `${request.protocol}://${request.get("host")}${this.config.controlPath}`;
         response.type("image/svg+xml").send(await QRCode.toString(url, { type: "svg", margin: 1 }));
       } catch (error) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mmm-nextcloud-cookbook",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mmm-nextcloud-cookbook",
-      "version": "0.1.0",
+      "version": "0.1.2",
       "dependencies": {
         "fast-xml-parser": "5.10.1",
         "qrcode": "1.5.4"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mmm-nextcloud-cookbook",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
   "description": "Display recipes from a Nextcloud Cookbook share on MagicMirror",
   "main": "node_helper.js",