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 ( return (
<section className="content campaigns"> <section className="content campaigns">
<Row> <Row>
<Col span={22}> <Col xs={12} sm={14}>
<h1>Campaigns</h1> <h1>Campaigns</h1>
</Col> </Col>
<Col span={2}> <Col xs={12} sm={10} className="align-right">
<Link to="/campaigns/new"> <Link to="/campaigns/new">
<Button type="primary" icon="plus" role="link"> <Button type="primary" icon="plus" role="link">
New campaign New campaign

22
frontend/src/Dashboard.js
View File

@ -45,16 +45,16 @@ class Dashboard extends React.PureComponent {
{this.state.stats && ( {this.state.stats && (
<div className="stats"> <div className="stats">
<Row> <Row>
<Col span={16}> <Col xs={24} sm={24} xl={16}>
<Row gutter={24}> <Row gutter={24}>
<Col span={8}> <Col xs={24} sm={12} md={8}>
<Card title="Active subscribers" bordered={false}> <Card title="Active subscribers" bordered={false}>
<h1 className="count"> <h1 className="count">
{this.orZero(this.state.stats.subscribers.enabled)} {this.orZero(this.state.stats.subscribers.enabled)}
</h1> </h1>
</Card> </Card>
</Col> </Col>
<Col span={8}> <Col xs={24} sm={12} md={8}>
<Card title="Blacklisted subscribers" bordered={false}> <Card title="Blacklisted subscribers" bordered={false}>
<h1 className="count"> <h1 className="count">
{this.orZero( {this.orZero(
@ -63,7 +63,7 @@ class Dashboard extends React.PureComponent {
</h1> </h1>
</Card> </Card>
</Col> </Col>
<Col span={8}> <Col xs={24} sm={12} md={8}>
<Card title="Orphaned subscribers" bordered={false}> <Card title="Orphaned subscribers" bordered={false}>
<h1 className="count"> <h1 className="count">
{this.orZero(this.state.stats.orphan_subscribers)} {this.orZero(this.state.stats.orphan_subscribers)}
@ -72,16 +72,16 @@ class Dashboard extends React.PureComponent {
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col span={6} offset={2}> <Col xs={24} sm={24} xl={{ span: 6, offset: 2 }}>
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col xs={24} sm={12}>
<Card title="Public lists" bordered={false}> <Card title="Public lists" bordered={false}>
<h1 className="count"> <h1 className="count">
{this.orZero(this.state.stats.lists.public)} {this.orZero(this.state.stats.lists.public)}
</h1> </h1>
</Card> </Card>
</Col> </Col>
<Col span={12}> <Col xs={24} sm={12}>
<Card title="Private lists" bordered={false}> <Card title="Private lists" bordered={false}>
<h1 className="count"> <h1 className="count">
{this.orZero(this.state.stats.lists.private)} {this.orZero(this.state.stats.lists.private)}
@ -93,9 +93,9 @@ class Dashboard extends React.PureComponent {
</Row> </Row>
<hr /> <hr />
<Row> <Row>
<Col span={16}> <Col xs={24} sm={24} xl={16}>
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col xs={24} sm={12}>
<Card <Card
title="Campaign views (last 3 months)" title="Campaign views (last 3 months)"
bordered={false} bordered={false}
@ -124,7 +124,7 @@ class Dashboard extends React.PureComponent {
</Chart> </Chart>
</Card> </Card>
</Col> </Col>
<Col span={12}> <Col xs={24} sm={12}>
<Card <Card
title="Link clicks (last 3 months)" title="Link clicks (last 3 months)"
bordered={false} bordered={false}
@ -156,7 +156,7 @@ class Dashboard extends React.PureComponent {
</Row> </Row>
</Col> </Col>
<Col span={6} offset={2}> <Col xs={24} sm={12} xl={{ span: 6, offset: 2 }}>
<Card <Card
title="Campaigns" title="Campaigns"
bordered={false} bordered={false}

7
frontend/src/Layout.js
View File

@ -31,6 +31,13 @@ class Base extends React.Component {
this.setState({ collapsed }); this.setState({ collapsed });
}; };
componentDidMount() {
// For small screen devices collapse the menu by default.
if (window.screen.width < 576) {
this.setState({ collapsed: true });
}
};
render() { render() {
return ( return (
<Layout style={{ minHeight: "100vh" }}> <Layout style={{ minHeight: "100vh" }}>

4
frontend/src/Lists.js
View File

@ -378,10 +378,10 @@ class Lists extends React.PureComponent {
return ( return (
<section className="content"> <section className="content">
<Row> <Row>
<Col span={22}> <Col xs={12} sm={18}>
<h1>Lists ({this.props.data[cs.ModelLists].total}) </h1> <h1>Lists ({this.props.data[cs.ModelLists].total}) </h1>
</Col> </Col>
<Col span={2}> <Col xs={12} sm={6} className="align-right">
<Button <Button
type="primary" type="primary"
icon="plus" icon="plus"

4
frontend/src/Subscribers.js
View File

@ -586,7 +586,7 @@ class Subscribers extends React.PureComponent {
<section className="content"> <section className="content">
<header className="header"> <header className="header">
<Row> <Row>
<Col span={20}> <Col xs={12} sm={14}>
<h1> <h1>
Subscribers Subscribers
{this.props.data[cs.ModelSubscribers].total > 0 && ( {this.props.data[cs.ModelSubscribers].total > 0 && (
@ -597,7 +597,7 @@ class Subscribers extends React.PureComponent {
)} )}
</h1> </h1>
</Col> </Col>
<Col span={2}> <Col xs={12} sm={10} className="align-right">
<Button <Button
type="primary" type="primary"
icon="plus" icon="plus"

4
frontend/src/Templates.js
View File

@ -392,10 +392,10 @@ class Templates extends React.PureComponent {
return ( return (
<section className="content templates"> <section className="content templates">
<Row> <Row>
<Col span={22}> <Col xs={12} sm={14}>
<h1>Templates ({this.props.data[cs.ModelTemplates].length}) </h1> <h1>Templates ({this.props.data[cs.ModelTemplates].length}) </h1>
</Col> </Col>
<Col span={2}> <Col xs={12} sm={10} className="align-right">
<Button <Button
type="primary" type="primary"
icon="plus" icon="plus"

14
frontend/src/index.css
View File

@ -240,7 +240,7 @@ td .ant-tag {
justify-content: center; justify-content: center;
min-height: 90px; min-height: 90px;
padding: 10px; padding: 10px;
border: 1px solid #eee; border: 1px solid #eee;
overflow: hidden; overflow: hidden;
@ -313,4 +313,14 @@ td .ant-tag {
} }
.preview-modal .ant-modal-footer button:first-child { .preview-modal .ant-modal-footer button:first-child {
display: none; display: none;
} }
.align-right {
text-align: right;
}
@media screen and (max-width: 1200px) {
.dashboard .ant-card {
margin-bottom: 20px;
}
}