Fix the responsive issues of the device-mgt react app

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js

@@ -69,7 +69,7 @@ const formats = [
 class AppDetailsDrawer extends React.Component {
     constructor(props) {
         super(props);
-        const drawerWidth = window.innerWidth<=768 ? '80%' : '40%';
+        const drawerWidth = window.innerWidth<=770 ? '80%' : '40%';
 
         this.state = {
             loading: false,

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css

@@ -46,7 +46,7 @@
     font-size: 27px;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 660px) {
 
     .web-layout{
         visibility: hidden;
@@ -77,16 +77,31 @@
 
 }
 
-@media screen and (max-height: 500px) {
+@media screen and (max-height: 350px) {
+
     .mobile-menu-button{
         margin-top: 2%;
     }
     .dashboard-body{
         margin-top: 9%;
     }
+
 }
 
+@media only screen and (min-width: 760px) {
+
+    @media screen and (max-width: 1030px) {
 
+        Footer{
+            margin-bottom: 43%;
+        }
 
+    }
+}
 
+@media only screen and (min-width: 1030px) {
 
+        Footer{
+            margin-bottom: 5%;
+        }
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -178,7 +178,7 @@ class Dashboard extends React.Component {
                             ))}
                         </Switch>
                     </Content>
-                    <Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
+                    <Footer style={{textAlign: 'center'}}>
                         ©2019 entgra.io
                     </Footer>
                 </Layout>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css

@@ -46,13 +46,7 @@
     font-size: 27px;
 }
 
-@media only screen and (min-width: 768px) {
+@media screen and (max-width: 660px) {
-    .main-container{
-        padding: 24px;
-    }
-}
-
-@media screen and (max-width: 768px) {
 
     .web-layout{
         visibility: hidden;
@@ -80,13 +74,34 @@
     .logo-image {
         margin-left: 20%;
     }
+
 }
 
-@media only screen and (max-height: 500px) {
+@media only screen and (max-height: 350px) {
+
     .mobile-menu-button{
         margin-top: 2%;
     }
+
     .dashboard-body{
         margin-top: 10%;
     }
+
+}
+
+@media only screen and (min-width: 760px) {
+
+    @media screen and (max-width: 1030px) {
+
+        Footer{
+            margin-bottom: 45%;
+        }
+    }
+}
+
+@media only screen and (min-width: 1030px) {
+
+    Footer{
+        margin-bottom: 5%;
+    }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -218,7 +218,8 @@ class Dashboard extends React.Component {
                         </Switch>
 
                     </Content>
-                    <Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
+
+                    <Footer style={{textAlign: 'center'}}>
                         ©2019 entgra.io
                     </Footer>
                 </Layout>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css

@@ -39,63 +39,13 @@
     padding: 5px;
 }
 
-/*.logo-image {*/
-/*!*width: 120px;*!*/
-/*height: 31px;*/
-/*margin: 0 5px 16px 24px;*/
-/*float: left;*/
-/*}*/
-
-
 .main-container {
     background: #f0f2f5;
     min-height: 780px
 }
 
-.profile {
-    float: right;
-    margin-right: 2%;
-}
-
 @media only screen and (min-width: 768px) {
     .main-container {
         padding: 24px;
     }
 }
-
-.layout .trigger {
-    font-size: 18px;
-    /*line-height: 64px;*/
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color 0.3s;
-    float: left;
-}
-
-.layout .trigger:hover {
-    color: #1890ff;
-}
-
-.layout .logo-image {
-    position: relative;
-    height: 64px;
-    padding-left: 8px;
-    overflow: hidden;
-    line-height: 64px;
-    background: #001529;
-    transition: all .3s;
-}
-
-.layout .brand{
-    display: inline-block;
-    color: #fff;
-    font-weight: 600;
-    font-size: 20px;
-    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
-    vertical-align: middle;
-}
-
-.layout .logo-image img {
-    height: 32px;
-    margin: 16px;
-}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.css

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.profile {
+    float: right;
+    margin-right: 2%;
+}
+
+.layout .trigger {
+    font-size: 18px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+    float: left;
+    width: 40px;
+}
+
+.layout .trigger:hover {
+    color: #1890ff;
+}
+
+.layout .logo-image {
+    position: relative;
+    height: 64px;
+    padding-left: 8px;
+    overflow: hidden;
+    line-height: 64px;
+    background: #001529;
+    transition: all .3s;
+}
+
+.layout .brand{
+    display: inline-block;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
+    vertical-align: middle;
+}
+
+.layout .logo-image img {
+    height: 32px;
+    margin: 16px;
+}
+
+@media only screen and (min-width: 760px) {
+    @media screen and (max-width: 1030px) {
+
+        Footer{
+            margin-bottom: 45%;
+        }
+    }
+}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js

@@ -17,27 +17,29 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon, Typography} from 'antd';
+import {Layout, Menu, Icon} from 'antd';
 import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
-import "../../App.css";
+import "./Dashboard.css";
 import {withConfigContext} from "../../context/ConfigContext";
 import Logout from "./Logout/Logout";
 
 const {Header, Content, Footer, Sider} = Layout;
 const {SubMenu} = Menu;
 
-const {Title} = Typography;
-
 class Dashboard extends React.Component {
     constructor(props) {
         super(props);
+
+        const mobileWidth = (window.innerWidth<=768 ? '0' : '80');
+
         this.state = {
             routes: props.routes,
             selectedKeys: [],
             deviceTypes: [],
             isNavBarCollapsed: false,
+            mobileWidth
         };
         this.logo = this.props.context.theme.logo;
     }
@@ -52,13 +54,17 @@ class Dashboard extends React.Component {
         return (
             <div>
                 <Layout className="layout" >
+
                     <Sider
                         trigger={null}
                         collapsible
-                        collapsed={this.state.isNavBarCollapsed}>
+                        collapsed={this.state.isNavBarCollapsed}
+                        collapsedWidth={this.state.mobileWidth}
+                    >
+
                         <div className="logo-image">
-                            <img alt="logo" src={this.logo}/>
+                            <Link to="/entgra/devices"><img alt="logo" src={this.logo}/>
-                            <span className="brand">Entgra</span>
+                            <span className="brand">Entgra</span></Link>
                         </div>
                         <Menu theme="dark" mode="inline" defaultSelectedKeys={['devices']}>
                            <Menu.Item key="devices">
@@ -80,7 +86,9 @@ class Dashboard extends React.Component {
                                 </Link>
                             </Menu.Item>
                         </Menu>
+
                     </Sider>
+
                     <Layout>
                         <Header style={{background: '#fff', padding: 0}}>
                             <div className="trigger">
@@ -89,19 +97,18 @@ class Dashboard extends React.Component {
                                 onClick={this.toggle}
                             />
                             </div>
+
                             <Menu
                                 theme="light"
                                 mode="horizontal"
                                 style={{lineHeight: '64px'}}
                             >
                                 <Menu.Item key="trigger">
-
                                 </Menu.Item>
                                 <SubMenu className="profile"
                                          title={
                                              <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
-                                         Profile
                                      </span>
                                          }
                                 >
@@ -110,6 +117,7 @@ class Dashboard extends React.Component {
 
                             </Menu>
                         </Header>
+
                         <Content style={{marginTop: 2}}>
                             <Switch>
                                 <Redirect exact from="/entgra" to="/entgra/devices"/>
@@ -118,9 +126,11 @@ class Dashboard extends React.Component {
                                 ))}
                             </Switch>
                         </Content>
+
                         <Footer style={{textAlign: 'center'}}>
                             ©2019 entgra.io
                         </Footer>
+
                     </Layout>
                 </Layout>
             </div>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.less

@@ -1,33 +0,0 @@
-/*
- * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
- *
- * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-.logo {
-  width: 120px;
-  height: 31px;
-  margin: 16px 0 16px 20px;
-  float: left;
-
-  img{
-    height: 35px;
-  }
-}
-
-
-input{
-  min-height: 0;
-}