Responsive tables.

This commit is contained in:
Mike Cao 2020-08-17 22:47:58 -07:00
parent cb9dcc7300
commit 9f6e17b986
14 changed files with 26 additions and 31 deletions

View File

@ -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}`}

View File

@ -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;
}

View File

@ -5,7 +5,6 @@
}
.login form {
width: 300px;
margin: 0 auto;
}

View File

@ -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;

View File

@ -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>;
}

View File

@ -1,7 +1,4 @@
.container {
flex: 1;
display: flex;
flex-direction: column;
.page {
padding: 0 30px;
background: var(--gray50);
height: 100%;

View File

@ -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,
},
];

View File

@ -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';

View File

@ -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,
},
];

View File

@ -3,7 +3,5 @@
}
.buttons {
flex: 3;
display: flex;
justify-content: flex-end;
}

View File

@ -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() {

View File

@ -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() {