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

Implement react-basics styles. Fix queries.

Browse source
This commit is contained in:
Mike Cao 2022-12-08 23:43:43 -08:00
parent b57ecf33e6
commit 0a6ecfe3d2
59 changed files with 227 additions and 4336 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/pages/DashboardEdit.module.css
View file

@ -16,19 +16,19 @@
.item h2 {
font-size: 14px;
color: var(--gray700);
color: var(--base700);
}
.text {
padding: 20px;
border-radius: 5px;
border: 1px solid var(--gray400);
background: var(--gray50);
border: 1px solid var(--base400);
background: var(--base50);
}
.active .text {
border-color: var(--gray600);
box-shadow: 4px 4px 4px var(--gray100);
border-color: var(--base600);
box-shadow: 4px 4px 4px var(--base100);
}
.dragActive {

26
components/pages/TestConsole.js
View file

@ -1,4 +1,4 @@
import classNames from 'classnames';
import { Row, Column } from 'react-basics';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
@ -62,8 +62,8 @@ export default function TestConsole() {
</PageHeader>
{website && (
<>
<div className={classNames(styles.test, 'row')}>
<div className="col-4">
<Row className={styles.test}>
<Column xs="4">
<PageHeader>Page links</PageHeader>
<div>
<Link href={`/console/${websiteId}?page=1`}>
@ -87,22 +87,22 @@ export default function TestConsole() {
</a>
</Link>
</div>
</div>
<div className="col-4">
</Column>
<Column xs="4">
<PageHeader>CSS events</PageHeader>
<Button id="primary-button" className="umami--click--button-click" variant="action">
Send event
</Button>
</div>
<div className="col-4">
</Column>
<Column xs="4">
<PageHeader>Javascript events</PageHeader>
<Button id="manual-button" variant="action" onClick={handleClick}>
Run script
</Button>
</div>
</div>
<div className="row">
<div className="col-12">
</Column>
</Row>
<Row>
<Column>
<WebsiteChart
websiteId={website.id}
title={website.name}
@ -111,8 +111,8 @@ export default function TestConsole() {
/>
<PageHeader>Events</PageHeader>
<EventsChart websiteId={website.id} />
</div>
</div>
</Column>
</Row>
</>
)}
</Page>

2
components/pages/TestConsole.module.css
View file

@ -1,5 +1,5 @@
.test {
border: 1px solid var(--gray200);
border: 1px solid var(--base200);
border-radius: 5px;
padding: 0 20px 20px 20px;
}

68
components/pages/WebsiteDetails.js
View file

@ -1,10 +1,10 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Row, Column } from 'react-basics';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart';
import WorldMap from 'components/common/WorldMap';
import Page from 'components/layout/Page';
import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
import MenuLayout from 'components/layout/MenuLayout';
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
@ -137,8 +137,8 @@ export default function WebsiteDetails({ websiteId }) {
return (
<Page>
<div className="row">
<div className={classNames(styles.chart, 'col')}>
<Row>
<Column className={styles.chart}>
<WebsiteChart
websiteId={websiteId}
title={data.name}
@ -148,47 +148,47 @@ export default function WebsiteDetails({ websiteId }) {
stickyHeader
/>
{!chartLoaded && <Loading />}
</div>
</div>
</Column>
</Row>
{chartLoaded && !view && (
<GridLayout>
<GridRow>
<GridColumn md={12} lg={6}>
<>
<Row>
<Column md={12} lg={6}>
<PagesTable {...tableProps} />
</GridColumn>
<GridColumn md={12} lg={6}>
</Column>
<Column md={12} lg={6}>
<ReferrersTable {...tableProps} />
</GridColumn>
</GridRow>
<GridRow>
<GridColumn md={12} lg={4}>
</Column>
</Row>
<Row>
<Column md={12} lg={4}>
<BrowsersTable {...tableProps} />
</GridColumn>
<GridColumn md={12} lg={4}>
</Column>
<Column md={12} lg={4}>
<OSTable {...tableProps} />
</GridColumn>
<GridColumn md={12} lg={4}>
</Column>
<Column md={12} lg={4}>
<DevicesTable {...tableProps} />
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} md={12} lg={8}>
</Column>
</Row>
<Row>
<Column xs={12} md={12} lg={8}>
<WorldMap data={countryData} />
</GridColumn>
<GridColumn xs={12} md={12} lg={4}>
</Column>
<Column xs={12} md={12} lg={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</GridColumn>
</GridRow>
<GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
<GridColumn xs={12} md={12} lg={4}>
</Column>
</Row>
<Row className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
<Column xs={12} md={12} lg={4}>
<EventsTable {...tableProps} onDataLoad={setEventsData} />
</GridColumn>
<GridColumn xs={12} md={12} lg={8}>
</Column>
<Column xs={12} md={12} lg={8}>
<EventDataButton websiteId={websiteId} />
<EventsChart className={styles.eventschart} websiteId={websiteId} />
</GridColumn>
</GridRow>
</GridLayout>
</Column>
</Row>
</>
)}
{view && chartLoaded && (
<MenuLayout

4
components/pages/WebsiteDetails.module.css
View file

@ -3,11 +3,11 @@
}
.view {
border-top: 1px solid var(--gray300);
border-top: 1px solid var(--base300);
}
.menu {
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
}
.content {

2
components/pages/WebsiteList.module.css
View file

@ -1,6 +1,6 @@
.website {
padding-bottom: 30px;
border-bottom: 1px solid var(--gray300);
border-bottom: 1px solid var(--base300);
margin-bottom: 30px;
align-self: stretch;
}