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

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/layout/Footer.module.css
View file

@ -2,7 +2,7 @@
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
text-align: center;
margin: 30px 0;
}

6
components/layout/FormLayout.module.css
View file

@ -54,7 +54,7 @@
.msg {
color: var(--msgColor);
background: var(--red400);
font-size: var(--font-size-small);
font-size: var(--font-size-sm);
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
@ -78,8 +78,8 @@
margin: 20px 0;
padding: 4px 8px;
border-radius: 4px;
color: var(--gray50);
background: var(--gray800);
color: var(--base50);
background: var(--base800);
}
@media only screen and (max-width: 576px) {

6
components/layout/GridLayout.module.css
View file

@ -9,12 +9,12 @@
}
.row {
border-top: 1px solid var(--gray300);
border-top: 1px solid var(--base300);
min-height: 430px;
}
.row > .col {
border-left: 1px solid var(--gray300);
border-left: 1px solid var(--base300);
padding: 20px;
}
@ -33,7 +33,7 @@
}
.row > .col {
border-top: 1px solid var(--gray300);
border-top: 1px solid var(--base300);
border-left: 0;
padding: 20px 0;
}

4
components/layout/Header.module.css
View file

@ -7,7 +7,7 @@
.title {
flex: 1;
font-size: var(--font-size-large);
font-size: var(--font-size-lg);
display: flex;
align-items: center;
line-height: 1.4;
@ -22,7 +22,7 @@
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-normal);
font-size: var(--font-size-md);
font-weight: 600;
}

18
components/layout/Layout.js
View file

@ -1,20 +1,32 @@
import { Container } from 'react-basics';
import Head from 'next/head';
import Header from 'components/layout/Header';
import Footer from 'components/layout/Footer';
import useLocale from 'hooks/useLocale';
import { useRouter } from 'next/router';
export default function Layout({ title, children, header = true, footer = true }) {
const { dir } = useLocale();
const { basePath } = useRouter();
return (
<>
<Container dir={dir} style={{ maxWidth: 1140 }}>
<Head>
<title>{title ? `${title} | umami` : 'umami'}</title>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
{header && <Header />}
<main>{children}</main>
{footer && <Footer />}
<div id="__modals" dir={dir} />
</>
</Container>
);
}

4
components/layout/MenuLayout.module.css
View file

@ -12,7 +12,7 @@
.container .content {
flex: 1;
position: relative;
border-left: 1px solid var(--gray300);
border-left: 1px solid var(--base300);
padding-left: 30px;
margin-left: 30px;
}
@ -30,7 +30,7 @@
}
.container .content {
border-top: 1px solid var(--gray300);
border-top: 1px solid var(--base300);
border-left: 0;
padding-left: 0;
margin-left: 0;

3
components/layout/Page.module.css
View file

@ -3,5 +3,6 @@
display: flex;
flex-direction: column;
padding: 0 30px;
background: var(--gray50);
background: var(--base50);
border-radius: 8px;
}