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

Fix modal. Re-add form css.

Browse source
This commit is contained in:
Brian Cao 2023-01-12 16:45:54 -08:00
parent e8b208744e
commit 94bf7b04dd
5 changed files with 77 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/common/Modal.module.css
View file

@ -5,7 +5,7 @@
right: 0;
bottom: 0;
margin: auto;
z-index: 2;
z-index: 3;
}
.modal:before {

1
components/layout/Layout.js
View file

@ -27,6 +27,7 @@ export default function Layout({ title, children, header = true, footer = true }
{header && <Header />}
<main>{children}</main>
{footer && <Footer />}
<div id="__modals" dir={dir} />
</Container>
);
}

47
components/pages/WebsiteDetails.js
View file

@ -1,27 +1,30 @@
import { useState } from 'react';
import { Column } from 'react-basics';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Arrow from 'assets/arrow-right.svg';
import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart';
import WorldMap from 'components/common/WorldMap';
import Page from 'components/layout/Page';
import GridRow from 'components/layout/GridRow';
import MenuLayout from 'components/layout/MenuLayout';
import EventDataButton from 'components/common/EventDataButton';
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import WorldMap from 'components/common/WorldMap';
import GridRow from 'components/layout/GridRow';
import MenuLayout from 'components/layout/MenuLayout';
import Page from 'components/layout/Page';
import BrowsersTable from 'components/metrics/BrowsersTable';
import OSTable from 'components/metrics/OSTable';
import DevicesTable from 'components/metrics/DevicesTable';
import CountriesTable from 'components/metrics/CountriesTable';
import DevicesTable from 'components/metrics/DevicesTable';
import EventsChart from 'components/metrics/EventsChart';
import EventsTable from 'components/metrics/EventsTable';
import LanguagesTable from 'components/metrics/LanguagesTable';
import ScreenTable from 'components/metrics/ScreenTable';
import OSTable from 'components/metrics/OSTable';
import PagesTable from 'components/metrics/PagesTable';
import QueryParametersTable from 'components/metrics/QueryParametersTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import ScreenTable from 'components/metrics/ScreenTable';
import WebsiteChart from 'components/metrics/WebsiteChart';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Arrow from 'assets/arrow-right.svg';
import { useState } from 'react';
import { Column } from 'react-basics';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import styles from './WebsiteDetails.module.css';
const messages = defineMessages({
@ -33,6 +36,7 @@ const messages = defineMessages({
devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
events: { id: 'metrics.events', defaultMessage: 'Events' },
query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
});
@ -45,6 +49,7 @@ const views = {
screen: ScreenTable,
country: CountriesTable,
language: LanguagesTable,
event: EventsTable,
query: QueryParametersTable,
};
@ -52,6 +57,7 @@ export default function WebsiteDetails({ websiteId }) {
const { data } = useFetch(`/websites/${websiteId}`);
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = useState();
const {
resolve,
query: { view },
@ -102,6 +108,10 @@ export default function WebsiteDetails({ websiteId }) {
label: formatMessage(messages.screens),
value: resolve({ view: 'screen' }),
},
{
label: formatMessage(messages.events),
value: resolve({ view: 'event' }),
},
{
label: formatMessage(messages.query),
value: resolve({ view: 'query' }),
@ -166,6 +176,15 @@ export default function WebsiteDetails({ websiteId }) {
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</Column>
</GridRow>
<GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
<Column xs={12} md={12} lg={12} defaultSize={4}>
<EventsTable {...tableProps} onDataLoad={setEventsData} />
</Column>
<Column xs={12} md={12} lg={12} defaultSize={8}>
<EventDataButton websiteId={websiteId} />
<EventsChart className={styles.eventschart} websiteId={websiteId} />
</Column>
</GridRow>
</>
)}
{view && chartLoaded && (

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

@ -29,3 +29,7 @@
.hidden {
display: none;
}
.eventschart {
padding-top: 30px;
}

38
styles/index.css
View file

@ -88,3 +88,41 @@ svg {
height: 100%;
flex: 1;
}
input[type='text'],
input[type='password'],
select,
textarea {
color: var(--base900);
background: var(--base50);
padding: 4px 8px;
font-size: var(--font-size-normal);
line-height: 1.8;
border: 1px solid var(--base500);
border-radius: 4px;
outline: none;
resize: none;
flex: 1;
}
input[type='checkbox'] + label {
margin-left: 10px;
}
label {
flex: 1;
margin-right: 20px;
}
label:empty {
flex: 0;
}
dt {
font-weight: 600;
margin: 0 0 5px 0;
}
dd {
margin: 0 0 30px 0;
}