mirror of
https://github.com/kremalicious/umami.git
synced 2024-11-14 17:25:02 +01:00
Responsive tables.
This commit is contained in:
parent
cb9dcc7300
commit
9f6e17b986
@ -9,7 +9,7 @@ export default function Table({ columns, rows, empty }) {
|
||||
|
||||
return (
|
||||
<div className={styles.table}>
|
||||
<div className={styles.header}>
|
||||
<div className={classNames(styles.header, 'row')}>
|
||||
{columns.map(({ key, label, className, style, header }) => (
|
||||
<div
|
||||
key={key}
|
||||
@ -22,7 +22,7 @@ export default function Table({ columns, rows, empty }) {
|
||||
</div>
|
||||
<div className={styles.body}>
|
||||
{rows.map((row, rowIndex) => (
|
||||
<div className={styles.row} key={rowIndex}>
|
||||
<div className={classNames(styles.row, 'row')} key={rowIndex}>
|
||||
{columns.map(({ key, render, className, style, cell }) => (
|
||||
<div
|
||||
key={`${rowIndex}${key}`}
|
||||
|
@ -1,26 +1,22 @@
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
}
|
||||
|
||||
.head {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
}
|
||||
|
||||
.body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.body:empty:before {
|
||||
@ -33,7 +29,6 @@
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
padding: 10px 0;
|
||||
}
|
||||
@ -41,5 +36,4 @@
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
}
|
||||
|
@ -5,7 +5,6 @@
|
||||
}
|
||||
|
||||
.login form {
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
@ -2,6 +2,7 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container .menu {
|
||||
@ -35,6 +36,10 @@
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.container {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container .content {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-left: 0;
|
||||
|
@ -2,5 +2,5 @@ import React from 'react';
|
||||
import styles from './Page.module.css';
|
||||
|
||||
export default function Page({ children }) {
|
||||
return <div className={styles.container}>{children}</div>;
|
||||
return <div className={styles.page}>{children}</div>;
|
||||
}
|
||||
|
@ -1,7 +1,4 @@
|
||||
.container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.page {
|
||||
padding: 0 30px;
|
||||
background: var(--gray50);
|
||||
height: 100%;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import Icon from 'components/common/Icon';
|
||||
@ -12,7 +12,7 @@ import Trash from 'assets/trash.svg';
|
||||
import Check from 'assets/check.svg';
|
||||
import { get } from 'lib/web';
|
||||
import styles from './AccountSettings.module.css';
|
||||
import DeleteForm from './forms/DeleteForm';
|
||||
import DeleteForm from '../forms/DeleteForm';
|
||||
|
||||
export default function AccountSettings() {
|
||||
const [data, setData] = useState();
|
||||
@ -36,14 +36,15 @@ export default function AccountSettings() {
|
||||
) : null;
|
||||
|
||||
const columns = [
|
||||
{ key: 'username', label: 'Username' },
|
||||
{ key: 'username', label: 'Username', className: 'col-6 col-md-4' },
|
||||
{
|
||||
key: 'is_admin',
|
||||
label: 'Administrator',
|
||||
className: 'col-6 col-md-4',
|
||||
render: Checkmark,
|
||||
},
|
||||
{
|
||||
className: styles.buttons,
|
||||
className: classNames(styles.buttons, 'col-12 col-md-4'),
|
||||
render: Buttons,
|
||||
},
|
||||
];
|
@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import ChangePasswordForm from './forms/ChangePasswordForm';
|
||||
import ChangePasswordForm from '../forms/ChangePasswordForm';
|
||||
import Modal from 'components/common/Modal';
|
||||
import Dots from 'assets/ellipsis-h.svg';
|
||||
|
@ -1,12 +1,13 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Table from 'components/common/Table';
|
||||
import Button from 'components/common/Button';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Modal from 'components/common/Modal';
|
||||
import WebsiteEditForm from './forms/WebsiteEditForm';
|
||||
import DeleteForm from './forms/DeleteForm';
|
||||
import TrackingCodeForm from './forms/TrackingCodeForm';
|
||||
import ShareUrlForm from './forms/ShareUrlForm';
|
||||
import WebsiteEditForm from '../forms/WebsiteEditForm';
|
||||
import DeleteForm from '../forms/DeleteForm';
|
||||
import TrackingCodeForm from '../forms/TrackingCodeForm';
|
||||
import ShareUrlForm from '../forms/ShareUrlForm';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import Pen from 'assets/pen.svg';
|
||||
import Trash from 'assets/trash.svg';
|
||||
@ -53,11 +54,11 @@ export default function WebsiteSettings() {
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{ key: 'name', label: 'Name', className: styles.col },
|
||||
{ key: 'domain', label: 'Domain', className: styles.col },
|
||||
{ key: 'name', label: 'Name', className: 'col-6 col-md-4' },
|
||||
{ key: 'domain', label: 'Domain', className: 'col-6 col-md-4' },
|
||||
{
|
||||
key: 'action',
|
||||
className: styles.buttons,
|
||||
className: classNames(styles.buttons, 'col-12 col-md-4 pt-1'),
|
||||
render: Buttons,
|
||||
},
|
||||
];
|
@ -3,7 +3,5 @@
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import Layout from 'components/layout/Layout';
|
||||
import AccountSettings from 'components/AccountSettings';
|
||||
import AccountSettings from 'components/settings/AccountSettings';
|
||||
import useRequireLogin from 'hooks/useRequireLogin';
|
||||
|
||||
export default function AccountPage() {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import Layout from 'components/layout/Layout';
|
||||
import Settings from 'components/Settings';
|
||||
import Settings from 'components/settings/Settings';
|
||||
import useRequireLogin from 'hooks/useRequireLogin';
|
||||
|
||||
export default function SettingsPage() {
|
||||
|
Loading…
Reference in New Issue
Block a user