Skip to content

design(reports): mirror the nav treatment on the stakeholder deck (Option C) #3681

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
gloriafolaron wants to merge 4 commits into
base: master
Choose a base branch
from
+39 −37
Open

design(reports): mirror the nav treatment on the stakeholder deck (Option C) #3681

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c7ec84b
design(report): Option C — gradient nav bar above a single white card
gloriafolaron Jul 21, 2026
98a814f
design(report): mirror the Tasks nav treatment on the stakeholder deck
gloriafolaron Jul 21, 2026
ea3b6d5
fix(reports): address Copilot review on #3681
gloriafolaron Jul 22, 2026
147e5fe
docs(reports): consolidate the duplicated .rd-tabs nav comment
gloriafolaron Jul 23, 2026
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
77 changes: 40 additions & 37 deletions app/Domain/Reports/Templates/partials/stakeholder/deck.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

Reused by both StrategyPro (strategy scope) and PgmPro (program scope).
Data passed in via @include vars; this partial owns:
- persistent header (subject, period, updated, status verdict)
- global controls (period picker, print)
- deck navigation (4 tabs + swipe + arrow keys + arrow buttons)
- the 4 page containers (Overview / Logic Model / Resources & Coverage / Programs)
Expand Down Expand Up @@ -89,7 +88,7 @@
--rd-text-4:#aab4bb;
--rd-line:#e3e8ea;
--rd-line-soft:#eef1f3;
--rd-bg:#fafbfb;
--rd-bg:#fff;
--rd-panel:#fff;
--rd-ok:#3E937A;
Comment on lines 89 to 93
--rd-warn:#C09035;
Expand All @@ -105,17 +104,6 @@
}
.rd-scope *{min-width:0;}

/* Persistent header — sits above the deck. Left: subject + provenance. Right:
status verdict (stated verdict with provenance line, NOT a tappable pill). */
.rd-hdr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;padding:14px 20px;background:var(--rd-panel);border-radius:var(--rd-r-sm);box-shadow:var(--rd-sh-sm);margin-bottom:10px;}
.rd-hdr .st{min-width:0;}
.rd-hdr .st .h{font-size:20px;font-weight:600;line-height:1.2;color:var(--rd-text-1);}
.rd-hdr .st .prov{font-size:12px;color:var(--rd-text-3);margin-top:4px;}
.rd-hdr .verdict{text-align:right;min-width:0;}
.rd-hdr .verdict .v{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--rd-text-1);}
.rd-hdr .verdict .v .dot{width:10px;height:10px;border-radius:50%;flex:none;}
.rd-hdr .verdict .src{font-size:11.5px;color:var(--rd-text-3);margin-top:4px;font-weight:400;}

/* Tab-bar right cluster — period picker + prev/next arrows sit here to keep
the tab row self-contained instead of a separate "globalbar" row above. */
.rd-tab-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
Expand Down Expand Up @@ -155,12 +143,24 @@

/* Tab bar — sits ON the page background (matches the To-Dos Kanban·Table·List
pattern). Not on a panel. */
.rd-tabs{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.rd-tab{background:none;border:none;font:inherit;font-size:14px;font-weight:500;color:var(--rd-text-3);padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:6px;transition:color .15s,background .15s;}
.rd-tab:hover{color:var(--rd-text-1);background:rgba(0,0,0,.03);}
.rd-tab.on{color:var(--rd-accent);font-weight:600;background:rgba(0,71,102,.06);}
/* Nav bar: horizontal tabs sit on their own gradient strip ABOVE the white
content card (the nav lives on the app gradient, the content in the card).
Reads as navigation tabs, not a button group. Active tab = white pill. */
/* Nav bar: accent gradient + conditional dark scrim (--nav-scrim, set per-theme
in the header for light accents that fail contrast), NO shadow — so it reads
connected to the content, mirroring the global .tabs nav. */
.rd-tabs{display:flex;align-items:center;gap:12px;margin-bottom:10px;background:linear-gradient(rgba(0,0,0,var(--nav-scrim,0)),rgba(0,0,0,var(--nav-scrim,0))),linear-gradient(90deg,var(--accent1,hsla(199,100%,20%,1)),var(--accent2,hsla(168,100%,33%,1)));border-radius:14px;box-shadow:none;padding:7px 10px;}
/* Framed segmented tab group — one outlined container grouping the tabs. */
.rd-tab-group{display:flex;align-items:center;gap:2px;padding:3px;border-radius:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);}
.rd-tab{background:none;border:none;font:inherit;font-size:14px;font-weight:500;color:rgba(255,255,255,.85);padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:9px;transition:color .15s,background .15s;}
.rd-tab:hover{color:#fff;background:rgba(255,255,255,.16);}
.rd-tab.on{color:var(--rd-accent);font-weight:600;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12);}
Comment on lines +154 to +156
/* Keyboard focus indicator — white ring on the gradient (inactive tabs),
accent ring on the active white chip so it stays visible. */
.rd-tab:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.rd-tab.on:focus-visible{outline-color:var(--rd-accent);}
.rd-tab i{font-size:12px;}
.rd-tab .ct{font-size:11px;color:var(--rd-text-4);background:var(--rd-line-soft);border-radius:10px;padding:1px 7px;margin-left:2px;}
.rd-tab .ct{font-size:11px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.18);border-radius:10px;padding:1px 7px;margin-left:2px;}
.rd-tab.on .ct{color:var(--rd-accent);background:rgba(0,71,102,.1);}
.rd-arrows{display:flex;gap:4px;}
.rd-arrow{background:var(--rd-panel);border:1px solid var(--rd-line);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--rd-text-2);}
Expand All @@ -170,7 +170,11 @@
/* Deck — one panel that sizes to the active page (no dead space on short pages).
Pages are stacked in a horizontal track; we translate the track and only the
active page's content contributes to height. */
.rd-deck{background:var(--rd-panel);border-radius:var(--rd-r-sm);box-shadow:var(--rd-sh-lg);overflow:hidden;position:relative;}
/* The deck sits INSIDE the app's .maincontentinner white card, so it must NOT be
a second floating card — no own shadow (that drop-shadow drew a visible seam
under the tab strip, reading as "two whites / box in a box"). Flat, same white,
one cohesive surface. */
.rd-deck{background:var(--rd-panel);overflow:hidden;position:relative;}
.rd-deck-viewport{overflow:hidden;position:relative;}
.rd-deck-track{display:flex;align-items:flex-start;transition:transform .28s cubic-bezier(.4,.15,.25,1);}
.rd-page{flex:0 0 100%;padding:24px 26px;min-width:100%;width:100%;}
Expand Down Expand Up @@ -286,28 +290,22 @@
<div class="rd-scope">

