watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 23:57:12 +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

2
components/metrics/ActiveUsers.module.css
View file

@ -5,7 +5,7 @@
.text {
display: flex;
font-size: var(--font-size-normal);
font-size: var(--font-size-md);
}
.value {

6
components/metrics/ChartTooltip.module.css
View file

@ -17,7 +17,7 @@
}
.title {
font-size: var(--font-size-xsmall);
font-size: var(--font-size-xs);
font-weight: 600;
}
@ -25,7 +25,7 @@
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
font-weight: 600;
}
@ -34,7 +34,7 @@
overflow: hidden;
border-radius: 100%;
margin-right: 8px;
background: var(--gray50);
background: var(--base50);
}
.color {

10
components/metrics/DataTable.module.css
View file

@ -1,7 +1,7 @@
.table {
position: relative;
height: 100%;
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
display: grid;
grid-template-rows: fit-content(100%) auto;
overflow: hidden;
@ -23,11 +23,11 @@
.title {
display: flex;
font-weight: 600;
font-size: var(--font-size-normal);
font-size: var(--font-size-md);
}
.metric {
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
font-weight: 600;
text-align: center;
width: 100px;
@ -80,8 +80,8 @@
.percent {
position: relative;
width: 50px;
color: var(--gray600);
border-left: 1px solid var(--gray600);
color: var(--base600);
border-left: 1px solid var(--base600);
padding-left: 10px;
z-index: 1;
}

4
components/metrics/Legend.module.css
View file

@ -8,7 +8,7 @@
.label {
display: flex;
align-items: center;
font-size: var(--font-size-xsmall);
font-size: var(--font-size-xs);
cursor: pointer;
}
@ -17,5 +17,5 @@
}
.hidden {
color: var(--gray400);
color: var(--base400);
}

8
components/metrics/MetricCard.module.css
View file

@ -6,7 +6,7 @@
}
.value {
font-size: var(--font-size-xlarge);
font-size: var(--font-size-xl);
line-height: 40px;
min-height: 40px;
font-weight: 600;
@ -14,7 +14,7 @@
}
.label {
font-size: var(--font-size-normal);
font-size: var(--font-size-md);
white-space: nowrap;
display: flex;
align-items: center;
@ -26,8 +26,8 @@
padding: 0 5px;
border-radius: 5px;
margin-left: 4px;
border: 1px solid var(--gray200);
color: var(--gray500);
border: 1px solid var(--base200);
color: var(--base500);
}
.change.positive {

2
components/metrics/MetricsTable.module.css
View file

@ -2,7 +2,7 @@
position: relative;
min-height: 430px;
height: 100%;
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
display: flex;
flex-direction: column;
}

6
components/metrics/RealtimeLog.module.css
View file

@ -1,5 +1,5 @@
.table {
font-size: var(--font-size-xsmall);
font-size: var(--font-size-xs);
overflow: hidden;
height: 100%;
display: grid;
@ -19,7 +19,7 @@
display: flex;
align-items: center;
height: 40px;
border-bottom: 1px solid var(--gray300);
border-bottom: 1px solid var(--base300);
}
.body {
@ -50,7 +50,7 @@
}
.row .link {
color: var(--gray900);
color: var(--base900);
text-decoration: none;
}

4
components/metrics/WebsiteChart.module.css
View file

@ -31,8 +31,8 @@
position: fixed;
top: 0;
margin: auto;
background: var(--gray50);
border-bottom: 1px solid var(--gray300);
background: var(--base50);
border-bottom: 1px solid var(--base300);
z-index: 3;
}

62
components/metrics/WebsiteHeader.js
View file

@ -1,57 +1,29 @@
import Arrow from 'assets/arrow-right.svg';
import classNames from 'classnames';
import { Row, Column } from 'react-basics';
import Favicon from 'components/common/Favicon';
import Link from 'components/common/Link';
import OverflowText from 'components/common/OverflowText';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
import PageHeader from 'components/layout/PageHeader';
import { FormattedMessage } from 'react-intl';
import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css';
export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
const header = showLink ? (
<>
<Favicon domain={domain} />
<Link
className={styles.titleLink}
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Link>
</>
) : (
<>
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</>
);
export default function WebsiteHeader({ websiteId, title, domain }) {
return (
<PageHeader className="row">
<div className={classNames(styles.title, 'col-10 col-lg-4 order-1 order-lg-1')}>{header}</div>
<div className={classNames(styles.active, 'col-12 col-lg-4 order-3 order-lg-2')}>
<ActiveUsers websiteId={websiteId} />
</div>
<div className="col-2 col-lg-4 order-2 order-lg-3">
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
{showLink && (
<Link
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
className={styles.link}
icon={<Arrow />}
size="small"
iconRight
>
<FormattedMessage id="label.view-details" defaultMessage="View details" />
</Link>
)}
</ButtonLayout>
</div>
<PageHeader>
<Row>
<Column className={styles.title} xs={12} sm={12} md={4} lg={4}>
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Column>
<Column className={styles.active} xs={12} sm={12} md={4} lg={4}>
<ActiveUsers websiteId={websiteId} />
</Column>
<Column xs={12} sm={12} md={4} lg={4}>
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
</ButtonLayout>
</Column>
</Row>
</PageHeader>
);
}

29
components/metrics/WebsiteHeader.module.css
View file

@ -1,32 +1,15 @@
.title {
color: var(--gray900);
font-size: var(--font-size-large);
line-height: var(--font-size-xlarge);
align-items: center;
display: flex;
max-width: 100%;
flex-direction: row;
align-items: center;
gap: 10px;
font-size: var(--font-size-lg);
overflow: hidden;
}
.titleLink {
max-width: 100%;
}
.link {
font-weight: 600;
}
.active {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 992px) {
.active {
justify-content: flex-start;
}
a.link {
display: none;
}
}