m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-24 02:06:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed pages table loading. Fixed z-indexes.

Browse Source
This commit is contained in:
Mike Cao 2023-03-31 20:03:28 -07:00
parent 91100393eb
commit 14802afe8b
15 changed files with 15 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/ErrorMessage.module.css
View File

@ -5,7 +5,7 @@
transform: translate(-50%, -50%);
margin: auto;
display: flex;
z-index: 1;
z-index: var(--z-index-above);
background-color: var(--base50);
padding: 10px;
}

2
components/common/HoverTooltip.module.css
View File

@ -5,7 +5,7 @@
.tooltip {
position: fixed;
pointer-events: none;
z-index: 1;
z-index: var(--z-index-popup);
}
.content {

2
components/common/MobileMenu.module.css
View File

@ -5,10 +5,10 @@
right: 0;
bottom: 0;
margin: auto;
z-index: 100;
display: flex;
flex-direction: column;
background-color: var(--base50);
z-index: var(--z-index-popup);
overflow: auto;
}

2
components/common/UpdateNotice.module.css
View File

@ -8,7 +8,7 @@
padding: 20px;
border: 1px solid var(--base300);
border-radius: var(--border-radius);
z-index: 1000;
z-index: var(--z-index-popup);
}
.message {

2
components/input/LanguageButton.module.css
View File

@ -5,7 +5,7 @@
max-width: 100vw;
padding: 10px;
background: var(--base50);
z-index: var(--z-index100);
z-index: var(--z-index-popup);
border-radius: 5px;
border: 1px solid var(--border-color);
margin-left: 10px;

1
components/input/ProfileButton.module.css
View File

@ -1,5 +1,6 @@
.menu {
width: 200px;
z-index: var(--z-index-popup);
}
.item {

1
components/input/SettingsButton.module.css
View File

@ -8,5 +8,4 @@
top: 100%;
right: 0;
padding: 20px;
z-index: 100;
}

2
components/layout/AppLayout.module.css
View File

@ -7,7 +7,7 @@
.nav {
height: 60px;
width: 100vw;
z-index: 100;
z-index: var(--z-index-overlay);
grid-column: 1;
grid-row: 1 / 2;
}

31
components/layout/FormLayout.js
View File

@ -1,31 +0,0 @@
import { useSpring, animated } from 'react-spring';
import classNames from 'classnames';
import { ErrorMessage } from 'formik';
import styles from './FormLayout.module.css';
export default function FormLayout({ className, children }) {
return <div className={classNames(styles.form, className)}>{children}</div>;
}
export const FormButtons = ({ className, children }) => (
<div className={classNames(styles.buttons, className)}>{children}</div>
);
export const FormError = ({ name }) => {
return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
};
const ErrorTag = ({ msg }) => {
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return (
<animated.div className={styles.error} style={props}>
<div className={styles.msg}>{msg}</div>
</animated.div>
);
};
export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;
export const FormMessage = ({ children }) =>
children ? <div className={styles.message}>{children}</div> : null;

94
components/layout/FormLayout.module.css
View File

@ -1,94 +0,0 @@
.form {
display: flex;
flex-direction: column;
justify-content: center;
}
.form label {
display: block;
min-width: 100px;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
margin-bottom: 20px;
line-height: 1.8;
padding: 0 20px;
}
.row > div {
position: relative;
flex: 1 1;
}
.row > div > input,
.row > div > select {
width: 100%;
min-width: 240px;
}
.buttons {
display: flex;
justify-content: center;
margin-top: 20px;
}
.buttons button + button {
margin-left: 10px;
}
.error {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: calc(100% + 16px);
bottom: 0;
z-index: 1;
}
.msg {
color: var(--msgColor);
background: var(--red400);
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
}
.error:after {
content: '';
position: absolute;
top: 0;
left: -5px;
bottom: 0;
margin: auto;
width: 10px;
height: 10px;
background: var(--red400);
transform: rotate(45deg);
}
.message {
text-align: center;
margin: 20px 0;
padding: 4px 8px;
border-radius: 4px;
color: var(--base50);
background: var(--base800);
}
@media only screen and (max-width: 576px) {
.error {
align-items: flex-start;
top: calc(100% + 7px);
left: 0;
}
.error:after {
left: 10px;
}
}

2
components/metrics/PagesTable.js
View File

@ -8,7 +8,7 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
const {
router,
resolveUrl,
query: { view },
query: { view = 'url' },
} = usePageQuery();
const { formatMessage, labels } = useMessages();

2
components/metrics/WebsiteChart.module.css
View File

@ -24,7 +24,7 @@
min-height: 90px;
margin-bottom: 20px;
background: var(--base50);
z-index: var(--z-index300);
z-index: var(--z-index-above);
}
.sticky {

2
components/pages/realtime/RealtimeDashboard.module.css
View File

@ -11,6 +11,6 @@
top: 0;
background: var(--base50);
border-bottom: 1px solid var(--base300);
z-index: 3;
z-index: var(--z-index-overlay);
padding: 10px 0;
}

2
package.json
View File

@ -94,7 +94,7 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
"react-basics": "^0.74.0",
"react-basics": "^0.75.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-intl": "^5.24.7",

8
yarn.lock
View File

@ -6727,10 +6727,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-basics@^0.74.0:
version "0.74.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.74.0.tgz#153433bc485d6b71d8edf377d1a83f1d55133e24"
integrity sha512-Z9XwgEOSRvcPqFqFZL6HR59t/XrqhIB8uoYwbmon3IFX2W0kOPqkX1Box0c+2BibJoHp4N4mbfuZWK2kSEnq9g==
react-basics@^0.75.0:
version "0.75.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.75.0.tgz#501ba7fae6e0659ec8f7e811a4303ef83bd57b13"
integrity sha512-mDm+L/cw4LX4LylJW0MyV+YFxhZ0tMa/bCIs1QsApcRGvF4ahlB1rdwWn6/p01PVSHe7xS/55lSklp3b7IWOaw==
dependencies:
classnames "^2.3.1"
date-fns "^2.29.3"