community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the responsive issues of the device-mgt react app

Browse Source
This commit is contained in:
nipunnadeen 2019-08-28 00:20:35 +05:30
parent 27ce00b143
commit 05e4da1780
9 changed files with 131 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

@ -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%;
}
}

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

@ -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>

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

@ -46,13 +46,7 @@
font-size: 27px;
}
@media only screen and (min-width: 768px) {
.main-container{
padding: 24px;
}
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 660px) {
.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%;
}
}

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

@ -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>

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

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

68
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.css Normal file
View File

@ -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%;
}
}
}

28
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js vendored
View File

@ -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}/>
<span className="brand">Entgra</span>
<Link to="/entgra/devices"><img alt="logo" src={this.logo}/>
<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>

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

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