ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

style: move Campaigns to 2-col grid, show UTM details on second line

Browse Source 
Pair Campaigns with Goals & Events in a half-width grid to avoid empty
space. Show medium and campaign on a visible second line under source
name instead of subtle inline text.
This commit is contained in:
Usman Baig
2026-03-07 00:01:24 +01:00
parent 34e59894af
commit 2acfd90bbd
2 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/sites/[id]/page.tsx
View File

@@ -607,16 +607,15 @@ export default function SiteDashboardPage() {
/> />
</div> </div>
{/* Campaigns Report */}
<div className="mb-8">
<Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8"> <div className="grid gap-6 lg:grid-cols-2 mb-8">
<Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
<GoalStats <GoalStats
goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))} goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))}
onSelectEvent={setSelectedEvent} onSelectEvent={setSelectedEvent}
/> />
</div>
<div className="mb-8">
<ScrollDepth goalCounts={goalsData?.goal_counts ?? []} totalPageviews={stats.pageviews} /> <ScrollDepth goalCounts={goalsData?.goal_counts ?? []} totalPageviews={stats.pageviews} />
</div> </div>

36
components/dashboard/Campaigns.tsx
View File

@@ -153,19 +153,19 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
<div <div
key={`${item.source}|${item.medium}|${item.campaign}`} key={`${item.source}|${item.medium}|${item.campaign}`}
onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })} onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`} className={`flex items-center justify-between py-1.5 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
> >
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3 min-w-0"> <div className="flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
{renderSourceIcon(item.source)} {renderSourceIcon(item.source)}
<div className="truncate min-w-0"> <div className="min-w-0">
<span className="truncate font-medium" title={item.source}> <div className="truncate font-medium text-sm" title={item.source}>
{getReferrerDisplayName(item.source)} {getReferrerDisplayName(item.source)}
</span> </div>
{secondary && ( <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
<span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}> {item.medium && <span>{item.medium}</span>}
{secondary} {item.medium && item.campaign && <span>·</span>}
</span> {item.campaign && <span className="truncate">{item.campaign}</span>}
)} </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-2 ml-4"> <div className="flex items-center gap-2 ml-4">
@@ -245,17 +245,17 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
key={`${item.source}|${item.medium}|${item.campaign}`} key={`${item.source}|${item.medium}|${item.campaign}`}
className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors" className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors"
> >
<div className="flex-1 truncate flex items-center gap-3 min-w-0"> <div className="flex-1 flex items-center gap-3 min-w-0">
{renderSourceIcon(item.source)} {renderSourceIcon(item.source)}
<div className="min-w-0"> <div className="min-w-0">
<span className="text-neutral-900 dark:text-white font-medium truncate" title={item.source}> <div className="text-neutral-900 dark:text-white font-medium truncate text-sm" title={item.source}>
{getReferrerDisplayName(item.source)} {getReferrerDisplayName(item.source)}
</span> </div>
{secondary && ( <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
<span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}> {item.medium && <span>{item.medium}</span>}
{secondary} {item.medium && item.campaign && <span>·</span>}
</span> {item.campaign && <span className="truncate">{item.campaign}</span>}
)} </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-4 ml-4 text-sm"> <div className="flex items-center gap-4 ml-4 text-sm">