mirror of
https://github.com/umami-software/umami.git
synced 2026-02-04 04:37:11 +01:00
Responsive updates.
This commit is contained in:
Mike Cao
parent
53929626cf
commit
14981717b9
5 changed files with 231 additions and 212 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
'use client';
|
'use client';
|
||||||
import { Grid, Loading, Column } from '@umami/react-zen';
|
import { Grid, Loading, Column, Row } from '@umami/react-zen';
|
||||||
import Script from 'next/script';
|
import Script from 'next/script';
|
||||||
import { UpdateNotice } from './UpdateNotice';
|
import { UpdateNotice } from './UpdateNotice';
|
||||||
import { SideNav } from '@/app/(main)/SideNav';
|
import { SideNav } from '@/app/(main)/SideNav';
|
||||||
|
|
@ -28,11 +28,14 @@ export function App({ children }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid height="100vh" width="100%" columns="auto 1fr" backgroundColor="2">
|
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
|
||||||
<Column>
|
<Row display={{ xs: 'flex', md: 'none' }} alignItems="center" gap>
|
||||||
|
oh hi
|
||||||
|
</Row>
|
||||||
|
<Column display={{ xs: 'none', md: 'flex' }}>
|
||||||
<SideNav />
|
<SideNav />
|
||||||
</Column>
|
</Column>
|
||||||
<Column alignItems="center" overflow="auto" position="relative">
|
<Column alignItems="center" overflowY="auto" overflowX="hidden" position="relative">
|
||||||
{children}
|
{children}
|
||||||
</Column>
|
</Column>
|
||||||
<UpdateNotice user={user} config={config} />
|
<UpdateNotice user={user} config={config} />
|
||||||
|
|
|
||||||
|
|
@ -49,8 +49,7 @@ export function SideNav(props: SidebarProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row height="100%" backgroundColor>
|
<Sidebar {...props} isCollapsed={isCollapsed || hasNav} backgroundColor>
|
||||||
<Sidebar {...props} isCollapsed={isCollapsed || hasNav}>
|
|
||||||
<SidebarSection onClick={() => setIsCollapsed(false)}>
|
<SidebarSection onClick={() => setIsCollapsed(false)}>
|
||||||
<SidebarHeader
|
<SidebarHeader
|
||||||
label="umami"
|
label="umami"
|
||||||
|
|
@ -84,6 +83,5 @@ export function SideNav(props: SidebarProps) {
|
||||||
</Row>
|
</Row>
|
||||||
</SidebarSection>
|
</SidebarSection>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
</Row>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
177
src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
Normal file
177
src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
||||||
|
import { useMessages, useNavigation } from '@/components/hooks';
|
||||||
|
import { SideMenu } from '@/components/common/SideMenu';
|
||||||
|
import {
|
||||||
|
LogOut,
|
||||||
|
LogIn,
|
||||||
|
Search,
|
||||||
|
Type,
|
||||||
|
SquareSlash,
|
||||||
|
Share2,
|
||||||
|
Megaphone,
|
||||||
|
Earth,
|
||||||
|
Globe,
|
||||||
|
Landmark,
|
||||||
|
MapPin,
|
||||||
|
AppWindow,
|
||||||
|
Laptop,
|
||||||
|
Languages,
|
||||||
|
Monitor,
|
||||||
|
Cpu,
|
||||||
|
Network,
|
||||||
|
Tag,
|
||||||
|
} from '@/components/icons';
|
||||||
|
import { Lightning } from '@/components/svg';
|
||||||
|
|
||||||
|
export function WebsiteExpandedMenu({ excludedIds = [] }: { excludedIds?: string[] }) {
|
||||||
|
const { formatMessage, labels } = useMessages();
|
||||||
|
const {
|
||||||
|
updateParams,
|
||||||
|
query: { view },
|
||||||
|
} = useNavigation();
|
||||||
|
|
||||||
|
const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
label: 'URL',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'path',
|
||||||
|
label: formatMessage(labels.path),
|
||||||
|
path: updateParams({ view: 'path' }),
|
||||||
|
icon: <SquareSlash />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'entry',
|
||||||
|
label: formatMessage(labels.entry),
|
||||||
|
path: updateParams({ view: 'entry' }),
|
||||||
|
icon: <LogIn />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'exit',
|
||||||
|
label: formatMessage(labels.exit),
|
||||||
|
path: updateParams({ view: 'exit' }),
|
||||||
|
icon: <LogOut />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'title',
|
||||||
|
label: formatMessage(labels.title),
|
||||||
|
path: updateParams({ view: 'title' }),
|
||||||
|
icon: <Type />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'query',
|
||||||
|
label: formatMessage(labels.query),
|
||||||
|
path: updateParams({ view: 'query' }),
|
||||||
|
icon: <Search />,
|
||||||
|
},
|
||||||
|
].filter(filterExcluded),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: formatMessage(labels.sources),
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'referrer',
|
||||||
|
label: formatMessage(labels.referrer),
|
||||||
|
path: updateParams({ view: 'referrer' }),
|
||||||
|
icon: <Share2 />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'channel',
|
||||||
|
label: formatMessage(labels.channel),
|
||||||
|
path: updateParams({ view: 'channel' }),
|
||||||
|
icon: <Megaphone />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'domain',
|
||||||
|
label: formatMessage(labels.domain),
|
||||||
|
path: updateParams({ view: 'domain' }),
|
||||||
|
icon: <Globe />,
|
||||||
|
},
|
||||||
|
].filter(filterExcluded),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: formatMessage(labels.location),
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'country',
|
||||||
|
label: formatMessage(labels.country),
|
||||||
|
path: updateParams({ view: 'country' }),
|
||||||
|
icon: <Earth />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'region',
|
||||||
|
label: formatMessage(labels.region),
|
||||||
|
path: updateParams({ view: 'region' }),
|
||||||
|
icon: <MapPin />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'city',
|
||||||
|
label: formatMessage(labels.city),
|
||||||
|
path: updateParams({ view: 'city' }),
|
||||||
|
icon: <Landmark />,
|
||||||
|
},
|
||||||
|
].filter(filterExcluded),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: formatMessage(labels.environment),
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'browser',
|
||||||
|
label: formatMessage(labels.browser),
|
||||||
|
path: updateParams({ view: 'browser' }),
|
||||||
|
icon: <AppWindow />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'os',
|
||||||
|
label: formatMessage(labels.os),
|
||||||
|
path: updateParams({ view: 'os' }),
|
||||||
|
icon: <Cpu />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'device',
|
||||||
|
label: formatMessage(labels.device),
|
||||||
|
path: updateParams({ view: 'device' }),
|
||||||
|
icon: <Laptop />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'language',
|
||||||
|
label: formatMessage(labels.language),
|
||||||
|
path: updateParams({ view: 'language' }),
|
||||||
|
icon: <Languages />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'screen',
|
||||||
|
label: formatMessage(labels.screen),
|
||||||
|
path: updateParams({ view: 'screen' }),
|
||||||
|
icon: <Monitor />,
|
||||||
|
},
|
||||||
|
].filter(filterExcluded),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: formatMessage(labels.other),
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'event',
|
||||||
|
label: formatMessage(labels.event),
|
||||||
|
path: updateParams({ view: 'event' }),
|
||||||
|
icon: <Lightning />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'hostname',
|
||||||
|
label: formatMessage(labels.hostname),
|
||||||
|
path: updateParams({ view: 'hostname' }),
|
||||||
|
icon: <Network />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tag',
|
||||||
|
label: formatMessage(labels.tag),
|
||||||
|
path: updateParams({ view: 'tag' }),
|
||||||
|
icon: <Tag />,
|
||||||
|
},
|
||||||
|
].filter(filterExcluded),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return <SideMenu items={items} selectedKey={view} />;
|
||||||
|
}
|
||||||
|
|
@ -1,28 +1,7 @@
|
||||||
import { Grid, Column } from '@umami/react-zen';
|
import { Grid, Column } from '@umami/react-zen';
|
||||||
import { useMessages, useNavigation } from '@/components/hooks';
|
import { useMessages, useNavigation } from '@/components/hooks';
|
||||||
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
|
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
|
||||||
import { SideMenu } from '@/components/common/SideMenu';
|
import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu';
|
||||||
import {
|
|
||||||
LogOut,
|
|
||||||
LogIn,
|
|
||||||
Search,
|
|
||||||
Type,
|
|
||||||
SquareSlash,
|
|
||||||
Share2,
|
|
||||||
Megaphone,
|
|
||||||
Earth,
|
|
||||||
Globe,
|
|
||||||
Landmark,
|
|
||||||
MapPin,
|
|
||||||
AppWindow,
|
|
||||||
Laptop,
|
|
||||||
Languages,
|
|
||||||
Monitor,
|
|
||||||
Cpu,
|
|
||||||
Network,
|
|
||||||
Tag,
|
|
||||||
} from '@/components/icons';
|
|
||||||
import { Lightning } from '@/components/svg';
|
|
||||||
|
|
||||||
export function WebsiteExpandedView({
|
export function WebsiteExpandedView({
|
||||||
websiteId,
|
websiteId,
|
||||||
|
|
@ -35,158 +14,19 @@ export function WebsiteExpandedView({
|
||||||
}) {
|
}) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const {
|
const {
|
||||||
updateParams,
|
|
||||||
query: { view },
|
query: { view },
|
||||||
} = useNavigation();
|
} = useNavigation();
|
||||||
|
|
||||||
const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
label: 'URL',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
id: 'path',
|
|
||||||
label: formatMessage(labels.path),
|
|
||||||
path: updateParams({ view: 'path' }),
|
|
||||||
icon: <SquareSlash />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'entry',
|
|
||||||
label: formatMessage(labels.entry),
|
|
||||||
path: updateParams({ view: 'entry' }),
|
|
||||||
icon: <LogIn />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'exit',
|
|
||||||
label: formatMessage(labels.exit),
|
|
||||||
path: updateParams({ view: 'exit' }),
|
|
||||||
icon: <LogOut />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'title',
|
|
||||||
label: formatMessage(labels.title),
|
|
||||||
path: updateParams({ view: 'title' }),
|
|
||||||
icon: <Type />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'query',
|
|
||||||
label: formatMessage(labels.query),
|
|
||||||
path: updateParams({ view: 'query' }),
|
|
||||||
icon: <Search />,
|
|
||||||
},
|
|
||||||
].filter(filterExcluded),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: formatMessage(labels.sources),
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
id: 'referrer',
|
|
||||||
label: formatMessage(labels.referrer),
|
|
||||||
path: updateParams({ view: 'referrer' }),
|
|
||||||
icon: <Share2 />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'channel',
|
|
||||||
label: formatMessage(labels.channel),
|
|
||||||
path: updateParams({ view: 'channel' }),
|
|
||||||
icon: <Megaphone />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'domain',
|
|
||||||
label: formatMessage(labels.domain),
|
|
||||||
path: updateParams({ view: 'domain' }),
|
|
||||||
icon: <Globe />,
|
|
||||||
},
|
|
||||||
].filter(filterExcluded),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: formatMessage(labels.location),
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
id: 'country',
|
|
||||||
label: formatMessage(labels.country),
|
|
||||||
path: updateParams({ view: 'country' }),
|
|
||||||
icon: <Earth />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'region',
|
|
||||||
label: formatMessage(labels.region),
|
|
||||||
path: updateParams({ view: 'region' }),
|
|
||||||
icon: <MapPin />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'city',
|
|
||||||
label: formatMessage(labels.city),
|
|
||||||
path: updateParams({ view: 'city' }),
|
|
||||||
icon: <Landmark />,
|
|
||||||
},
|
|
||||||
].filter(filterExcluded),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: formatMessage(labels.environment),
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
id: 'browser',
|
|
||||||
label: formatMessage(labels.browser),
|
|
||||||
path: updateParams({ view: 'browser' }),
|
|
||||||
icon: <AppWindow />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'os',
|
|
||||||
label: formatMessage(labels.os),
|
|
||||||
path: updateParams({ view: 'os' }),
|
|
||||||
icon: <Cpu />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'device',
|
|
||||||
label: formatMessage(labels.device),
|
|
||||||
path: updateParams({ view: 'device' }),
|
|
||||||
icon: <Laptop />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'language',
|
|
||||||
label: formatMessage(labels.language),
|
|
||||||
path: updateParams({ view: 'language' }),
|
|
||||||
icon: <Languages />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'screen',
|
|
||||||
label: formatMessage(labels.screen),
|
|
||||||
path: updateParams({ view: 'screen' }),
|
|
||||||
icon: <Monitor />,
|
|
||||||
},
|
|
||||||
].filter(filterExcluded),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: formatMessage(labels.other),
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
id: 'event',
|
|
||||||
label: formatMessage(labels.event),
|
|
||||||
path: updateParams({ view: 'event' }),
|
|
||||||
icon: <Lightning />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'hostname',
|
|
||||||
label: formatMessage(labels.hostname),
|
|
||||||
path: updateParams({ view: 'hostname' }),
|
|
||||||
icon: <Network />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'tag',
|
|
||||||
label: formatMessage(labels.tag),
|
|
||||||
path: updateParams({ view: 'tag' }),
|
|
||||||
icon: <Tag />,
|
|
||||||
},
|
|
||||||
].filter(filterExcluded),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
|
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
|
||||||
<Column gap="6" border="right" paddingRight="3" overflowY="auto">
|
<Column
|
||||||
<SideMenu items={items} selectedKey={view} />
|
display={{ xs: 'none', md: 'flex' }}
|
||||||
|
gap="6"
|
||||||
|
border="right"
|
||||||
|
paddingRight="3"
|
||||||
|
overflowY="auto"
|
||||||
|
>
|
||||||
|
<WebsiteExpandedMenu excludedIds={excludedIds} />
|
||||||
</Column>
|
</Column>
|
||||||
<Column overflow="hidden">
|
<Column overflow="hidden">
|
||||||
<MetricsExpandedTable
|
<MetricsExpandedTable
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,8 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column
|
<Column
|
||||||
padding={{ xs: '3', md: '6' }}
|
paddingY="6"
|
||||||
|
paddingX={{ xs: '3', md: '6' }}
|
||||||
border
|
border
|
||||||
borderRadius="3"
|
borderRadius="3"
|
||||||
backgroundColor
|
backgroundColor
|
||||||
|
|
@ -50,7 +51,7 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
|
||||||
{allowFullscreen && (
|
{allowFullscreen && (
|
||||||
<Row justifyContent="flex-end" alignItems="center">
|
<Row justifyContent="flex-end" alignItems="center">
|
||||||
<TooltipTrigger delay={0} isDisabled={isFullscreen}>
|
<TooltipTrigger delay={0} isDisabled={isFullscreen}>
|
||||||
<Button variant="quiet" onPress={handleFullscreen}>
|
<Button size="sm" variant="quiet" onPress={handleFullscreen}>
|
||||||
<Icon>{isFullscreen ? <X /> : <Maximize />}</Icon>
|
<Icon>{isFullscreen ? <X /> : <Maximize />}</Icon>
|
||||||
</Button>
|
</Button>
|
||||||
<Tooltip>{formatMessage(labels.maximize)}</Tooltip>
|
<Tooltip>{formatMessage(labels.maximize)}</Tooltip>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue