Skip to content

Commit ce35a2d

Browse files
mikecaomikecao
authored
Merge pull request #580 from mikecao/dev
v1.16.0
2 parents f8ac987 + 555cb67 commit ce35a2d

33 files changed

+1303
-304
lines changed

‎components/common/WorldMap.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import React, { useState, useMemo } from 'react';
2+
import { useRouter } from 'next/router';
23
import PropTypes from 'prop-types';
34
import ReactTooltip from 'react-tooltip';
45
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
56
import classNames from 'classnames';
67
import tinycolor from 'tinycolor2';
78
import useTheme from 'hooks/useTheme';
8-
import { THEME_COLORS } from 'lib/constants';
9+
import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
910
import styles from './WorldMap.module.css';
1011
import useCountryNames from 'hooks/useCountryNames';
1112
import useLocale from 'hooks/useLocale';
12-
import { useRouter } from 'next/router';
13-
14-
const geoUrl = '/world-110m.json';
1513

1614
function WorldMap({ data, className }) {
1715
const { basePath } = useRouter();
@@ -60,10 +58,10 @@ function WorldMap({ data, className }) {
6058
>
6159
<ComposableMap projection="geoMercator">
6260
<ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
63-
<Geographies geography={`${basePath}${geoUrl}`}>
61+
<Geographies geography={`${basePath}${MAP_FILE}`}>
6462
{({ geographies }) => {
6563
return geographies.map(geo => {
66-
const code = geo.properties.ISO_A2;
64+
const code = ISO_COUNTRIES[geo.id];
6765

6866
return (
6967
<Geography

‎components/forms/WebsiteEditForm.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
7272
<FormattedMessage id="label.domain" defaultMessage="Domain" />
7373
</label>
7474
<div>
75-
<Field name="domain" type="text" />
75+
<Field name="domain" type="text" placeholder="example.com" />
7676
<FormError name="domain" />
7777
</div>
7878
</FormRow>

‎components/layout/Header.js

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { FormattedMessage } from 'react-intl';
33
import { useSelector } from 'react-redux';
44
import classNames from 'classnames';
@@ -13,40 +13,66 @@ import styles from './Header.module.css';
1313

1414
export default function Header() {
1515
const user = useSelector(state => state.user);
16+
const [active, setActive] = useState(false);
17+
18+
function handleClick() {
19+
setActive(state => !state);
20+
}
1621

1722
return (
18-
<header className="container">
23+
<nav className="container">
1924
{user?.is_admin && <UpdateNotice />}
2025
<div className={classNames(styles.header, 'row align-items-center')}>
21-
<div className="col-6 col-lg-3 order-1 order-lg-1">
22-
<div className={styles.title}>
23-
<Icon icon={<Logo />} size="large" className={styles.logo} />
24-
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
26+
<div className={styles.nav}>
27+
<div className="">
28+
<div className={styles.title}>
29+
<Icon icon={<Logo />} size="large" className={styles.logo} />
30+
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
31+
</div>
2532
</div>
26-
</div>
27-
<div className="col-12 col-lg-6 order-3 order-lg-2">
33+
<button
34+
onClick={handleClick}
35+
role="button"
36+
className={styles.burger}
37+
aria-label="menu"
38+
aria-expanded="false"
39+
>
40+
{active ? (
41+
<div> X </div>
42+
) : (
43+
<>
44+
<span></span>
45+
<span></span>
46+
<span></span>
47+
</>
48+
)}
49+
</button>
2850
{user && (
29-
<div className={styles.nav}>
30-
<Link href="/dashboard">
31-
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
32-
</Link>
33-
<Link href="/realtime">
34-
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
35-
</Link>
36-
<Link href="/settings">
37-
<FormattedMessage id="label.settings" defaultMessage="Settings" />
38-
</Link>
51+
<div className={styles.items}>
52+
<div className={active ? classNames(styles.active) : ''}>
53+
<Link href="/dashboard">
54+
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
55+
</Link>
56+
<Link href="/realtime">
57+
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
58+
</Link>
59+
<Link href="/settings">
60+
<FormattedMessage id="label.settings" defaultMessage="Settings" />
61+
</Link>
62+
</div>
3963
</div>
4064
)}
41-
</div>
42-
<div className="col-6 col-lg-3 order-2 order-lg-3">
43-
<div className={styles.buttons}>
44-
<ThemeButton />
45-
<LanguageButton menuAlign="right" />
46-
{user && <UserButton />}
65+
<div className={styles.items}>
66+
<div className={active ? classNames(styles.active) : ''}>
67+
<div className={styles.buttons}>
68+
<ThemeButton />
69+
<LanguageButton menuAlign="right" />
70+
{user && <UserButton />}
71+
</div>
72+
</div>
4773
</div>
4874
</div>
4975
</div>
50-
</header>
76+
</nav>
5177
);
5278
}

‎components/layout/Header.module.css

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1+
.navbar {
2+
align-items: stretch;
3+
display: flex;
4+
flex-wrap: wrap;
5+
justify-content: space-between;
6+
width: 100%;
7+
}
8+
9+
.burger {
10+
display: none;
11+
}
12+
113
.header {
214
display: flex;
315
min-height: 100px;
16+
width: 100%;
417
}
518

619
.title {
@@ -15,6 +28,15 @@
1528
}
1629

1730
.nav {
31+
display: flex;
32+
align-items: center;
33+
font-size: var(--font-size-normal);
34+
font-weight: 600;
35+
width: 100%;
36+
justify-content: space-between;
37+
}
38+
39+
.items {
1840
display: flex;
1941
justify-content: center;
2042
align-items: center;
@@ -35,16 +57,75 @@
3557
@media only screen and (max-width: 992px) {
3658
.nav {
3759
font-size: var(--font-size-large);
38-
justify-content: center;
39-
padding: 20px 0;
60+
justify-content: space-between;
61+
margin: 20px 0;
62+
}
63+
.items {
64+
flex-wrap: wrap;
4065
}
4166
}
4267

43-
@media only screen and (max-width: 576px) {
68+
@media only screen and (max-width: 768px) {
4469
.header {
4570
padding: 0 15px;
4671
}
72+
4773
.nav {
4874
font-size: var(--font-size-normal);
75+
flex-wrap: wrap;
76+
justify-content: center;
77+
flex-direction: column;
78+
position: relative;
79+
}
80+
81+
.items {
82+
display: flex;
83+
justify-content: unset;
84+
align-items: left;
85+
font-size: var(--font-size-normal);
86+
font-weight: 600;
87+
}
88+
89+
.items > div {
90+
display: none;
91+
}
92+
93+
.header .active {
94+
display: inherit;
95+
width: 100%;
96+
}
97+
98+
.items a {
99+
width: 100%;
100+
}
101+
102+
.burger {
103+
display: block;
104+
/* color: #4a4a4a; */
105+
cursor: pointer;
106+
height: 3.25rem;
107+
width: 3.25rem;
108+
margin-left: auto;
109+
position: absolute;
110+
right: 0;
111+
top: 0;
112+
}
113+
114+
.burger span {
115+
transform: translateX(-50%);
116+
padding: 1px 0px;
117+
margin: 6px 0;
118+
width: 20px;
119+
display: block;
120+
background-color: white;
121+
}
122+
123+
.burger div {
124+
height: 100%;
125+
color: white;
126+
text-align: center;
127+
margin: auto;
128+
font-size: 1.5rem;
129+
transform: translateX(-50%);
49130
}
50131
}

‎components/layout/Layout.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
import React from 'react';
22
import Head from 'next/head';
3-
import { useRouter } from 'next/router';
43
import Header from 'components/layout/Header';
54
import Footer from 'components/layout/Footer';
65

76
export default function Layout({ title, children, header = true, footer = true }) {
8-
const { basePath } = useRouter();
9-
107
return (
118
<>
129
<Head>
1310
<title>umami{title && ` - ${title}`}</title>
14-
<link rel="icon" href={`${basePath}/favicon.ico`} />
15-
<link
16-
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
17-
rel="stylesheet"
18-
/>
1911
</Head>
2012
{header && <Header />}
2113
<main className="container">{children}</main>

‎components/metrics/BarChart.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,26 +40,35 @@ export default function BarChart({
4040
function renderXLabel(label, index, values) {
4141
if (loading) return '';
4242
const d = new Date(values[index].value);
43-
const w = canvas.current.width;
43+
const sw = canvas.current.width / window.devicePixelRatio;
4444

4545
switch (unit) {
4646
case 'minute':
4747
return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
4848
case 'hour':
4949
return dateFormat(d, 'p', locale);
5050
case 'day':
51-
if (records > 31) {
52-
if (w <= 500) {
51+
if (records > 25) {
52+
if (sw <= 275) {
5353
return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
5454
}
55-
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
55+
if (sw <= 550) {
56+
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
57+
}
58+
if (sw <= 700) {
59+
return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
60+
}
61+
return dateFormat(d, 'MMM d', locale);
5662
}
57-
if (w <= 500) {
63+
if (sw <= 375) {
5864
return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
5965
}
66+
if (sw <= 425) {
67+
return dateFormat(d, 'MMM d', locale);
68+
}
6069
return dateFormat(d, 'EEE M/d', locale);
6170
case 'month':
62-
if (w <= 660) {
71+
if (sw <= 330) {
6372
return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
6473
}
6574
return dateFormat(d, 'MMM', locale);

‎components/settings/ThemeButton.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
justify-content: center;
66
align-items: center;
77
cursor: pointer;
8+
padding-bottom: 3px;
89
}
910

1011
.button svg {

0 commit comments

Comments
 (0)