From 49c476521120d628c419060909def9ac881f7e2d Mon Sep 17 00:00:00 2001 From: Tyler Adam Martinez Date: Wed, 19 Aug 2026 16:38:07 -0500 Subject: [PATCH 1/2] feat(chemistry-well-details): add new items from Mock-up #3 requirements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented the following: * Remove the prominent single-event note from the multi-sample view * Keep the sampling-event note as a table column or expandable row detail * Keep parameter notes available for exceptions, such as an ORP measurement that did not stabilize. * Add the Additional Analyses cross-tab. * Update isotope labels to consistent delta notation, including superscript isotope numbers such as δ13C. * Highlight exceeding values in red and bold. * Remove detection limits and errors from the quick display. * Add ion balance as a per-sample General Chemistry column. * Remove ion balance as a note above the table. * Create cross-tab for all views option --- chemistry-well-details-mockup.html | 486 ++++++++++++++++++----------- 1 file changed, 296 insertions(+), 190 deletions(-) diff --git a/chemistry-well-details-mockup.html b/chemistry-well-details-mockup.html index 0b37a59..589faf7 100644 --- a/chemistry-well-details-mockup.html +++ b/chemistry-well-details-mockup.html @@ -122,7 +122,8 @@ --radius-4xl: 22px; /* badges (rounded-4xl) */ /* Type */ - --font-sans: "Public Sans Variable", "Public Sans", system-ui, sans-serif; + --font-sans: + "Public Sans Variable", "Public Sans", system-ui, sans-serif; --font-heading: "Outfit Variable", "Outfit", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; @@ -133,7 +134,8 @@ /* Elevation. The app is a flat, ring-outlined UI: cards carry a ring, not a shadow. Shadows are reserved for things that genuinely float. */ --shadow-popover: 0 18px 44px rgba(15, 23, 42, 0.14); - --shadow-paper: 0 10px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.07); + --shadow-paper: + 0 10px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.07); } /* Dark mode — add class="dark" to , same switch the app uses. */ @@ -1123,7 +1125,8 @@ /* Dropzone. */ .dropzone { - border: 1.5px dashed color-mix(in oklab, var(--primary) 40%, transparent); + border: 1.5px dashed + color-mix(in oklab, var(--primary) 40%, transparent); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--primary) 6%, transparent); padding: 22px 16px; @@ -1417,7 +1420,11 @@ top: 0; bottom: 0; border-radius: 4px; - background: color-mix(in oklab, var(--muted-foreground) 35%, transparent); + background: color-mix( + in oklab, + var(--muted-foreground) 35%, + transparent + ); } .meter-median { position: absolute; @@ -1865,67 +1872,76 @@ /* ── Page-specific ── Shared styles live in design-system/ocotillo.css. */ /* ── Sample meta ── */ - .sample-meta { - font-size: 12px; - color: var(--muted-foreground); - margin-bottom: 12px; - } + .sample-meta { + font-size: 12px; + color: var(--muted-foreground); + margin-bottom: 12px; + } .sample-meta strong { - color: var(--foreground); - font-weight: 600; - } + color: var(--foreground); + font-weight: 600; + } .sample-context { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - border: 1px solid var(--divider); - border-radius: 5px; - overflow: hidden; - margin-bottom: 12px; - background: var(--paper); - } + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border: 1px solid var(--divider); + border-radius: 5px; + overflow: hidden; + margin-bottom: 12px; + background: var(--paper); + } .sample-context-cell { - padding: 9px 12px; - border-left: 1px solid var(--divider); - min-width: 0; - } + padding: 9px 12px; + border-left: 1px solid var(--divider); + min-width: 0; + } .sample-context-cell:first-child { - border-left: none; - } + border-left: none; + } .sample-note { - margin-bottom: 12px; - padding: 9px 12px; - border-radius: 5px; - border: 1px solid #bfdbfe; - background: #eff6ff; - font-size: 12px; - color: var(--foreground); - } + margin-bottom: 12px; + padding: 9px 12px; + border-radius: 5px; + border: 1px solid #bfdbfe; + background: #eff6ff; + font-size: 12px; + color: var(--foreground); + } + .value-exceed { + color: var(--destructive); + font-weight: 700; + } + .standard-pending { + color: var(--muted-foreground); + font-size: 11px; + white-space: nowrap; + } /* ── QA banner ── */ - .qa-banner { - display: flex; - align-items: center; - gap: 8px; - background: #f0fdf4; - border: 1px solid #bbf7d0; - border-radius: 5px; - padding: 7px 12px; - font-size: 12px; - color: #166534; - margin-bottom: 12px; - } + .qa-banner { + display: flex; + align-items: center; + gap: 8px; + background: #f0fdf4; + border: 1px solid #bbf7d0; + border-radius: 5px; + padding: 7px 12px; + font-size: 12px; + color: #166534; + margin-bottom: 12px; + } /* ── Time series hint ── */ - .ts-hint { - margin-top: 12px; - padding: 10px 14px; - background: var(--wrapper); - border-radius: 5px; - font-size: 12px; - color: var(--muted-foreground); - border: 1px solid var(--divider); - display: flex; - align-items: center; - gap: 8px; - } + .ts-hint { + margin-top: 12px; + padding: 10px 14px; + background: var(--wrapper); + border-radius: 5px; + font-size: 12px; + color: var(--muted-foreground); + border: 1px solid var(--divider); + display: flex; + align-items: center; + gap: 8px; + } @@ -2153,6 +2169,7 @@ +