zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

better widget navigation

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-02-15 09:45:16 +01:00
parent 0381d60d90
commit 063026bbd6
6 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/overview/overview-top-devices.tsx
View File

@@ -171,7 +171,7 @@ export default function OverviewTopDevices({
return (
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead className="flex items-center justify-between">
<WidgetHead>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (

2
apps/web/src/components/overview/overview-top-events.tsx
View File

@@ -59,7 +59,7 @@ export default function OverviewTopEvents({
return (
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead className="flex items-center justify-between">
<WidgetHead>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (

2
apps/web/src/components/overview/overview-top-geo.tsx
View File

@@ -134,7 +134,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
return (
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead className="flex items-center justify-between">
<WidgetHead>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (

2
apps/web/src/components/overview/overview-top-pages.tsx
View File

@@ -105,7 +105,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
return (
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead className="flex items-center justify-between">
<WidgetHead>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (

2
apps/web/src/components/overview/overview-top-sources.tsx
View File

@@ -260,7 +260,7 @@ export default function OverviewTopSources({
return (
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead className="flex items-center justify-between">
<WidgetHead>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (

11
apps/web/src/components/overview/overview-widget.tsx
View File

@@ -19,7 +19,10 @@ import { WidgetHead as WidgetHeadBase } from '../Widget';
export function WidgetHead({ className, ...props }: WidgetHeadProps) {
return (
<WidgetHeadBase
className={cn('flex items-center justify-between', className)}
className={cn(
'flex flex-col p-0 [&_.title]:text-sm [&_.title]:px-4 [&_.title]:py-2',
className
)}
{...props}
/>
);
@@ -32,8 +35,8 @@ export function WidgetButtons({
}: WidgetHeadProps) {
const container = useRef<HTMLDivElement>(null);
const sizes = useRef<number[]>([]);
const [slice, setSlice] = useState(-1);
const gap = 8;
const [slice, setSlice] = useState(3); // Show 3 buttons by default
const gap = 16;
const handleResize = useThrottle(() => {
if (container.current) {
@@ -82,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'flex-1 justify-end transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100',
'px-4 self-stretch justify-start transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100 [&_button.active]:border-b [&_button.active]:border-black [&_button]:py-1',
className
)}
style={{ gap }}