Merge branch 'application-mgt-new' into 'application-mgt-new'

Fix the responsive issues of the device-mgt react app

See merge request entgra/carbon-device-mgt!219
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
commit 7215d0beba

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

@ -46,7 +46,7 @@
font-size: 27px; font-size: 27px;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 660px) {
.web-layout{ .web-layout{
visibility: hidden; visibility: hidden;
@ -77,16 +77,31 @@
} }
@media screen and (max-height: 500px) { @media screen and (max-height: 350px) {
.mobile-menu-button{ .mobile-menu-button{
margin-top: 2%; margin-top: 2%;
} }
.dashboard-body{ .dashboard-body{
margin-top: 9%; 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%;
}
}

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

@ -46,13 +46,7 @@
font-size: 27px; 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{ .web-layout{
visibility: hidden; visibility: hidden;
@ -80,13 +74,34 @@
.logo-image { .logo-image {
margin-left: 20%; margin-left: 20%;
} }
} }
@media only screen and (max-height: 500px) { @media only screen and (max-height: 350px) {
.mobile-menu-button{ .mobile-menu-button{
margin-top: 2%; margin-top: 2%;
} }
.dashboard-body{ .dashboard-body{
margin-top: 10%; 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%;
}
} }

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

@ -39,63 +39,13 @@
padding: 5px; padding: 5px;
} }
/*.logo-image {*/
/*!*width: 120px;*!*/
/*height: 31px;*/
/*margin: 0 5px 16px 24px;*/
/*float: left;*/
/*}*/
.main-container { .main-container {
background: #f0f2f5; background: #f0f2f5;
min-height: 780px min-height: 780px
} }
.profile {
float: right;
margin-right: 2%;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.main-container { .main-container {
padding: 24px; 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;
}

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

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

@ -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;
}
Loading…
Cancel
Save