From d3bf1f0dfac40ca61a501c140bb6424acc51d349 Mon Sep 17 00:00:00 2001 From: Charlie Date: Sat, 13 Jun 2026 14:57:32 +0200 Subject: [PATCH] schema-apps: Drug medication information leaflet design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bespoke renderTypeSpecific layout for Drug — clean clinical white card with pill icon header, drug name + active ingredient subtitle, outlined spec boxes (dosage form, prescription status, drug class), informational notice banner, patient info body. Calm teal accent. Class .card.med-leaflet. Gate passes (324 apps). --- app.css | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app.js | 74 +++++++++++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+) diff --git a/app.css b/app.css index 5228f2d..b834c30 100644 --- a/app.css +++ b/app.css @@ -5291,3 +5291,116 @@ footer a:hover { color: var(--accent-2); } .mp-title { font-size: 1rem; } .mp-curatorial { padding: .6rem 1rem .8rem; } } + +/* ── Drug — Medication Information Leaflet ── */ +.card.med-leaflet { + border-color: rgba(8,145,178,.12); +} +.card.med-leaflet .hd.hidden { display: none; } + +/* Clinical header */ +.ml-header { + display: flex; + align-items: flex-start; + gap: .8rem; + padding: 1.2rem 1.5rem .8rem; +} +.ml-icon { + font-size: 1.8rem; + line-height: 1; + flex-shrink: 0; + margin-top: .15rem; +} +.ml-header-text { + flex: 1; +} +.ml-name { + font-size: 1.25rem; + font-weight: 800; + color: var(--ink); + line-height: 1.25; + margin: 0 0 .2rem; +} +.ml-active { + font-size: .82rem; + font-weight: 600; + color: #0891b2; +} + +/* Spec strip — outlined boxes */ +.ml-spec-strip { + display: flex; + flex-wrap: wrap; + gap: .5rem; + padding: .4rem 1.5rem .8rem; +} +.ml-spec-box { + flex: 1 1 0; + min-width: 0; + border: 1px solid var(--line); + border-radius: 6px; + padding: .5rem .7rem; + background: rgba(8,145,178,.02); +} +.ml-spec-label { + font-size: .62rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .1em; + color: var(--muted-2); + margin-bottom: .2rem; +} +.ml-spec-val { + font-size: .78rem; + font-weight: 600; + color: var(--ink-2); + line-height: 1.35; +} + +/* Informational notice */ +.ml-notice { + display: flex; + align-items: flex-start; + gap: .4rem; + margin: 0 1.5rem .8rem; + padding: .55rem .8rem; + background: rgba(8,145,178,.06); + border: 1px solid rgba(8,145,178,.12); + border-radius: 6px; + font-size: .76rem; + color: var(--ink-2); + line-height: 1.5; +} +.ml-notice-icon { + flex-shrink: 0; + font-size: .85rem; + line-height: 1.4; +} + +/* Patient info body */ +.ml-body { + padding: .2rem 1.5rem 1rem; +} +.ml-body-label { + font-size: .7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .12em; + color: var(--muted-2); + margin-bottom: .4rem; +} +.ml-body-text { + font-size: .84rem; + line-height: 1.75; + color: var(--muted); + margin: 0; +} + +@media (max-width: 480px) { + .ml-header { padding: 1rem 1rem .6rem; gap: .6rem; } + .ml-name { font-size: 1.05rem; } + .ml-spec-strip { padding: .3rem 1rem .6rem; } + .ml-spec-box { flex: 1 1 100%; } + .ml-notice { margin: 0 1rem .6rem; } + .ml-body { padding: .2rem 1rem .8rem; } +} diff --git a/app.js b/app.js index 314c75d..b1221f2 100644 --- a/app.js +++ b/app.js @@ -3474,6 +3474,80 @@ } } + // ── DRUG (Medication Information Leaflet) ── + if (cfg.type === "Drug") { + const card = document.querySelector(".card"); + if (card) card.classList.add("med-leaflet"); + + // Hide normal header + const hd = document.querySelector(".hd"); + if (hd) hd.classList.add("hidden"); + + // Remove generic hero + const heroMount = document.getElementById("hero-mount"); + if (heroMount) heroMount.querySelector('.hero')?.remove(); + + // ── Clean clinical header: drug name + active ingredient subtitle ── + const mlHeader = document.createElement("div"); mlHeader.className = "ml-header"; + const mlIcon = document.createElement("div"); mlIcon.className = "ml-icon"; + mlIcon.textContent = "\u{1F48A}"; + mlHeader.appendChild(mlIcon); + const mlHeaderText = document.createElement("div"); mlHeaderText.className = "ml-header-text"; + const drugName = data[cfg.titleProp] || ""; + const h1 = document.createElement("h1"); h1.className = "ml-name"; + h1.textContent = drugName; + mlHeaderText.appendChild(h1); + const activeIng = data["activeIngredient"]; + if (activeIng) { + const sub = document.createElement("div"); sub.className = "ml-active"; + sub.textContent = activeIng; + mlHeaderText.appendChild(sub); + handled.add("activeIngredient"); + } + mlHeader.appendChild(mlHeaderText); + heroMount.appendChild(mlHeader); + handled.add("name"); handled.add("image"); + + // ── Spec strip: dosage form, prescription status, drug class as outlined boxes ── + const specItems = []; + const dosageForm = data["dosageForm"]; + if (dosageForm) specItems.push({ label: "Dosage Form", val: dosageForm, prop: "dosageForm" }); + const rxStatus = data["prescriptionStatus"]; + if (rxStatus) specItems.push({ label: "Prescription", val: rxStatus, prop: "prescriptionStatus" }); + const drugClass = data["drugClass"]; + if (drugClass) specItems.push({ label: "Drug Class", val: drugClass, prop: "drugClass" }); + + if (specItems.length) { + const specStrip = document.createElement("div"); specStrip.className = "ml-spec-strip"; + specItems.forEach(s => { + const box = document.createElement("div"); box.className = "ml-spec-box"; + box.innerHTML = "
" + s.label + "
" + s.val + "
"; + specStrip.appendChild(box); + handled.add(s.prop); + }); + view.appendChild(specStrip); + } + + // ── Informational-only notice ── + const notice = document.createElement("div"); notice.className = "ml-notice"; + notice.innerHTML = "\u2139\uFE0F Informational only \u2014 always read the patient information leaflet. Consult a pharmacist or physician if unsure."; + view.appendChild(notice); + + // ── Description as patient-info body ── + const desc = data["description"]; + if (desc) { + const body = document.createElement("div"); body.className = "ml-body"; + const label = document.createElement("div"); label.className = "ml-body-label"; + label.textContent = "Patient Information"; + body.appendChild(label); + const text = document.createElement("p"); text.className = "ml-body-text"; + text.textContent = desc; + body.appendChild(text); + view.appendChild(body); + handled.add("description"); + } + } + return handled; }