WIP: responsive design
This commit is contained in:
parent
9587b70f77
commit
a7034bb3ad
|
@ -651,10 +651,10 @@ class Campaigns extends React.PureComponent {
|
|||
return (
|
||||
<section className="content campaigns">
|
||||
<Row>
|
||||
<Col span={22}>
|
||||
<Col xs={12} sm={14}>
|
||||
<h1>Campaigns</h1>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Col xs={12} sm={10} className="align-right">
|
||||
<Link to="/campaigns/new">
|
||||
<Button type="primary" icon="plus" role="link">
|
||||
New campaign
|
||||
|
|
|
@ -45,16 +45,16 @@ class Dashboard extends React.PureComponent {
|
|||
{this.state.stats && (
|
||||
<div className="stats">
|
||||
<Row>
|
||||
<Col span={16}>
|
||||
<Col xs={24} sm={24} xl={16}>
|
||||
<Row gutter={24}>
|
||||
<Col span={8}>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Card title="Active subscribers" bordered={false}>
|
||||
<h1 className="count">
|
||||
{this.orZero(this.state.stats.subscribers.enabled)}
|
||||
</h1>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Card title="Blacklisted subscribers" bordered={false}>
|
||||
<h1 className="count">
|
||||
{this.orZero(
|
||||
|
@ -63,7 +63,7 @@ class Dashboard extends React.PureComponent {
|
|||
</h1>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Card title="Orphaned subscribers" bordered={false}>
|
||||
<h1 className="count">
|
||||
{this.orZero(this.state.stats.orphan_subscribers)}
|
||||
|
@ -72,16 +72,16 @@ class Dashboard extends React.PureComponent {
|
|||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={6} offset={2}>
|
||||
<Col xs={24} sm={24} xl={{ span: 6, offset: 2 }}>
|
||||
<Row gutter={24}>
|
||||
<Col span={12}>
|
||||
<Col xs={24} sm={12}>
|
||||
<Card title="Public lists" bordered={false}>
|
||||
<h1 className="count">
|
||||
{this.orZero(this.state.stats.lists.public)}
|
||||
</h1>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Col xs={24} sm={12}>
|
||||
<Card title="Private lists" bordered={false}>
|
||||
<h1 className="count">
|
||||
{this.orZero(this.state.stats.lists.private)}
|
||||
|
@ -93,9 +93,9 @@ class Dashboard extends React.PureComponent {
|
|||
</Row>
|
||||
<hr />
|
||||
<Row>
|
||||
<Col span={16}>
|
||||
<Col xs={24} sm={24} xl={16}>
|
||||
<Row gutter={24}>
|
||||
<Col span={12}>
|
||||
<Col xs={24} sm={12}>
|
||||
<Card
|
||||
title="Campaign views (last 3 months)"
|
||||
bordered={false}
|
||||
|
@ -124,7 +124,7 @@ class Dashboard extends React.PureComponent {
|
|||
</Chart>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Col xs={24} sm={12}>
|
||||
<Card
|
||||
title="Link clicks (last 3 months)"
|
||||
bordered={false}
|
||||
|
@ -156,7 +156,7 @@ class Dashboard extends React.PureComponent {
|
|||
</Row>
|
||||
</Col>
|
||||
|
||||
<Col span={6} offset={2}>
|
||||
<Col xs={24} sm={12} xl={{ span: 6, offset: 2 }}>
|
||||
<Card
|
||||
title="Campaigns"
|
||||
bordered={false}
|
||||
|
|
|
@ -31,6 +31,13 @@ class Base extends React.Component {
|
|||
this.setState({ collapsed });
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
// For small screen devices collapse the menu by default.
|
||||
if (window.screen.width < 576) {
|
||||
this.setState({ collapsed: true });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Layout style={{ minHeight: "100vh" }}>
|
||||
|
|
|
@ -378,10 +378,10 @@ class Lists extends React.PureComponent {
|
|||
return (
|
||||
<section className="content">
|
||||
<Row>
|
||||
<Col span={22}>
|
||||
<Col xs={12} sm={18}>
|
||||
<h1>Lists ({this.props.data[cs.ModelLists].total}) </h1>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Col xs={12} sm={6} className="align-right">
|
||||
<Button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
|
|
|
@ -586,7 +586,7 @@ class Subscribers extends React.PureComponent {
|
|||
<section className="content">
|
||||
<header className="header">
|
||||
<Row>
|
||||
<Col span={20}>
|
||||
<Col xs={12} sm={14}>
|
||||
<h1>
|
||||
Subscribers
|
||||
{this.props.data[cs.ModelSubscribers].total > 0 && (
|
||||
|
@ -597,7 +597,7 @@ class Subscribers extends React.PureComponent {
|
|||
)}
|
||||
</h1>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Col xs={12} sm={10} className="align-right">
|
||||
<Button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
|
|
|
@ -392,10 +392,10 @@ class Templates extends React.PureComponent {
|
|||
return (
|
||||
<section className="content templates">
|
||||
<Row>
|
||||
<Col span={22}>
|
||||
<Col xs={12} sm={14}>
|
||||
<h1>Templates ({this.props.data[cs.ModelTemplates].length}) </h1>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Col xs={12} sm={10} className="align-right">
|
||||
<Button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
|
|
|
@ -240,7 +240,7 @@ td .ant-tag {
|
|||
justify-content: center;
|
||||
|
||||
min-height: 90px;
|
||||
|
||||
|
||||
padding: 10px;
|
||||
border: 1px solid #eee;
|
||||
overflow: hidden;
|
||||
|
@ -313,4 +313,14 @@ td .ant-tag {
|
|||
}
|
||||
.preview-modal .ant-modal-footer button:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.dashboard .ant-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue