Skip to content

Commit

Permalink
CSS updates.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikecao
mikecao committed Oct 3, 2023
1 parent 9bb89c7 commit e4c5f42
Show file tree
Hide file tree
Showing 22 changed files with 226 additions and 394 deletions.
28 changes: 13 additions & 15 deletions src/app/(app)/console/TestConsole.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import Script from 'next/script';
import { Button, Column, Row } from 'react-basics';
import { Button } from 'react-basics';
import styles from './TestConsole.module.css';

export function TestConsole() {
Expand Down Expand Up @@ -91,8 +91,8 @@ export function TestConsole() {
src={`${basePath}/script.js`}
data-cache="true"
/>
<Row className={styles.test}>
<Column xs="4">
<div className={styles.test}>
<div>
<div className={styles.header}>Page links</div>
<div>
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
Expand All @@ -115,8 +115,8 @@ export function TestConsole() {
external link (tab)
</a>
</div>
</Column>
<Column xs="4">
</div>
<div>
<div className={styles.header}>Click events</div>
<Button id="send-event-button" data-umami-event="button-click" variant="action">
Send event
Expand All @@ -131,8 +131,8 @@ export function TestConsole() {
>
Send event with data
</Button>
</Column>
<Column xs="4">
</div>
<div>
<div className={styles.header}>Javascript events</div>
<Button id="manual-button" variant="action" onClick={handleClick}>
Run script
Expand All @@ -141,14 +141,12 @@ export function TestConsole() {
<Button id="manual-button" variant="action" onClick={handleIdentifyClick}>
Run identify
</Button>
</Column>
</Row>
<Row>
<Column>
<WebsiteChart websiteId={website.id} />
<EventsChart websiteId={website.id} />
</Column>
</Row>
</div>
</div>
<div>
<WebsiteChart websiteId={website.id} />
<EventsChart websiteId={website.id} />
</div>
</>
)}
</Page>
Expand Down
50 changes: 16 additions & 34 deletions src/app/(app)/websites/WebsiteTableView.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from 'react';
import { GridRow, GridColumn } from 'components/layout/Grid';
import { Grid, GridRow } from 'components/layout/Grid';
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import BrowsersTable from 'components/metrics/BrowsersTable';
Expand All @@ -18,42 +18,24 @@ export default function WebsiteTableView({ websiteId }) {
};

return (
<>
<GridRow>
<GridColumn variant="two">
<PagesTable {...tableProps} />
</GridColumn>
<GridColumn variant="two">
<ReferrersTable {...tableProps} />
</GridColumn>
<Grid>
<GridRow columns="two">
<PagesTable {...tableProps} />
<ReferrersTable {...tableProps} />
</GridRow>
<GridRow>
<GridColumn variant="three">
<BrowsersTable {...tableProps} />
</GridColumn>
<GridColumn variant="three">
<OSTable {...tableProps} />
</GridColumn>
<GridColumn variant="three">
<DevicesTable {...tableProps} />
</GridColumn>
<GridRow columns="three">
<BrowsersTable {...tableProps} />
<OSTable {...tableProps} />
<DevicesTable {...tableProps} />
</GridRow>
<GridRow>
<GridColumn xs={12} sm={12} md={12} defaultSize={8}>
<WorldMap data={countryData} />
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</GridColumn>
<GridRow columns="two-one">
<WorldMap data={countryData} />
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</GridRow>
<GridRow>
<GridColumn xs={12} sm={12} md={12} lg={4} defaultSize={4}>
<EventsTable {...tableProps} />
</GridColumn>
<GridColumn xs={12} sm={12} md={12} lg={8} defaultSize={8}>
<EventsChart websiteId={websiteId} />
</GridColumn>
<GridRow columns="one-two">
<EventsTable {...tableProps} />
<EventsChart websiteId={websiteId} />
</GridRow>
</>
</Grid>
);
}
35 changes: 0 additions & 35 deletions src/app/(app)/websites/WebsiteTableView.module.css
View file

This file was deleted.

18 changes: 10 additions & 8 deletions src/app/(app)/websites/[id]/WebsiteHeader.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';
import classNames from 'classnames';
import { Row, Column, Text, Button, Icon } from 'react-basics';
import { Text, Button, Icon } from 'react-basics';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Favicon from 'components/common/Favicon';
Expand Down Expand Up @@ -39,17 +39,19 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
];

return (
<Row className={styles.header} justifyContent="center">
<Column className={styles.title} variant="two">
<div className={styles.header}>
<div className={styles.title}>
<Favicon domain={domain} />
<Text>{name}</Text>
<ActiveUsers websiteId={websiteId} />
</Column>
<Column className={styles.actions} variant="two">
</div>
<div className={styles.actions}>
{showLinks && (
<div className={styles.links}>
{links.map(({ label, icon, path }) => {
const selected = path ? pathname.endsWith(path) : pathname === '/websites/[id]';
const selected = path
? pathname.endsWith(path)
: pathname.match(/^\/websites\/[\w-]+$/);

return (
<Link key={label} href={`/websites/${websiteId}${path}`} shallow={true}>
Expand All @@ -68,8 +70,8 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
</div>
)}
{children}
</Column>
</Row>
</div>
</div>
);
}

Expand Down
12 changes: 8 additions & 4 deletions src/app/(app)/websites/[id]/WebsiteHeader.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.header {
display: flex;
flex-direction: row;
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
}

Expand Down Expand Up @@ -35,6 +35,10 @@
}

@media only screen and (max-width: 768px) {
.header {
grid-template-columns: 1fr;
}

.links {
justify-content: space-evenly;
flex: 1;
Expand All @@ -49,7 +53,7 @@

.icon,
.icon svg {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
}
}
114 changes: 53 additions & 61 deletions src/app/(app)/websites/[id]/WebsiteMetricsBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import MetricsBar from 'components/metrics/MetricsBar';
import FilterSelectForm from '../../reports/FilterSelectForm';
import PopupForm from '../../reports/PopupForm';
import { formatShortTime } from 'lib/format';
import { Button, Column, Icon, Icons, Popup, PopupTrigger, Row } from 'react-basics';
import { Button, Icon, Icons, Popup, PopupTrigger } from 'react-basics';
import styles from './WebsiteMetricsBar.module.css';

export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
Expand Down Expand Up @@ -98,72 +98,64 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
};

return (
<Row
<div
ref={ref}
className={classNames(styles.container, {
[styles.sticky]: sticky,
[styles.isSticky]: isSticky,
})}
>
<Column defaultSize={12} xl={8}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{!error && isFetched && (
<>
<MetricCard
className={styles.card}
label={formatMessage(labels.views)}
value={pageviews.value}
change={pageviews.change}
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.visitors)}
value={uniques.value}
change={uniques.change}
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.bounceRate)}
value={uniques.value ? (num / uniques.value) * 100 : 0}
change={
uniques.value && uniques.change
? (num / uniques.value) * 100 -
(Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
: 0
}
format={n => Number(n).toFixed(0) + '%'}
reverseColors
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.averageVisitTime)}
value={
totaltime.value && pageviews.value
? totaltime.value / (pageviews.value - bounces.value)
: 0
}
change={
totaltime.value && pageviews.value
? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
totaltime.value / (pageviews.value - bounces.value)) *
-1 || 0
: 0
}
format={n =>
`${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`
}
/>
</>
)}
</MetricsBar>
</Column>
<Column defaultSize={12} xl={4}>
<div className={styles.actions}>
{showFilter && <WebsiteFilterButton />}
<WebsiteDateFilter websiteId={websiteId} />
</div>
</Column>
</Row>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{pageviews && uniques && (
<>
<MetricCard
label={formatMessage(labels.views)}
value={pageviews.value}
change={pageviews.change}
/>
<MetricCard
label={formatMessage(labels.visitors)}
value={uniques.value}
change={uniques.change}
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.bounceRate)}
value={uniques.value ? (num / uniques.value) * 100 : 0}
change={
uniques.value && uniques.change
? (num / uniques.value) * 100 -
(Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
: 0
}
format={n => Number(n).toFixed(0) + '%'}
reverseColors
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.averageVisitTime)}
value={
totaltime.value && pageviews.value
? totaltime.value / (pageviews.value - bounces.value)
: 0
}
change={
totaltime.value && pageviews.value
? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
totaltime.value / (pageviews.value - bounces.value)) *
-1 || 0
: 0
}
format={n => `${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
/>
</>
)}
</MetricsBar>
<div className={styles.actions}>
{showFilter && <WebsiteFilterButton />}
<WebsiteDateFilter websiteId={websiteId} />
</div>
</div>
);
}

Expand Down
Loading

0 comments on commit e4c5f42

Please sign in to comment.