watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-06 01:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Responsive updates.

Browse source
This commit is contained in:
Mike Cao 2025-10-09 17:14:09 -07:00
parent e4ce7c9071
commit 8aa4192576
14 changed files with 976 additions and 917 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -78,7 +78,7 @@
"@react-spring/web": "^10.0.3",
"@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.90.2",
"@umami/react-zen": "^0.187.0",
"@umami/react-zen": "^0.189.0",
"@umami/redis-client": "^0.29.0",
"bcryptjs": "^3.0.2",
"chalk": "^5.6.2",

1774
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

2
src/app/(main)/links/[linkId]/LinkPanels.tsx
View file

@ -55,7 +55,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel noPadding>
<Panel padding="0">
<WorldMap websiteId={linkId} />
</Panel>
<Panel>

2
src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
View file

@ -55,7 +55,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel noPadding>
<Panel padding="0">
<WorldMap websiteId={pixelId} />
</Panel>
<Panel>

20
src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
View file

@ -1,4 +1,4 @@
import { Column, Row } from '@umami/react-zen';
import { Column, Row, Grid } from '@umami/react-zen';
import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton';
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { FilterBar } from '@/components/input/FilterBar';
@ -22,12 +22,18 @@ export function WebsiteControls({
}) {
return (
<Column gap>
<Row alignItems="center" justifyContent="space-between" gap="3">
{allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
{allowDateFilter && <WebsiteDateFilter websiteId={websiteId} allowCompare={allowCompare} />}
{allowDownload && <ExportButton websiteId={websiteId} />}
{allowMonthFilter && <MonthFilter />}
</Row>
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
<Row alignItems="center" justifyContent="flex-end">
{allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
</Row>
<Row alignItems="center" justifyContent="flex-end">
{allowDateFilter && (
<WebsiteDateFilter websiteId={websiteId} allowCompare={allowCompare} />
)}
{allowDownload && <ExportButton websiteId={websiteId} />}
{allowMonthFilter && <MonthFilter />}
</Row>
</Grid>
{allowFilter && <FilterBar websiteId={websiteId} />}
</Column>
);

6
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -22,7 +22,11 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
<ActiveUsers websiteId={website.id} />
{showActions && (
<Row alignItems="center" gap>
<Row
display={{ xs: 'none', sm: 'none', md: 'none', lg: 'flex', xl: 'flex' }}
alignItems="center"
gap
>
<ShareButton websiteId={website.id} shareId={website.shareId} />
<LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
<Icon>

21
src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
View file

@ -2,24 +2,23 @@
import { ReactNode } from 'react';
import { Column, Grid } from '@umami/react-zen';
import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
import { useNavigation } from '@/components/hooks';
import { PageBody } from '@/components/common/PageBody';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteNav } from './WebsiteNav';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
const { pathname } = useNavigation();
const isSettings = pathname.endsWith('/settings');
return (
<WebsiteProvider websiteId={websiteId}>
<Grid columns={isSettings ? '1fr' : 'auto 1fr'} width="100%" height="100%">
{!isSettings && (
<Column height="100%" border="right" backgroundColor marginRight="2">
<WebsiteNav websiteId={websiteId} />
</Column>
)}
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Column
display={{ xs: 'none', lg: 'flex' }}
height="100%"
border="right"
backgroundColor
marginRight="2"
>
<WebsiteNav websiteId={websiteId} />
</Column>
<PageBody gap>
<WebsiteHeader showActions />
<Column>{children}</Column>

4
src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
View file

@ -106,7 +106,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
</GridRow>
<GridRow layout="two-one" {...rowProps}>
<Panel gridColumn="span 2" noPadding>
<Panel gridColumn={{ xs: 'span 1', md: 'span 2' }} padding="0">
<WorldMap websiteId={websiteId} />
</Panel>
@ -130,7 +130,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
filterLink={false}
/>
</Panel>
<Panel gridColumn="span 2">
<Panel gridColumn={{ xs: 'span 1', md: 'span 2' }}>
<EventsChart websiteId={websiteId} />
</Panel>
</GridRow>

2
src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx
View file

@ -44,7 +44,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
<Panel>
<RealtimeCountries data={countries} />
</Panel>
<Panel gridColumn="span 2" noPadding>
<Panel gridColumn="span 2" padding="0">
<WorldMap data={countries} />
</Panel>
</GridRow>

5
src/components/common/GridRow.tsx
View file

@ -14,12 +14,11 @@ const LAYOUTS = {
md: 'repeat(auto-fill, minmax(360px, 1fr))',
},
},
'one-two': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },
'two-one': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },
'one-two': { columns: { xs: '1fr', md: 'repeat(3, 1fr)' } },
'two-one': { columns: { xs: '1fr', md: 'repeat(3, 1fr)' } },
};
export function GridRow(props: {
[x: string]: any;
layout?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
className?: string;
children?: any;

9
src/components/common/PageBody.tsx
View file

@ -28,7 +28,14 @@ export function PageBody({
}
return (
<Column {...props} width="100%" paddingBottom="9" style={{ margin: '0 auto', maxWidth }}>
<Column
{...props}
width="100%"
paddingBottom="9"
maxWidth={maxWidth}
paddingX="4"
style={{ margin: '0 auto' }}
>
{children}
</Column>
);

12
src/components/common/Panel.tsx
View file

@ -15,7 +15,6 @@ import { useMessages } from '@/components/hooks';
export interface PanelProps extends ColumnProps {
title?: string;
allowFullscreen?: boolean;
noPadding?: boolean;
}
const fullscreenStyles = {
@ -28,14 +27,7 @@ const fullscreenStyles = {
zIndex: 9999,
} as any;
export function Panel({
title,
allowFullscreen,
noPadding,
style,
children,
...props
}: PanelProps) {
export function Panel({ title, allowFullscreen, style, children, ...props }: PanelProps) {
const { formatMessage, labels } = useMessages();
const [isFullscreen, setIsFullscreen] = useState(false);
@ -45,7 +37,7 @@ export function Panel({
return (
<Column
padding={!noPadding ? '6' : undefined}
padding={{ xs: '3', md: '6' }}
border
borderRadius="3"
backgroundColor

2
src/components/metrics/MetricsBar.tsx
View file

@ -7,7 +7,7 @@ export interface MetricsBarProps extends GridProps {
export function MetricsBar({ children, ...props }: MetricsBarProps) {
return (
<Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
<Grid columns="repeat(auto-fit, minmax(170px, 1fr))" gap {...props}>
{children}
</Grid>
);

32
src/components/metrics/MetricsTable.tsx
View file

@ -1,11 +1,11 @@
import { useEffect, useMemo } from 'react';
import { Icon, Text, Row, Grid } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useMessages, useNavigation, useWebsiteMetricsQuery } from '@/components/hooks';
import { Maximize } from '@/components/icons';
import { MetricLabel } from '@/components/metrics/MetricLabel';
import { percentFilter } from '@/lib/filters';
import { Icon, Row, Text } from '@umami/react-zen';
import { useEffect, useMemo } from 'react';
import { ListTable, ListTableProps } from './ListTable';
export interface MetricsTableProps extends ListTableProps {
@ -77,21 +77,19 @@ export function MetricsTable({
error={error}
minHeight="400px"
>
<div style={{ display: 'grid', gridTemplateRows: '1fr auto', minHeight: '400px' }}>
<div>{data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}</div>
<div>
{showMore && limit && (
<Row justifyContent="center" alignItems="flex-end">
<LinkButton href={updateParams({ view: type })} variant="quiet">
<Icon size="sm">
<Maximize />
</Icon>
<Text>{formatMessage(labels.more)}</Text>
</LinkButton>
</Row>
)}
</div>
</div>
<Grid>
{data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}
{showMore && limit && (
<Row justifyContent="center" alignItems="flex-end">
<LinkButton href={updateParams({ view: type })} variant="quiet">
<Icon size="sm">
<Maximize />
</Icon>
<Text>{formatMessage(labels.more)}</Text>
</LinkButton>
</Row>
)}
</Grid>
</LoadingPanel>
);
}