From c99d5723171c1b5c3ccfdac2153c5abb4a69c266 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Wed, 22 May 2019 16:06:14 +0530
Subject: [PATCH] Make layout responsive

---
 .../react-app/src/App.css                           | 13 ++++++++++++-
 .../src/components/apps/release/ReleaseView.js      | 10 +++++-----
 .../src/pages/dashboard/apps/release/Release.js     | 11 +++++------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
index 8b397c1780..85651a6dea 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@@ -19,10 +19,21 @@
 .logo {
   width: 120px;
   height: 31px;
-  margin: 16px 0 16px 20px;
+  margin: 0 0 16px 20px;
   float: left;
 }
 
 .logo img{
   height: 35px;
+}
+
+.main-container{
+  background: #f0f2f5;
+  min-height: 780px
+}
+
+@media only screen and (min-width: 768px) {
+  .main-container{
+    padding: 24px;
+  }
 }
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index f54a00ce08..b39809417e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -11,10 +11,10 @@ class ReleaseView extends React.Component {
         return (
             <div className="release">
                 <Row>
-                    <Col span={4} className="release-icon">
+                    <Col md={4} sm={6} xs={8} className="release-icon">
                         <img src={release.iconPath}/>
                     </Col>
-                    <Col span={18}>
+                    <Col md={18} sm={12}>
                         <Title level={2}>App Name</Title>
                         <Text>{release.version}</Text><br/>
                         <Text type="secondary">{release.description}</Text>
@@ -22,13 +22,13 @@ class ReleaseView extends React.Component {
                 </Row>
                 <br/>
                 <Row>
-                    <Col span={6} className="release-screenshot">
+                    <Col lg={6} md={8} xs={8} className="release-screenshot">
                         <img src={release.screenshotPath1}/>
                     </Col>
-                    <Col span={6} className="release-screenshot">
+                    <Col lg={6} md={8} xs={8} className="release-screenshot">
                         <img src={release.screenshotPath2}/>
                     </Col>
-                    <Col span={6} className="release-screenshot">
+                    <Col lg={6} md={8} xs={8} className="release-screenshot">
                         <img src={release.screenshotPath3}/>
                     </Col>
                 </Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
index ebf96e42f1..69e268939b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -1,4 +1,5 @@
 import React from "react";
+import '../../../../App.css';
 import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd";
 import {connect} from "react-redux";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
@@ -62,17 +63,15 @@ class ConnectedRelease extends React.Component {
                 <PageHeader
                     breadcrumb={{routes}}
                 />
-                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                <div className="main-container">
                     <Row style={{padding: 10}}>
-                        <Col span={16}>
+                        <Col lg={16} md={24} style={{padding: 3}}>
                             <Card>
                                 <ReleaseView release={release}/>
                             </Card>
                         </Col>
-                    </Row>
-                    <Row style={{padding: 10}}>
-                        <Col>
-                            <Card>
+                        <Col lg={8} md={24} style={{padding: 3}}>
+                            <Card lg={8} md={24}>
                                 <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
                             </Card>
                         </Col>