Skip to main content

Capstone, Accessibility, Performance, Governance

This example is the finished Adaptive Operations Console. It includes:

the custom AdaptiveOps theme (tokens, semantic appearances, restyled focus frame, invalid state) and the scoped stylesheet;
a shell of Dock, Flow, Table and Flex regions, with MinimumSize on every fill-weighted region;
ClientProfiles.json with six profiles and one idempotent ApplyProfile;
the phone editor as a modal dialog;
a profile indicator shown in test mode only.

Run it

cd "LearnWisej-Samples/Theming and Responsive Layouts Course/Module 7/AdaptiveOps"
dotnet run -f net10.0 --urls http://localhost:5507

Open http://localhost:5507 (or open AdaptiveOps.slnx in Visual Studio and press F5). The profile indicator is shown while ADAPTIVEOPS_TESTMODE is unset or 1 (it is 1 in Properties/launchSettings.json). Set it to 0 for a production run.

What to check

Action	What you should see
Open the page at desktop width	Status bar: `Ready`, `Width: N px`, `Profile: Desktop`
Select a ticket, blank the title, Save	Title editor with the danger border and the tooltip "Title is required."; footer "Rejected: Title is required." with the error icon; status "Not saved: …"
Save a valid ticket	Status "Saved T-…" and a toast; the grid and cards refresh
Tab from the page start	The focus frame walks toolbar, rail, grid, editor, Save
Resize below 1024 px	`Profile: Small Desktop`: icon-only rail, cards in 2 rows, Owner column hidden, compact editor
Devtools, tablet portrait 768 × 1024 (refresh once)	`Profile: Tablet`: icon-only toolbar and rail, details docked under the grid
Devtools, phone 390 × 844 (refresh once)	`Profile: Phone`: title "Adaptive Ops", details hidden, Open details opens the editor as a maximized dialog, grid shows Id, Title and Status

A failure inside ApplyProfile is caught: the status bar says the layout could not be applied and the last good profile is re-applied.

Where things live

AdaptiveOps/
├─ Themes/AdaptiveOps.theme              shipped theme (generated: Bootstrap-4 plus overrides)
├─ Themes/src/AdaptiveOps.overrides.json the source we edit; merge-theme.mjs regenerates the theme
├─ Styles/AdaptiveOps.css                scoped app CSS (CssClass only), linked from Default.html
├─ ClientProfiles.json                   six profiles, narrow to broad
├─ MainPage.cs / .Designer.cs            shell, ApplyProfile, grid, save
├─ Shell/                                NavigationRail, DetailsEditor (TableLayoutPanel), MetricCard
├─ Dialogs/DetailsDialog.cs              the phone presentation of DetailsEditor
├─ Models/                               Ticket, TicketRepository (server-side validation)
└─ docs/                                 the lab deliverables

Run it
What to check
Where things live