watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

make SharesTable mobile friendly
Some checks are pending
Node.js CI / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Francis Cao 2026-01-28 10:48:13 -08:00
parent 3d75246802
commit b84942b6da
2 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/app/(main)/websites/[websiteId]/settings/SharesTable.tsx
View file

@ -1,13 +1,14 @@
import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen'; import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
import { DateDistance } from '@/components/common/DateDistance'; import { DateDistance } from '@/components/common/DateDistance';
import { ExternalLink } from '@/components/common/ExternalLink'; import { ExternalLink } from '@/components/common/ExternalLink';
import { useConfig, useMessages } from '@/components/hooks'; import { useConfig, useMessages, useMobile } from '@/components/hooks';
import { ShareDeleteButton } from './ShareDeleteButton'; import { ShareDeleteButton } from './ShareDeleteButton';
import { ShareEditButton } from './ShareEditButton'; import { ShareEditButton } from './ShareEditButton';
export function SharesTable(props: DataTableProps) { export function SharesTable(props: DataTableProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { cloudMode } = useConfig(); const { cloudMode } = useConfig();
const { isMobile } = useMobile();
const getUrl = (slug: string) => { const getUrl = (slug: string) => {
return `${cloudMode ? process.env.cloudUrl : window?.location.origin}${process.env.basePath || ''}/share/${slug}`; return `${cloudMode ? process.env.cloudUrl : window?.location.origin}${process.env.basePath || ''}/share/${slug}`;
@ -18,7 +19,7 @@ export function SharesTable(props: DataTableProps) {
<DataColumn id="name" label={formatMessage(labels.name)}> <DataColumn id="name" label={formatMessage(labels.name)}>
{({ name }: any) => name} {({ name }: any) => name}
</DataColumn> </DataColumn>
<DataColumn id="slug" label={formatMessage(labels.shareUrl)}> <DataColumn id="slug" label={formatMessage(labels.shareUrl)} width="2fr">
{({ slug }: any) => { {({ slug }: any) => {
const url = getUrl(slug); const url = getUrl(slug);
return ( return (
@ -28,9 +29,11 @@ export function SharesTable(props: DataTableProps) {
); );
}} }}
</DataColumn> </DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)} width="200px"> {!isMobile && (
{(row: any) => <DateDistance date={new Date(row.createdAt)} />} <DataColumn id="created" label={formatMessage(labels.created)}>
</DataColumn> {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
</DataColumn>
)}
<DataColumn id="action" align="end" width="100px"> <DataColumn id="action" align="end" width="100px">
{({ id, slug }: any) => { {({ id, slug }: any) => {
return ( return (

2
src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx
View file

@ -11,7 +11,7 @@ export interface WebsiteShareFormProps {
export function WebsiteShareForm({ websiteId }: WebsiteShareFormProps) { export function WebsiteShareForm({ websiteId }: WebsiteShareFormProps) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
const { data, isLoading } = useWebsiteSharesQuery({ websiteId }); const { data } = useWebsiteSharesQuery({ websiteId });
const shares = data?.data || []; const shares = data?.data || [];
const hasShares = shares.length > 0; const hasShares = shares.length > 0;