Skip to content

chore: report UI follow-ups (visibility, download, hero) + PROJECT.md #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
josanUX wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore: report UI follow-ups (visibility, download, hero) + PROJECT.md #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions PROJECT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ A tabbed carousel with three persona views — Executive overview, Marketer insi
A split layout with a heading, description, and download CTA on the left, and an interactive PDF card preview on the right. The card has a red patterned background, the report title, and hover effects. Shows metadata (last updated date, page count). PDF title text is resolved from the block row markup (including nested links).

### report-ai-visibility
Summit “LLM visibility” / “Performance insights” experience: stat cards, platform coverage pills, side-by-side comparison panels with charts (horizontal bars, platform bars, score tables, big figures). Horizontal bars support count vs percent display (authoring flags `|percent` / `|count`, or inferred share-style totals), and can show platform favicons when labels match known brands. Gap, key insight, and CTA rows render below the panels; the CTA copies from the authored block cells. An empty shell section next to the block hosts the nested **report-scores** page-performance cards (no extra grid padding in that shell).
Summit “LLM visibility” / “Performance insights” experience: stat cards, platform coverage pills, side-by-side comparison panels with charts (horizontal bars, platform bars, score tables, big figures). Horizontal bars support count vs percent display (authoring flags `|percent` / `|count`, or inferred share-style totals), and can show platform favicons when labels match known brands. Gap, key insight, and CTA rows render below the panels; the CTA copies from the authored block cells. An empty shell section next to the block hosts the nested **report-scores** page-performance cards (no extra grid padding in that shell). In that shell, **report-scores** summary pills (good / needs work / poor counts) are moved into the shell’s `.rav-section-head` so they sit on the same row as the “Performance insights” title.

### report-scores
Page performance cards (URL, score meter, metrics) used inside the AI visibility performance shell and elsewhere. Card grid and meters are scoped under `.report-scores`.
Page performance cards (URL, score meter, metrics) used inside the AI visibility performance shell and elsewhere. Card grid and meters are scoped under `.report-scores`. When embedded in the performance insights empty shell, the top summary pill strip is repositioned next to the section title (see **report-ai-visibility**).