{{-- ── Persistent header ────────────────────────────────────────── --}}
<div class="rd-hdr">
<div class="st">
<div class="h">{{ $subject }}</div>
<div class="prov">
{{ $scope === 'strategy' ? __('stakeholder.header.strategy_report') : __('stakeholder.header.program_report') }}
@if ($periodMeaning !== '') · {{ $periodMeaning }} @endif
· {{ __('stakeholder.header.updated') }} {{ $updatedAt }}
</div>
</div>
<div class="verdict">
<div class="v"><span class="dot" style="background:{{ $verdictDotColor }}"></span>{{ $verdictLabel }}</div>
<div class="src">{{ $verdictSource }}</div>
</div>
</div>
{{-- Header card removed: the subject switcher, meta sub-line, status verdict
and actions all now live in the shared pageheader (see report.blade.php),
so this second card was redundant. The deck starts straight at the tabs. --}}
Comment on lines 291 to +294
Comment on lines +292 to +294

{{-- ── Tab bar + period picker on ONE row (saves a full row of vertical
space; picker sits with the view-mode controls it belongs with) ── --}}
<div class="rd-tabs hideOnPrint">
<button type="button" class="rd-tab on" data-page="0" onclick="rdGo(0)"><i class="fa fa-gauge-simple-high"></i> {{ __('stakeholder.tab.overview') }}</button>
<button type="button" class="rd-tab" data-page="1" onclick="rdGo(1)"><i class="fa fa-diagram-project"></i> {{ __('stakeholder.tab.logic_model') }}</button>
<button type="button" class="rd-tab" data-page="2" onclick="rdGo(2)"><i class="fa fa-people-arrows"></i> {{ __('stakeholder.tab.resources_coverage') }}</button>
<button type="button" class="rd-tab" data-page="3" onclick="rdGo(3)"><i class="fa fa-compass"></i> {{ __('stakeholder.tab.impact_journey') }}</button>
{{-- Framed segmented tab group (mirrors the global .tabs nav): the tabs
sit in one outlined container so they read as a connected control,
the active one a white segment inside it. --}}
<div class="rd-tab-group">
<button type="button" class="rd-tab on" data-page="0" onclick="rdGo(0)"><i class="fa fa-gauge-simple-high"></i> {{ __('stakeholder.tab.overview') }}</button>
<button type="button" class="rd-tab" data-page="1" onclick="rdGo(1)"><i class="fa fa-diagram-project"></i> {{ __('stakeholder.tab.logic_model') }}</button>
<button type="button" class="rd-tab" data-page="2" onclick="rdGo(2)"><i class="fa fa-people-arrows"></i> {{ __('stakeholder.tab.resources_coverage') }}</button>
<button type="button" class="rd-tab" data-page="3" onclick="rdGo(3)"><i class="fa fa-compass"></i> {{ __('stakeholder.tab.impact_journey') }}</button>
</div>

<div class="rd-tab-right">
<div class="rd-picker" id="rdPicker">
Expand Down Expand Up @@ -359,6 +357,10 @@ class="rd-picker-opt @if ($period->preset === ReportPeriod::PRESET_NEXT_QUARTER)
</div>

{{-- ── Deck ─────────────────────────────────────────────────────── --}}
{{-- The white content card wraps ONLY the deck; the tab bar above sits on
the app gradient (nav lives on the gradient, content lives in the card).
The plugin's report.blade.php no longer adds an outer .maincontentinner. --}}
<div class="maincontentinner">
<div class="rd-deck">
<div class="rd-deck-viewport">
<div class="rd-deck-track" id="rdTrack">
Expand Down Expand Up @@ -391,6 +393,7 @@ class="rd-picker-opt @if ($period->preset === ReportPeriod::PRESET_NEXT_QUARTER)
</div>
</div>
</div>
</div>{{-- /.maincontentinner --}}

</div>

Expand Down
Loading