-
-
+
+
+
-
+
-
-
diff --git a/package.json b/package.json
index 3de75da..94f5408 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
"prettier": "./.prettierrc.json",
"devDependencies": {
"@playwright/test": "^1.58.0",
- "@screenly/edge-apps": "^1.1.2",
+ "@screenly/edge-apps": "^1.4.0",
"@types/bun": "^1.3.9",
"bun-types": "^1.3.9",
"chart.js": "^4.4.0",
diff --git a/screenshots/dashboard-1080x1920.webp b/screenshots/dashboard-1080x1920.webp
index eb43b96..4ad73ab 100644
Binary files a/screenshots/dashboard-1080x1920.webp and b/screenshots/dashboard-1080x1920.webp differ
diff --git a/screenshots/dashboard-1280x720.webp b/screenshots/dashboard-1280x720.webp
index 63156ee..64e1b1c 100644
Binary files a/screenshots/dashboard-1280x720.webp and b/screenshots/dashboard-1280x720.webp differ
diff --git a/screenshots/dashboard-1920x1080.webp b/screenshots/dashboard-1920x1080.webp
index 0c0275c..26568c4 100644
Binary files a/screenshots/dashboard-1920x1080.webp and b/screenshots/dashboard-1920x1080.webp differ
diff --git a/screenshots/dashboard-2160x3840.webp b/screenshots/dashboard-2160x3840.webp
index 3697598..5212779 100644
Binary files a/screenshots/dashboard-2160x3840.webp and b/screenshots/dashboard-2160x3840.webp differ
diff --git a/screenshots/dashboard-2160x4096.webp b/screenshots/dashboard-2160x4096.webp
index b17c216..75719a9 100644
Binary files a/screenshots/dashboard-2160x4096.webp and b/screenshots/dashboard-2160x4096.webp differ
diff --git a/screenshots/dashboard-3840x2160.webp b/screenshots/dashboard-3840x2160.webp
index 3c3ef7b..556a767 100644
Binary files a/screenshots/dashboard-3840x2160.webp and b/screenshots/dashboard-3840x2160.webp differ
diff --git a/screenshots/dashboard-4096x2160.webp b/screenshots/dashboard-4096x2160.webp
index 507672a..c3bf9b6 100644
Binary files a/screenshots/dashboard-4096x2160.webp and b/screenshots/dashboard-4096x2160.webp differ
diff --git a/screenshots/dashboard-480x800.webp b/screenshots/dashboard-480x800.webp
index 79077c6..defa33f 100644
Binary files a/screenshots/dashboard-480x800.webp and b/screenshots/dashboard-480x800.webp differ
diff --git a/screenshots/dashboard-720x1280.webp b/screenshots/dashboard-720x1280.webp
index 0d54734..913a728 100644
Binary files a/screenshots/dashboard-720x1280.webp and b/screenshots/dashboard-720x1280.webp differ
diff --git a/screenshots/dashboard-800x480.webp b/screenshots/dashboard-800x480.webp
index 5e978e3..d60b399 100644
Binary files a/screenshots/dashboard-800x480.webp and b/screenshots/dashboard-800x480.webp differ
diff --git a/screenshots/dashboard-labels-1080x1920.webp b/screenshots/dashboard-labels-1080x1920.webp
index 907c86d..bf2594f 100644
Binary files a/screenshots/dashboard-labels-1080x1920.webp and b/screenshots/dashboard-labels-1080x1920.webp differ
diff --git a/screenshots/dashboard-labels-1920x1080.webp b/screenshots/dashboard-labels-1920x1080.webp
index 5bdb1e4..782463f 100644
Binary files a/screenshots/dashboard-labels-1920x1080.webp and b/screenshots/dashboard-labels-1920x1080.webp differ
diff --git a/screenshots/error-2160x3840.webp b/screenshots/error-2160x3840.webp
index 3465fb2..0fa858e 100644
Binary files a/screenshots/error-2160x3840.webp and b/screenshots/error-2160x3840.webp differ
diff --git a/screenshots/error-3840x2160.webp b/screenshots/error-3840x2160.webp
index c67bf68..eccda2d 100644
Binary files a/screenshots/error-3840x2160.webp and b/screenshots/error-3840x2160.webp differ
diff --git a/screenshots/error-not-found-3840x2160.webp b/screenshots/error-not-found-3840x2160.webp
index cfce75c..8d297db 100644
Binary files a/screenshots/error-not-found-3840x2160.webp and b/screenshots/error-not-found-3840x2160.webp differ
diff --git a/screenshots/report-2160x3840.webp b/screenshots/report-2160x3840.webp
index 693ef86..f05730a 100644
Binary files a/screenshots/report-2160x3840.webp and b/screenshots/report-2160x3840.webp differ
diff --git a/screenshots/report-3840x2160.webp b/screenshots/report-3840x2160.webp
index 4eb4e8e..9e1a9cc 100644
Binary files a/screenshots/report-3840x2160.webp and b/screenshots/report-3840x2160.webp differ
diff --git a/screenshots/report-labels-1080x1920.webp b/screenshots/report-labels-1080x1920.webp
index 65d045d..1faa364 100644
Binary files a/screenshots/report-labels-1080x1920.webp and b/screenshots/report-labels-1080x1920.webp differ
diff --git a/screenshots/report-labels-1920x1080.webp b/screenshots/report-labels-1920x1080.webp
index 31efb36..ffbe4a8 100644
Binary files a/screenshots/report-labels-1920x1080.webp and b/screenshots/report-labels-1920x1080.webp differ
diff --git a/src/css/style.css b/src/css/style.css
index b33d3fd..1443841 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,309 +1,120 @@
-@import '@screenly/edge-apps/styles';
+@layer theme, base, components, utilities;
-:root {
- --color-bg: #111;
- --color-surface: #1a1a1a;
- --color-border: #2a2a2a;
- --color-text-primary: #f2f2f3;
- --color-text-secondary: #dadadb;
- --color-text-muted: #9d9d9f;
- --color-error: #ff6b6b;
- --color-error-bg: rgba(255, 80, 80, 0.08);
- --color-error-border: rgba(255, 80, 80, 0.2);
- --card-radius: 1.5rem;
- --card-padding: 1.75rem 2rem;
- --grid-gap: 1.25rem;
-}
-
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-body {
- background: var(--color-bg);
- color: var(--color-text-primary);
- font-family: 'Inter', system-ui, sans-serif;
- overflow: hidden;
-}
-
-auto-scaler {
- position: relative;
- z-index: var(--z-index-content);
-}
-
-#app {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- padding: 1.25rem;
- gap: 1.25rem;
-}
-
-.header {
- flex-shrink: 0;
- border-radius: 0.75rem;
- padding: 0.5rem 1.25rem;
- background: var(--color-surface);
- border: 0.0625rem solid var(--color-border);
-}
-
-main {
- flex: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: hidden;
-}
-
-/* Dashboard screen */
-
-#dashboard-screen {
- flex: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: hidden;
- gap: 1.25rem;
-}
-
-#dashboard-title {
- font-size: 2rem;
- font-weight: 600;
- color: var(--color-text-primary);
- letter-spacing: -0.03em;
- flex-shrink: 0;
-}
-
-#charts-grid {
- display: grid;
- gap: var(--grid-gap);
- flex: 1;
- overflow: auto;
- align-content: start;
-}
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
-.chart-card {
- background: var(--color-surface);
- border: 0.0625rem solid var(--color-border);
- border-radius: var(--card-radius);
- padding: var(--card-padding);
- display: flex;
- flex-direction: column;
- gap: 1rem;
- min-height: 0;
- overflow: hidden;
-}
-
-.chart-title {
- font-size: 0.75rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-text-muted);
- flex-shrink: 0;
-}
-
-.chart-container {
- flex: 1;
- position: relative;
- min-height: 0;
- container-type: size;
-}
-
-.report-chart-card {
- min-height: 28rem;
-}
-
-.report-chart-container {
- min-height: 22rem;
-}
+@layer components {
+ .header {
+ @apply flex-shrink-0 rounded-xl py-2 px-5 bg-[#1a1a1a] border border-[#2a2a2a];
+ }
-.report-stat-card {
- min-height: 16rem;
-}
+ .dashboard-screen {
+ @apply flex-1 flex-col min-h-0 overflow-hidden gap-5;
+ }
-.report-table-card {
- min-height: 20rem;
-}
+ .dashboard-title {
+ @apply text-[2rem] font-semibold text-[#f2f2f3] tracking-[-0.03em] flex-shrink-0;
+ }
-/* Error screen */
+ .charts-grid {
+ @apply grid gap-5 flex-1 overflow-auto content-start;
+ }
-#error-screen {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
-}
+ .error-screen {
+ @apply flex-1 items-center justify-center;
+ }
-.error-card {
- background: var(--color-surface);
- border: 0.0625rem solid var(--color-error-border);
- border-radius: var(--card-radius);
- display: flex;
- flex-direction: row;
- overflow: hidden;
- max-width: 60rem;
- width: 100%;
-}
+ .error-card {
+ @apply flex flex-row portrait:flex-col overflow-hidden max-w-[60rem] portrait:max-w-full w-full rounded-3xl bg-[#1a1a1a] border border-[rgba(255,80,80,0.2)];
+ }
-.error-card-left {
- background: var(--color-error-bg);
- border-right: 0.0625rem solid var(--color-error-border);
- padding: 2.5rem 2rem;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- gap: 1rem;
- flex: 0 0 20rem;
-}
+ .error-aside {
+ @apply bg-[rgba(255,80,80,0.08)] border-[rgba(255,80,80,0.2)] border-r portrait:border-r-0 portrait:border-b py-10 px-8 flex flex-col justify-start gap-4 flex-[0_0_20rem] portrait:flex-none;
+ }
-.error-card-left h2 {
- font-size: 2rem;
- font-weight: 700;
- line-height: 1.2;
- letter-spacing: -0.03em;
- color: var(--color-error);
-}
+ .error-title {
+ @apply text-[2rem] font-bold leading-[1.2] tracking-[-0.03em] text-[#ff6b6b];
+ }
-.error-card-left p {
- font-size: 1rem;
- color: var(--color-text-secondary);
- line-height: 1.6;
-}
+ .error-body {
+ @apply flex-1 py-10 px-8 flex flex-col justify-start gap-3;
+ }
-.error-card-right {
- flex: 1;
- padding: 2.5rem 2rem;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- gap: 0.75rem;
-}
+ .error-label {
+ @apply text-xs font-semibold text-[#9d9d9f] uppercase tracking-[0.08em];
+ }
-.error-detail-label {
- font-size: 0.75rem;
- font-weight: 600;
- color: var(--color-text-muted);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
+ .error-aside p,
+ .error-message {
+ @apply text-base text-[#dadadb] leading-[1.6];
+ }
-.error-detail-message {
- font-size: 1rem;
- color: var(--color-text-secondary);
- line-height: 1.6;
- word-break: break-word;
-}
+ .error-message {
+ @apply break-words;
+ }
-/* Metric component */
+ .chart-card {
+ @apply bg-[#1a1a1a] border border-[#2a2a2a] rounded-3xl py-7 px-8 flex flex-col gap-4 min-h-0 overflow-hidden;
+ }
-.metric-value {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- font-size: clamp(2rem, 30cqh, 20rem);
- font-weight: 700;
- letter-spacing: -0.04em;
- color: var(--color-text-primary);
- text-align: center;
-}
+ .chart-title {
+ @apply text-xs font-semibold tracking-[0.08em] uppercase text-[#9d9d9f] flex-shrink-0;
+ }
-/* Empty state */
+ .chart-container {
+ @apply flex-1 relative min-h-0 [container-type:size];
+ }
-.empty-state {
- color: var(--color-text-muted);
- font-size: 0.875rem;
- text-align: center;
- margin: auto;
-}
+ .report-chart-card {
+ @apply min-h-[28rem];
+ }
-/* Data table */
+ .report-chart-container {
+ @apply min-h-[22rem];
+ }
-.table-scroll {
- width: 100%;
- height: 100%;
- overflow: auto;
-}
+ .report-table-card {
+ @apply min-h-80;
+ }
-.data-table {
- width: 100%;
- border-collapse: collapse;
- color: var(--color-text-secondary);
-}
+ .report-stat-card {
+ @apply min-h-64;
+ }
-.data-table th {
- padding: 0.75rem 1rem;
- text-align: left;
- font-size: 0.75rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-text-muted);
- white-space: nowrap;
- background-image: linear-gradient(var(--color-border), var(--color-border));
- background-size: 100% 0.0625rem;
- background-position: center bottom;
- background-repeat: no-repeat;
-}
+ .report-stat {
+ @apply flex flex-col justify-center h-full min-h-64 text-center gap-3;
+ }
-.data-table td {
- padding: 0.75rem 1rem;
- font-size: 0.9rem;
- text-align: left;
- white-space: nowrap;
- min-width: 8rem;
- background-image: linear-gradient(var(--color-border), var(--color-border));
- background-size: 100% 0.0625rem;
- background-position: center bottom;
- background-repeat: no-repeat;
-}
+ .report-stat-value {
+ @apply text-[clamp(3rem,7vw,6rem)] font-bold leading-[0.95] tracking-[-0.06em] text-[#f2f2f3];
+ }
-.data-table tbody tr:last-child td {
- background-image: none;
-}
+ .report-stat-label {
+ @apply text-sm font-semibold tracking-[0.08em] uppercase text-[#9d9d9f];
+ }
-/* Stat card */
+ .metric-value {
+ @apply flex items-center justify-center w-full h-full text-[clamp(2rem,30cqh,20rem)] font-bold tracking-[-0.04em] text-[#f2f2f3] text-center;
+ }
-.report-stat {
- display: flex;
- flex-direction: column;
- justify-content: center;
- height: 100%;
- min-height: 16rem;
- text-align: center;
- gap: 0.75rem;
-}
+ .empty-state {
+ @apply text-[#9d9d9f] text-sm text-center m-auto;
+ }
-.report-stat-value {
- font-size: clamp(3rem, 7vw, 6rem);
- font-weight: 700;
- line-height: 0.95;
- letter-spacing: -0.06em;
- color: var(--color-text-primary);
-}
+ .table-scroll {
+ @apply w-full h-full overflow-auto;
+ }
-.report-stat-label {
- font-size: 0.875rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-text-muted);
-}
+ .data-table {
+ @apply w-full border-collapse text-[#dadadb];
+ }
-@media (orientation: portrait) {
- .error-card {
- flex-direction: column;
- max-width: 100%;
+ .data-table th {
+ @apply px-4 py-3 text-left text-xs font-semibold tracking-[0.08em] uppercase text-[#9d9d9f] whitespace-nowrap bg-[linear-gradient(#2a2a2a,#2a2a2a)] [background-size:100%_0.0625rem] bg-bottom bg-no-repeat;
}
- .error-card-left {
- flex: none;
- border-right: none;
- border-bottom: 0.0625rem solid var(--color-error-border);
+ .data-table td {
+ @apply px-4 py-3 text-[0.9rem] text-left whitespace-nowrap min-w-32 bg-[linear-gradient(#2a2a2a,#2a2a2a)] [background-size:100%_0.0625rem] bg-bottom bg-no-repeat group-last:bg-none;
}
}
diff --git a/src/render/report.ts b/src/render/report.ts
index 3d759b6..8cbe0dc 100644
--- a/src/render/report.ts
+++ b/src/render/report.ts
@@ -34,11 +34,11 @@ export function appendReportCard(
card.style.gridColumn = '1 / span 12'
if (options?.cardClassName) {
- card.classList.add(options.cardClassName)
+ card.classList.add(...options.cardClassName.split(' '))
}
if (options?.containerClassName) {
- contentContainer.classList.add(options.containerClassName)
+ contentContainer.classList.add(...options.containerClassName.split(' '))
}
chartsGrid.appendChild(card)
diff --git a/src/render/table.ts b/src/render/table.ts
index 1c7bde6..51dd1b6 100644
--- a/src/render/table.ts
+++ b/src/render/table.ts
@@ -43,6 +43,7 @@ export function renderTable(
const tbody = document.createElement('tbody')
for (const row of rows) {
const tr = document.createElement('tr')
+ tr.className = 'group'
for (let i = 0; i < detailColumns.length; i++) {
const td = document.createElement('td')
const cell = row.dataCells[i]
Something went wrong
+
+
- Something went wrong
The Salesforce content could not be loaded. Please check your configuration or contact your administrator.
-
Error details
-
+
+
Error details
+