### header
Fetches nav content and renders the Adobe logo, site title ("Adobe Summit Portal"), a help icon button, and a dark mode toggle button (half-moon icon) on the right edge. Preference is persisted in localStorage.
Expand Down
108 changes: 83 additions & 25 deletions blocks/report-ai-visibility/report-ai-visibility.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,35 +107,37 @@
@media (width >= 1000px) {
.report-ai-visibility .rav-stats-story-row {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
grid-template-columns: repeat(1, 1fr);
align-items: stretch;
gap: 16px;
padding: 16px;
gap: 0;
padding: 0;
box-sizing: border-box;
}

.report-ai-visibility .rav-stats-story-row > .rav-stats {
display: flex;
flex-direction: column;
flex-flow: row nowrap;
padding: 0;
border: 1px solid light-dark(rgb(233 233 233), rgb(50 50 50));
border-radius: 16px;
background: light-dark(#fff, #1a1a1a);
box-shadow: var(--rpt-card-shadow);
overflow: hidden;
border: none;
border-bottom: 2px solid light-dark(rgb(243 243 243 / 100%), #444);
border-image: none;
border-radius: 0;
background: unset;
box-shadow: none;
overflow: visible;
}

.report-ai-visibility .rav-stats-story-row > .rav-stats > .rav-stat-card {
flex: 1 1 0;
justify-content: center;
border-right: none;
border-bottom: 1px solid var(--rpt-border);
padding: 14px 24px;
border: none;
border-right: 1px solid rgb(0 0 0 / 8%);
padding: 20px 24px;
gap: 2px;
}

.report-ai-visibility .rav-stats-story-row > .rav-stats > .rav-stat-card:last-child {
border-bottom: none;
border-right: none;
}

.report-ai-visibility .rav-stats-story-row .rav-stat-value {
Expand All @@ -150,6 +152,11 @@
height: 100%;
padding: 24px 28px;
justify-content: center;
box-shadow: none;
border-radius: 0;
border: none;
border-image: none;
border-bottom: 2px solid light-dark(rgb(243 243 243 / 100%), #444);
}

/* Inside the paired row the lone story panel should fill its half, not shrink to 50%. */
Expand Down Expand Up @@ -228,6 +235,11 @@
border-image: none;
}

/* Two `.rav-panels` shells merged into one outer (see report-ai-visibility.js) */
.report-ai-visibility .rav-panels-outer > .rav-panels + .rav-panels {
margin-top: 20px;
}

.report-ai-visibility .rav-panels {
display: grid;
grid-template-columns: 1fr 1fr;
Expand Down Expand Up @@ -286,7 +298,7 @@
}

.report-ai-visibility .rav-panel-title {
font-size: 18px;
font-size: 20px;
font-weight: 700;
color: var(--rpt-text-heading, var(--color-text-heading));
margin: 0 0 -4px;
Expand All @@ -311,7 +323,7 @@
color: light-dark(rgb(80 80 80 / 100%), #ccc);
margin: 0;
padding-top: 10px;
border-top: 1px solid var(--rpt-border, var(--color-border));
border-top: none;
line-height: 1.5;
font-style: italic;
}
Expand Down Expand Up @@ -515,6 +527,7 @@

/* ── Metric strip ─────────────────────────────────────────────────────────── */
.report-ai-visibility .rav-metric-strip {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
Expand All @@ -525,11 +538,12 @@
}

.report-ai-visibility .rav-ms-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 0;
padding: 12px 16px;
align-items: center;
border-bottom: 1px solid light-dark(#e5e7eb, #444);
}

Expand All @@ -539,18 +553,18 @@

.report-ai-visibility .rav-ms-label {
font-size: 13px;
color: light-dark(#4b5563, #9ca3af);
color: light-dark(#505050, #9ca3af);
}

.report-ai-visibility .rav-ms-value {
font-size: 13px;
font-weight: 700;
font-size: 24px;
font-weight: 800;
color: light-dark(#111, #f9fafb);
}

.report-ai-visibility .rav-ms-note {
font-size: 11px;
color: light-dark(#9ca3af, #6b7280);
color: light-dark(#7a7a7a, #6b7280);
}

/* ── Recommendation list ──────────────────────────────────────────────────── */
Expand Down Expand Up @@ -704,7 +718,8 @@
display: block;
}

.report-ai-visibility #discover-adobe-llm-optimizer {
.report-ai-visibility #discover-adobe-llm-optimizer,
.report-ai-visibility #visit-your-adobe-llm-optimizer-dashboard-to-learn-more {
font-size: 20px;
margin-bottom: 8px;
}
Expand Down Expand Up @@ -890,6 +905,17 @@
flex-wrap: nowrap;
}

.report-ai-visibility.rav-empty-shell .rav-section-head {
flex-wrap: wrap;
justify-content: space-between;
row-gap: 10px;
}

.report-ai-visibility.rav-empty-shell .rav-section-head .rsc-summary-pills {
flex-basis: 100%;
justify-content: flex-end;
}

.report-ai-visibility .rav-section-title {
font-size: 16px;
}
Expand Down Expand Up @@ -954,7 +980,7 @@
}

.report-ai-visibility .rav-panels-outer {
padding: 12px;
padding: 20px 12px 12px;
}

.report-ai-visibility .rav-panels {
Expand Down Expand Up @@ -1010,6 +1036,38 @@
}
}

/* Performance insights shell: --rsc-* tokens for summary pills hoisted into .rav-section-head
(they are no longer descendants of .report-scores where those vars are defined). */
.report-ai-visibility.rav-empty-shell {
--rsc-poor: light-dark(#d93025, #f87171);
--rsc-poor-bg: light-dark(#fde8e6, rgb(239 68 68 / 14%));
--rsc-warning: light-dark(#b86e00, #fbbf24);
--rsc-warning-bg: light-dark(#fff4e0, rgb(245 158 11 / 14%));
--rsc-good: light-dark(#1e9029, #4ade80);
--rsc-good-bg: light-dark(#e7f6ea, rgb(34 197 94 / 14%));
--rsc-surface: var(--rpt-surface, light-dark(#fff, #1a1a1a));
--rsc-surface-2: light-dark(#fafafa, #222);
--rsc-border: light-dark(#e9e9e9, #333);
--rsc-text-muted: light-dark(#5a5a5a, #a8a8a8);
--rsc-text-faint: light-dark(#7a7a7a, #888);
--rsc-red: var(--rpt-red, #e60000);
--rsc-red-bg: light-dark(#fff0f0, rgb(230 0 0 / 12%));
}

/* Performance insights shell: summary pills live in the section head, right of the title */
.report-ai-visibility.rav-empty-shell .rav-section-head {
justify-content: space-between;
}

.report-ai-visibility.rav-empty-shell .rav-section-head .rsc-summary-pills {
flex-shrink: 0;
margin: 0;
}

.report-ai-visibility.rav-empty-shell .rav-section-title {
min-width: 0;
}

/* Page performance cards (report-scores) nested under Performance insights shell */
.report-ai-visibility.rav-empty-shell .rav-panels-outer > .report-scores {
width: 100%;
Expand Down
25 changes: 13 additions & 12 deletions blocks/report-download/report-download.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
}

.report-download {
background: light-dark(#f5f5f5, #2a2a2a);
color: light-dark(#1a1a1a, #e5e5e5);
background: light-dark(#fff, #2a2a2a);
color: light-dark(rgba(26, 26, 26, 1), #e5e5e5);
display: grid;
grid-template-columns: 1fr;
gap: 48px;
Expand Down Expand Up @@ -238,7 +238,7 @@

.report-download .rd-methodology-heading {
font-size: 22px;
font-weight: 800;
font-weight: 700;
color: light-dark(#1a1a1a, #fff);
margin: 0;
line-height: 1.2;
Expand All @@ -259,10 +259,10 @@
}

.report-download .rd-pillar {
background: light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 4%));
border: 1px solid light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));
background: light-dark(rgb(248 248 248), rgb(255 255 255 / 4%));
border: none;
border-radius: 12px;
padding: 20px;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 8px;
Expand Down Expand Up @@ -309,7 +309,7 @@
text-transform: uppercase;
letter-spacing: 0.08em;
color: light-dark(rgb(0 0 0 / 65%), rgb(255 255 255 / 65%));
margin: 8px 0 0;
margin: 8px 0 -8px;
}

.report-download .rd-methodology-steps {
Expand All @@ -325,10 +325,11 @@
.report-download .rd-step {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 4%));
border: 1px solid light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));
gap: 16px;
margin-block: 0;
padding: 20px 24px;
background: light-dark(rgb(248 248 248), rgb(255 255 255 / 4%));
border: none;
border-radius: 12px;
}

Expand All @@ -349,7 +350,7 @@
font-size: 14px;
font-weight: 700;
color: light-dark(#1a1a1a, #fff);
margin: 0;
margin: 0 0 8px;
line-height: 1.25;
}

Expand Down
33 changes: 2 additions & 31 deletions blocks/report-hero/report-hero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,6 @@ body:has(.report-hero.insight) main {
gap: 10px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgb(255 255 255 / 18%);
}

.report-hero.insight .rh-insight-text .rh-insight-meta .rh-insight-badge {
Expand Down Expand Up @@ -399,13 +398,13 @@ body:has(.report-hero.insight) main {
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 32px 64px 0 0;
padding: 48px 64px 0 0;
overflow: hidden;
}

.report-hero.insight .rh-insight-image picture {
display: block;
border-radius: 8px 8px 0 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
width: 400px;
Expand Down Expand Up @@ -788,34 +787,6 @@ body:has(.report-hero.insight) main {
font-weight: 400;
}

.report-hero.insight .rh-insight-badge {
font-size: 13px;
font-weight: 500;
padding: 8px 14px 8px 12px;
margin-top: 12px;
gap: 8px;
border-radius: 999px;
background: rgb(0 0 0 / 28%);
border: 1px solid rgb(255 255 255 / 28%);
color: #fff;
box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
transition: background 160ms ease, transform 160ms ease;
}

.report-hero.insight .rh-insight-badge:hover,
.report-hero.insight .rh-insight-badge:focus-visible {
background: rgb(0 0 0 / 38%);
}

.report-hero.insight .rh-insight-badge:active {
transform: scale(0.98);
}

.report-hero.insight .rh-insight-badge-icon {
width: 14px;
height: 14px;
}

.report-hero.insight > .rh-insight-bg-svg {
display: block;
top: auto;
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.