hangar-tech
/
listmonk
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP: responsive design

This commit is contained in:
Vivek R 2019-08-04 21:20:28 +05:30
parent 9587b70f77
commit a7034bb3ad
7 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/Campaigns.js
View File

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

22
frontend/src/Dashboard.js
View File

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

7
frontend/src/Layout.js
View File

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

4
frontend/src/Lists.js
View File

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

4
frontend/src/Subscribers.js
View File

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

4
frontend/src/Templates.js
View File

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

10
frontend/src/index.css
View File

@ -314,3 +314,13 @@ 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;
}
}