mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-03 04:50:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

opti: 布局调整为100% 宽度

Browse Source
This commit is contained in:
wenbo.dong 2017-09-19 20:04:18 +08:00
parent bcf3148138
commit ad6f9a68d3
20 changed files with 258 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/Header/Header.js
View File

@ -14,7 +14,7 @@ import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
const MenuUser = (props) => (
<Menu theme="dark" className="user-menu" >
<Menu.Item style={{"background":"#202d3a"}} key="0">
<Menu.Item style={{"background":"#32363a"}} key="0">
<Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user"/>个人中心</Link>
</Menu.Item>
<Menu.Item key="1">

1
client/components/Header/Header.scss
View File

@ -15,7 +15,6 @@
line-height: .56rem;
height: .56rem;
width: 56px;
border-left: 1px solid #55616d;
border-right: 1px solid #55616d;
&:hover{
background-color: #38495a;

1
client/components/Subnav/Subnav.scss
View File

@ -12,6 +12,7 @@
.item {
line-height: .54rem;
padding: 0 .36rem;
font-weight: normal;
}
}
}

2
client/containers/Follows/Follows.js
View File

@ -70,7 +70,7 @@ class Follows extends Component {
path: '/follow'
}]}/>*/}
<div className="g-row">
<Row gutter={24} className="follow-box card-panel pannel-without-tab">
<Row gutter={24} className="follow-box pannel-without-tab">
{data.length ? data.map((item, index) => {
return (
<Col span={6} key={index}>

5
client/containers/Follows/Follows.scss
View File

@ -7,8 +7,3 @@
background-color: #fff;
margin-top: 32px;
}
.card-panel {
border-radius: 4px;
box-shadow: $box-shadow-panel;
}

6
client/containers/Group/Group.js
View File

@ -19,11 +19,11 @@ export default class Group extends Component {
const GroupContent = (
<Layout>
<Sider style={{ height: 'auto'}} width={300}>
<Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: '56px', marginLeft: '16px', marginTop: '24px' }} width={300}>
<div className="logo" />
<GroupList></GroupList>
</Sider>
<Layout>
<Layout style={{ marginLeft: 316 }}>
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<Tabs type="card" className="m-tab">
<TabPane tab="项目列表" key="1"><ProjectList/></TabPane>
@ -31,7 +31,7 @@ export default class Group extends Component {
</Tabs>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design ©2016 Created by Ant UED
© 2017 YMFE 京ICP备17044220号
</Footer>
</Layout>
</Layout>

11
client/containers/Group/GroupList/GroupList.js
View File

@ -232,9 +232,10 @@ export default class GroupList extends Component {
return (
<div className="m-group">
<div className="group-bar">
{
this.props.curUserRole === "admin" || currGroup.role ==='owner' ?
<div className="curr-group">
<div className="curr-group-name">
<div className="text" title={currGroup.group_name}>{currGroup.group_name}</div>
<div className="curr-group-name">{currGroup.group_name} 分组管理：
{
this.props.curUserRole === "admin" ? (editmark) : ''
}
@ -244,10 +245,10 @@ export default class GroupList extends Component {
{
this.props.curUserRole === 'admin' ? (addmark) : ''
}
</div>
</div> : ''
}
</div>
<div className="curr-group-desc" title={currGroup.group_desc}>简介：{currGroup.group_desc}</div>
</div>
<div className="group-operate">
<div className="search">
<Search placeholder="Filter by name" onChange={this.searchGroup} onSearch={(v) => this.searchGroup(null, v)} />

10
client/containers/Group/GroupList/GroupList.scss
View File

@ -1,16 +1,14 @@
@import '../../../styles/mixin.scss';
.group-bar {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background-color: #fff;
min-height: 5rem;
.curr-group {
background: $color-bg-dark;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
SimSun, sans-serif;
.curr-group-name {
padding: .08rem;
font-size: .14rem;
.text {
display: inline-block;
overflow: hidden;
@ -20,9 +18,6 @@
font-weight: 200;
vertical-align: bottom;
}
color: #fff;
font-size: 24px;
}
.curr-group-desc {
color: #fff;
@ -48,7 +43,6 @@
.group-operate {
height: 48px;
padding: 10px 6px;
background: #eee;
display: flex;
justify-content: space-around;
.search {

4
client/containers/Group/MemberList/MemberList.scss
View File

@ -3,11 +3,9 @@
.m-panel{
background-color: #fff;
padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
min-height: 4.68rem;
margin-top: 0;
box-shadow: $box-shadow-panel;
// box-shadow: $box-shadow-panel;
}
.m-tab {

2
client/containers/Group/ProjectList/ProjectList.scss
View File

@ -7,8 +7,6 @@
.m-panel{
background-color: #fff;
padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
min-height: 4.68rem;
margin-top: 0;
}

2
client/containers/News/News.js
View File

@ -57,7 +57,7 @@ class News extends Component {
path: '/follow'
}]}/>
<div className="g-row">
<section className="news-box">
<section className="news-box m-panel">
<div className="logHead">
<Breadcrumb />
<div className="Mockurl">

2
client/containers/Project/Activity/Activity.js
View File

@ -29,7 +29,7 @@ class Activity extends Component {
let {currProject} = this.props;
return (
<div className="g-row">
<section className="news-box">
<section className="news-box m-panel">
<div style={{display: "none"}} className="logHead">
{/*<Breadcrumb />*/}
<div className = "projectDes">

25
client/containers/Project/Interface/Interface.js
View File

@ -1,8 +1,9 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Row, Col, Tabs } from 'antd';
import { Tabs, Layout } from 'antd';
import { Route, Switch, matchPath } from 'react-router-dom';
import { connect } from 'react-redux';
const { Content, Footer, Sider } = Layout;
import './interface.scss'
@ -80,9 +81,9 @@ class Interface extends Component {
const { action } = this.props.match.params;
const activeKey = action === 'api' ? 'api' : 'colOrCase';
// console.log(matchPath(this.props.location.pathname, contentRouter));
return <div className="web-content g-row" style={{ marginBottom: "16px" }}>
<Row gutter={16} >
<Col span={6}>
return (
<Layout style={{marginTop: '-24px'}}>
<Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: '112px', marginLeft: '16px', marginTop: '24px' }} width={300}>
<div className="left-menu">
<Tabs type="card" activeKey={activeKey} onChange={this.onChange}>
<Tabs.TabPane tab="接口列表" key="api">
@ -93,19 +94,21 @@ class Interface extends Component {
</Tabs.TabPane>
</Tabs>
</div>
</Col>
<Col span={18} >
</Sider>
<Layout style={{ marginLeft: 316 }}>
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div className="right-content">
<Switch>
<Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />
<Route {...contentRouter} component={InterfaceRoute} />
</Switch>
</div>
</Col>
</Row>
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
© 2017 YMFE 京ICP备17044220号
</Footer>
</Layout>
</Layout>)
}
}

17
client/containers/Project/Interface/interface.scss
View File

@ -1,10 +1,6 @@
.web-content{
.left-menu{
min-height: 5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF;
border-radius:5px;
margin: 3px;
// background: #FFF;
// .item-all-interface {
// background-color: red;
// }
@ -20,7 +16,7 @@
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
height: 39px;
background: #fff;
// background: #fff;
border: 1px solid #d9d9d9;
border-bottom: 0;
}
@ -32,8 +28,8 @@
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
height: 40px;
background-color: #efefef;
color:#021b2d;
// background-color: #efefef;
// color:#021b2d;
font-weight: 500;
// margin-bottom: 0;
}
@ -44,7 +40,7 @@
.ant-tabs.ant-tabs-card > .ant-tabs-bar{
text-align: center;
background: #ececec;
// background: #ececec;
}
.ant-tabs-nav-wrap{
@ -118,7 +114,7 @@
margin:3px;
min-height: 5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF;
background: #fff;
border-radius:5px;
.interface-content{
.ant-tabs-nav{
@ -129,4 +125,3 @@
}
}
}
}

4
client/containers/Project/Setting/ProjectData/ProjectData.js
View File

@ -132,7 +132,8 @@ class ProjectData extends Component {
onChange: this.uploadChnange.bind(this)
}
return (
<div className="m-panel g-row" style={{ paddingTop: '15px' }}>
<div className="g-row">
<div className="m-panel" style={{ paddingTop: '15px' }}>
<div className="postman-dataImport">
<div className="dataImportCon">
<div ><h3>数据导入</h3></div>
@ -172,6 +173,7 @@ class ProjectData extends Component {
</div>
</div>
</div>
</div>
)
}
}

4
client/containers/Project/Setting/ProjectMember/ProjectMember.js
View File

@ -205,7 +205,8 @@ class ProjectMember extends Component {
}
}];
return (
<div className="m-panel g-row" style={{paddingTop: '15px'}}>
<div className="g-row">
<div className="m-panel" style={{paddingTop: '15px'}}>
<Modal
title="添加成员"
visible={this.state.visible}
@ -240,6 +241,7 @@ class ProjectMember extends Component {
}): <ErrMsg type="noMemberInGroup"/>}
</Card>
</div>
</div>
)
}
}

7
client/containers/Project/Setting/Setting.js
View File

@ -1,7 +1,5 @@
import React, { Component } from 'react'
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
const TabPane = Tabs.TabPane;
import ProjectMessage from './ProjectMessage/ProjectMessage.js';
import './Setting.scss';
@ -14,10 +12,7 @@ class Setting extends Component {
const id = this.props.match.params.id;
return (
<div className="g-row">
<Tabs type="card" className="m-tab">
<TabPane tab="项目信息" key="1"><ProjectMessage projectId={+id}/></TabPane>
</Tabs>
<ProjectMessage projectId={+id}/>
</div>
)
}

6
client/styles/common.scss
View File

@ -13,7 +13,7 @@ html, body {
}
html {
// background-color: #202d3a;
// background-color: #32363a;
}
::selection {
@ -69,7 +69,6 @@ em {
// 布局容器 guitter: 16px
.g-row {
max-width: 12.08rem; // Col宽度 (1208+16)/24 = 51
min-width: 7.52rem; // Col宽度 (752+16)/24 = 32
margin: 0 auto;
padding: 0 .24rem;
@ -96,9 +95,6 @@ em {
.pannel-without-tab {
min-height: 5rem;
}
.ant-tabs-tabpane .m-panel {
border-top-left-radius: 0px;
}
@media (max-width: 768px) {
html {

2
client/styles/mixin.scss
View File

@ -4,7 +4,7 @@ $color-blue: #2395f1;
$color-blue-deeper: #34495E;
$color-grey-deep: #929aac;
$color-black-light: #404040;
$color-bg-dark: #202d3a; // 背景色 - header 用的深蓝色
$color-bg-dark: #32363a; // 背景色 - header 用的深蓝色
$box-shadow-panel: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
@mixin row-width-limit {

10
client/styles/theme.less
View File

@ -150,11 +150,13 @@
// Layout
// @layout-body-background : #ececec;
@layout-header-background : #202d3a;
@layout-header-background : #32363a;
@layout-header-height : 56px;
@layout-header-padding : 0 0;
// @layout-footer-padding : 24px 50px;
// @layout-sider-background : @layout-header-background;
// 侧栏背景颜色
@layout-sider-background : #fff;
// @layout-trigger-height : 48px;
// @layout-trigger-background : tint(@heading-color, 20%);
// @layout-trigger-color : #fff;
@ -242,6 +244,12 @@
@menu-dark-bg: @layout-header-background;
@menu-dark-submenu-bg: #333;
@menu-collapsed-width: 64px;
// .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
// background-color: rgba(35,149,241, .15);
// }
// .ant-menu-item:active, .ant-menu-submenu-title:active {
// background-color: rgba(35,149,241, .15);
// }
// Spin
// ---