Make layout responsive

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;
+  }
 }

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>

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>