From a7034bb3ad20b1b9638735de5ad8cb0d2ec2f3f4 Mon Sep 17 00:00:00 2001
From: Vivek R <vividvilla@gmail.com>
Date: Sun, 4 Aug 2019 21:20:28 +0530
Subject: [PATCH] WIP: responsive design

---
 frontend/src/Campaigns.js   |  4 ++--
 frontend/src/Dashboard.js   | 22 +++++++++++-----------
 frontend/src/Layout.js      |  7 +++++++
 frontend/src/Lists.js       |  4 ++--
 frontend/src/Subscribers.js |  4 ++--
 frontend/src/Templates.js   |  4 ++--
 frontend/src/index.css      | 14 ++++++++++++--
 7 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/frontend/src/Campaigns.js b/frontend/src/Campaigns.js
index 66c3781..6e7d948 100644
--- a/frontend/src/Campaigns.js
+++ b/frontend/src/Campaigns.js
@@ -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
diff --git a/frontend/src/Dashboard.js b/frontend/src/Dashboard.js
index b406f4a..d2a1837 100644
--- a/frontend/src/Dashboard.js
+++ b/frontend/src/Dashboard.js
@@ -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}
diff --git a/frontend/src/Layout.js b/frontend/src/Layout.js
index badf563..2dd968e 100644
--- a/frontend/src/Layout.js
+++ b/frontend/src/Layout.js
@@ -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" }}>
diff --git a/frontend/src/Lists.js b/frontend/src/Lists.js
index ac1ec7c..372dbb9 100644
--- a/frontend/src/Lists.js
+++ b/frontend/src/Lists.js
@@ -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"
diff --git a/frontend/src/Subscribers.js b/frontend/src/Subscribers.js
index dea98dc..b185562 100644
--- a/frontend/src/Subscribers.js
+++ b/frontend/src/Subscribers.js
@@ -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"
diff --git a/frontend/src/Templates.js b/frontend/src/Templates.js
index 684471e..bfdb1a6 100644
--- a/frontend/src/Templates.js
+++ b/frontend/src/Templates.js
@@ -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"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b6f7533..d23295c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -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;
-  }
\ No newline at end of file
+  }
+
+.align-right {
+	text-align: right;
+}
+
+@media screen and (max-width: 1200px) {
+  .dashboard .ant-card {
+    margin-bottom: 20px;
+  }
+}