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

feat: improve mobile navigation with clickable page elements (#3770)

Browse source
This commit is contained in:
Prince EKPINSE 2025-11-29 13:53:32 +01:00
parent 776e404c6f
commit beb2bc0a06
3 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,12 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
} }
return ( return (
<PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3"> <PageHeader
title={website.name}
icon={<Favicon domain={website.domain} />}
marginBottom="3"
titleHref={renderUrl(`/websites/${website.id}`, false)}
>
<Row alignItems="center" gap="6" wrap="wrap"> <Row alignItems="center" gap="6" wrap="wrap">
<ActiveUsers websiteId={website.id} /> <ActiveUsers websiteId={website.id} />

11
src/components/common/PageHeader.tsx
View file

@ -1,5 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Heading, Icon, Row, Text, Column, Grid } from '@umami/react-zen'; import { Heading, Icon, Row, Text, Column, Grid } from '@umami/react-zen';
import { LinkButton } from './LinkButton';
export function PageHeader({ export function PageHeader({
title, title,
@ -7,6 +8,7 @@ export function PageHeader({
label, label,
icon, icon,
showBorder = true, showBorder = true,
titleHref,
children, children,
}: { }: {
title: string; title: string;
@ -14,6 +16,7 @@ export function PageHeader({
label?: ReactNode; label?: ReactNode;
icon?: ReactNode; icon?: ReactNode;
showBorder?: boolean; showBorder?: boolean;
titleHref?: string;
allowEdit?: boolean; allowEdit?: boolean;
className?: string; className?: string;
children?: ReactNode; children?: ReactNode;
@ -33,7 +36,13 @@ export function PageHeader({
{icon} {icon}
</Icon> </Icon>
)} )}
{title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>} {title && titleHref ? (
<LinkButton href={titleHref} variant="quiet">
<Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>
</LinkButton>
) : (
title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>
)}
</Row> </Row>
{description && ( {description && (
<Text color="muted" truncate style={{ maxWidth: 600 }} title={description}> <Text color="muted" truncate style={{ maxWidth: 600 }} title={description}>

13
src/components/metrics/ActiveUsers.tsx
View file

@ -1,6 +1,7 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { Text, StatusLight } from '@umami/react-zen'; import { Text, StatusLight } from '@umami/react-zen';
import { useMessages, useActyiveUsersQuery } from '@/components/hooks'; import { useMessages, useActyiveUsersQuery } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton';
export function ActiveUsers({ export function ActiveUsers({
websiteId, websiteId,
@ -27,10 +28,12 @@ export function ActiveUsers({
} }
return ( return (
<StatusLight variant="success"> <LinkButton href={`/websites/${websiteId}/realtime`} variant="quiet">
<Text size="2" weight="medium"> <StatusLight variant="success">
{count} {formatMessage(labels.online)} <Text size="2" weight="medium">
</Text> {count} {formatMessage(labels.online)}
</StatusLight> </Text>
</StatusLight>
</LinkButton>
); );
} }