llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 05:10:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: fix header overflow and account disappear bug, improve UI, optimize touchscreen experience (#187)

Browse Source 
Signed-off-by: turbodog03 <63595854+turbodog03@users.noreply.github.com>
This commit is contained in:
turbodog03
2021-07-23 09:46:01 +08:00
committed by GitHub
parent 66f36d780a
commit 8d7fdb93ac
16 changed files with 187 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
web/src/App.js
View File

@ -17,7 +17,7 @@ import './App.less';
import {Helmet} from "react-helmet"; import {Helmet} from "react-helmet";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons'; import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
import {Avatar, BackTop, Dropdown, Layout, Menu} from 'antd'; import {Avatar, BackTop, Dropdown, Layout, Menu, Card} from 'antd';
import {Link, Redirect, Route, Switch, withRouter} from 'react-router-dom' import {Link, Redirect, Route, Switch, withRouter} from 'react-router-dom'
import OrganizationListPage from "./OrganizationListPage"; import OrganizationListPage from "./OrganizationListPage";
import OrganizationEditPage from "./OrganizationEditPage"; import OrganizationEditPage from "./OrganizationEditPage";
@ -49,7 +49,7 @@ import SelectLanguageBox from './SelectLanguageBox';
import i18next from 'i18next'; import i18next from 'i18next';
import PromptPage from "./auth/PromptPage"; import PromptPage from "./auth/PromptPage";
const { Header, Footer } = Layout; const { Header, Footer, Content } = Layout;
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {
@ -230,6 +230,8 @@ class App extends Component {
return ( return (
<Dropdown key="200" overlay={menu} className="rightDropDown"> <Dropdown key="200" overlay={menu} className="rightDropDown">
<div className="ant-dropdown-link" style={{float: 'right', cursor: 'pointer'}}> <div className="ant-dropdown-link" style={{float: 'right', cursor: 'pointer'}}>
&nbsp;
&nbsp;
{ {
this.renderAvatar() this.renderAvatar()
} }
@ -363,32 +365,9 @@ class App extends Component {
window.location.pathname === '/'; window.location.pathname === '/';
} }
renderContent() { renderRouter(){
return( return(
<div> <div>
<Header style={{ padding: '0', marginBottom: '3px'}}>
{
Setting.isMobile() ? null : (
<Link to={"/"}>
<div className="logo" />
</Link>
)
}
<Menu
// theme="dark"
mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
selectedKeys={[`${this.state.selectedMenuKey}`]}
style={{ lineHeight: '64px' }}
>
{
this.renderMenu()
}
{
this.renderAccount()
}
<SelectLanguageBox/>
</Menu>
</Header>
<Switch> <Switch>
<Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/> <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
<Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/> <Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
@ -413,6 +392,83 @@ class App extends Component {
) )
} }
renderContent() {
if (!Setting.isMobile()) {
return (
<div style={{display: 'flex', flex: 'auto',width:"100%",flexDirection: 'column'}}>
<Layout style={{display: 'flex', alignItems: 'stretch'}}>
<Header style={{ padding: '0', marginBottom: '3px'}}>
{
Setting.isMobile() ? null : (
<Link to={"/"}>
<div className="logo" />
</Link>
)
}
<Menu
// theme="dark"
mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
selectedKeys={[`${this.state.selectedMenuKey}`]}
style={{ lineHeight: '64px'}}
>
{
this.renderMenu()
}
<div style = {{float: 'right'}}>
{
this.renderAccount()
}
<SelectLanguageBox/>
</div>
</Menu>
</Header>
<Layout style={{backgroundColor: "#f5f5f5", alignItems: 'stretch'}}>
<Card className="content-warp-card">
{
this.renderRouter()
}
</Card>
</Layout>
</Layout>
</div>
)
} else {
return(
<div>
<Header style={{ padding: '0', marginBottom: '3px'}}>
{
Setting.isMobile() ? null : (
<Link to={"/"}>
<div className="logo" />
</Link>
)
}
<Menu
// theme="dark"
mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
selectedKeys={[`${this.state.selectedMenuKey}`]}
style={{ lineHeight: '64px' }}
>
{
this.renderMenu()
}
<div style = {{float: 'right'}}>
{
this.renderAccount()
}
<SelectLanguageBox/>
</div>
</Menu>
</Header>
{
this.renderRouter()
}
</div>
)
}
}
renderFooter() { renderFooter() {
// How to keep your footer where it belongs ? // How to keep your footer where it belongs ?
// https://www.freecodecamp.org/neyarnws/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ // https://www.freecodecamp.org/neyarnws/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
@ -460,7 +516,7 @@ class App extends Component {
<div id="parent-area"> <div id="parent-area">
<BackTop /> <BackTop />
<CustomGithubCorner /> <CustomGithubCorner />
<div id="content-wrap"> <div id="content-wrap" style={{flexDirection: "column"}}>
{ {
this.renderContent() this.renderContent()
} }

19
web/src/App.less
View File

@ -27,10 +27,15 @@
#parent-area { #parent-area {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5;
display: flex;
} }
#content-wrap { #content-wrap {
padding-bottom: 70px; /* Footer height */ padding-bottom: 70px; /* Footer height */
display: flex;
align-items: stretch;
width: 100%;
} }
#footer { #footer {
@ -43,9 +48,10 @@
.language_box { .language_box {
background: url("https://cdn.casbin.org/img/muti_language.svg"); background: url("https://cdn.casbin.org/img/muti_language.svg");
background-size: 25px, 25px; background-size: 25px, 25px;
width: 25px; background-position: center;
height: 25px; background-repeat:no-repeat;
margin: 22px 20px 16px 20px; width: 45px;
height: 65px;
float: right; float: right;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -58,3 +64,10 @@
background-color: #f5f5f5; background-color: #f5f5f5;
} }
} }
.content-warp-card{
box-shadow: 0 1px 5px 0 rgba(51, 51, 51, 0.14);
margin: 5px 5px 5px 5px;
flex:1;
align-items: stretch;
}

16
web/src/ApplicationEditPage.js
View File

@ -411,24 +411,12 @@ class ApplicationEditPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.state.application !== null ? this.renderApplication() : null this.state.application !== null ? this.renderApplication() : null
} }
</Col> <div style={{marginTop: '20px', marginLeft: '40px'}}>
<Col span={1}>
</Col>
</Row>
<Row style={{margin: 10}}>
<Col span={2}>
</Col>
<Col span={18}>
<Button type="primary" size="large" onClick={this.submitApplicationEdit.bind(this)}>{i18next.t("general:Save")}</Button> <Button type="primary" size="large" onClick={this.submitApplicationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
</Col> </div>
</Row>
</div> </div>
); );
} }

14
web/src/ApplicationListPage.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from 'antd'; import {Button, List, Popconfirm, Table, Tooltip} from 'antd';
import {EditOutlined} from "@ant-design/icons"; import {EditOutlined} from "@ant-design/icons";
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
@ -104,6 +104,7 @@ class ApplicationListPage extends React.Component {
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '150px', width: '150px',
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name), sorter: (a, b) => a.name.localeCompare(b.name),
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -195,6 +196,7 @@ class ApplicationListPage extends React.Component {
dataIndex: '', dataIndex: '',
key: 'op', key: 'op',
width: '170px', width: '170px',
fixed: (Setting.isMobile()) ? "false" : "right",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@ -213,7 +215,7 @@ class ApplicationListPage extends React.Component {
return ( return (
<div> <div>
<Table columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={{pageSize: 100}} <Table scroll={{x: 'max-content'}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{i18next.t("general:Applications")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("general:Applications")}&nbsp;&nbsp;&nbsp;&nbsp;
@ -229,17 +231,9 @@ class ApplicationListPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.renderTable(this.state.applications) this.renderTable(this.state.applications)
} }
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
); );
} }

2
web/src/LdapTable.js
View File

@ -171,7 +171,7 @@ class LdapTable extends React.Component {
]; ];
return ( return (
<Table rowKey="id" columns={columns} dataSource={table} size="middle" bordered pagination={false} <Table scroll={{x: 'max-content'}} rowKey="id" columns={columns} dataSource={table} size="middle" bordered pagination={false}
title={() => ( title={() => (
<div> <div>
{this.props.title}&nbsp;&nbsp;&nbsp;&nbsp; {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;

19
web/src/OrganizationEditPage.js
View File

@ -246,25 +246,12 @@ class OrganizationEditPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.state.organization !== null ? this.renderOrganization() : null this.state.organization !== null ? this.renderOrganization() : null
} }
</Col> <div style={{marginTop: '20px', marginLeft: '40px'}}>
<Col span={1}> <Button type="primary" size="large" onClick={this.submitOrganizationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
</Col> </div>
</Row>
<Row style={{margin: 10}}>
<Col span={2}>
</Col>
<Col span={18}>
<Button type="primary" size="large"
onClick={this.submitOrganizationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
</Col>
</Row>
</div> </div>
); );
} }

16
web/src/OrganizationListPage.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, Col, Popconfirm, Row, Table} from 'antd'; import {Button, Popconfirm, Table} from 'antd';
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import * as OrganizationBackend from "./backend/OrganizationBackend"; import * as OrganizationBackend from "./backend/OrganizationBackend";
@ -93,6 +93,7 @@ class OrganizationListPage extends React.Component {
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '120px', width: '120px',
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name), sorter: (a, b) => a.name.localeCompare(b.name),
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -150,7 +151,7 @@ class OrganizationListPage extends React.Component {
title: i18next.t("general:Password type"), title: i18next.t("general:Password type"),
dataIndex: 'passwordType', dataIndex: 'passwordType',
key: 'passwordType', key: 'passwordType',
width: '150px', width: '100px',
sorter: (a, b) => a.passwordType.localeCompare(b.passwordType), sorter: (a, b) => a.passwordType.localeCompare(b.passwordType),
}, },
{ {
@ -178,6 +179,7 @@ class OrganizationListPage extends React.Component {
dataIndex: '', dataIndex: '',
key: 'op', key: 'op',
width: '240px', width: '240px',
fixed: (Setting.isMobile()) ? "false" : "right",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@ -197,7 +199,7 @@ class OrganizationListPage extends React.Component {
return ( return (
<div> <div>
<Table columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={{pageSize: 100}} <Table scroll={{x: 'max-content'}} columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{i18next.t("general:Organizations")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("general:Organizations")}&nbsp;&nbsp;&nbsp;&nbsp;
@ -213,17 +215,9 @@ class OrganizationListPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.renderTable(this.state.organizations) this.renderTable(this.state.organizations)
} }
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
); );
} }

16
web/src/ProviderEditPage.js
View File

@ -309,24 +309,12 @@ class ProviderEditPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.state.provider !== null ? this.renderProvider() : null this.state.provider !== null ? this.renderProvider() : null
} }
</Col> <div style={{marginTop: '20px', marginLeft: '40px'}}>
<Col span={1}>
</Col>
</Row>
<Row style={{margin: 10}}>
<Col span={2}>
</Col>
<Col span={18}>
<Button type="primary" size="large" onClick={this.submitProviderEdit.bind(this)}>{i18next.t("general:Save")}</Button> <Button type="primary" size="large" onClick={this.submitProviderEdit.bind(this)}>{i18next.t("general:Save")}</Button>
</Col> </div>
</Row>
</div> </div>
); );
} }

14
web/src/ProviderListPage.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, Col, Popconfirm, Row, Table} from 'antd'; import {Button, Popconfirm, Table} from 'antd';
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import * as ProviderBackend from "./backend/ProviderBackend"; import * as ProviderBackend from "./backend/ProviderBackend";
@ -96,6 +96,7 @@ class ProviderListPage extends React.Component {
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '120px', width: '120px',
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name), sorter: (a, b) => a.name.localeCompare(b.name),
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -183,6 +184,7 @@ class ProviderListPage extends React.Component {
dataIndex: '', dataIndex: '',
key: 'op', key: 'op',
width: '170px', width: '170px',
fixed: (Setting.isMobile()) ? "false" : "right",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@ -201,7 +203,7 @@ class ProviderListPage extends React.Component {
return ( return (
<div> <div>
<Table columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={{pageSize: 100}} <Table scroll={{x: 'max-content'}} columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{i18next.t("general:Providers")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("general:Providers")}&nbsp;&nbsp;&nbsp;&nbsp;
@ -217,17 +219,9 @@ class ProviderListPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.renderTable(this.state.providers) this.renderTable(this.state.providers)
} }
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
); );
} }

11
web/src/RecordListPage.js
View File

@ -62,6 +62,7 @@ class RecordListPage extends React.Component {
dataIndex: ['Record', 'clientIp'], dataIndex: ['Record', 'clientIp'],
key: 'id', key: 'id',
width: '120px', width: '120px',
fixed: 'left',
sorter: (a, b) => a.Record.clientIp.localeCompare(b.Record.clientIp), sorter: (a, b) => a.Record.clientIp.localeCompare(b.Record.clientIp),
render: (text, record, index) => { render: (text, record, index) => {
return text; return text;
@ -125,7 +126,7 @@ class RecordListPage extends React.Component {
return ( return (
<div> <div>
<Table columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={{pageSize: 100}} <Table scroll={{x: 'max-content'}} columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp;
@ -140,17 +141,9 @@ class RecordListPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.renderTable(this.state.records) this.renderTable(this.state.records)
} }
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
); );
} }

6
web/src/SelectLanguageBox.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import { Menu, Dropdown, message } from "antd"; import { Menu, Dropdown} from "antd";
import { createFromIconfontCN } from '@ant-design/icons'; import { createFromIconfontCN } from '@ant-design/icons';
import './App.less'; import './App.less';
@ -48,8 +48,8 @@ class SelectLanguageBox extends React.Component {
); );
return ( return (
<Dropdown overlay={menu} style={{cursor: "pointer"}}> <Dropdown overlay={menu} >
<span className="language_box" /> <div className="language_box" />
</Dropdown> </Dropdown>
); );
} }

16
web/src/TokenEditPage.js
View File

@ -163,24 +163,12 @@ class TokenEditPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.state.token !== null ? this.renderToken() : null this.state.token !== null ? this.renderToken() : null
} }
</Col> <div style={{marginTop: '20px', marginLeft: '40px'}}>
<Col span={1}>
</Col>
</Row>
<Row style={{margin: 10}}>
<Col span={2}>
</Col>
<Col span={18}>
<Button type="primary" size="large" onClick={this.submitTokenEdit.bind(this)}>{i18next.t("general:Save")}</Button> <Button type="primary" size="large" onClick={this.submitTokenEdit.bind(this)}>{i18next.t("general:Save")}</Button>
</Col> </div>
</Row>
</div> </div>
); );
} }

16
web/src/TokenListPage.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, Col, Popconfirm, Row, Table} from 'antd'; import {Button, Popconfirm, Table} from 'antd';
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import * as TokenBackend from "./backend/TokenBackend"; import * as TokenBackend from "./backend/TokenBackend";
@ -90,7 +90,8 @@ class TokenListPage extends React.Component {
title: i18next.t("general:Name"), title: i18next.t("general:Name"),
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '300px', width: (Setting.isMobile()) ? "100px" : "300px",
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name), sorter: (a, b) => a.name.localeCompare(b.name),
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -199,6 +200,7 @@ class TokenListPage extends React.Component {
dataIndex: '', dataIndex: '',
key: 'op', key: 'op',
width: '170px', width: '170px',
fixed: (Setting.isMobile()) ? "false" : "right",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@ -217,7 +219,7 @@ class TokenListPage extends React.Component {
return ( return (
<div> <div>
<Table columns={columns} dataSource={tokens} rowKey="name" size="middle" bordered pagination={{pageSize: 100}} <Table scroll={{x: 'max-content'}} columns={columns} dataSource={tokens} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp;
@ -233,17 +235,9 @@ class TokenListPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.renderTable(this.state.tokens) this.renderTable(this.state.tokens)
} }
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
); );
} }

16
web/src/UserEditPage.js
View File

@ -337,24 +337,12 @@ class UserEditPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.state.user !== null ? this.renderUser() : null this.state.user !== null ? this.renderUser() : null
} }
</Col> <div style={{marginTop: '20px', marginLeft: '40px'}}>
<Col span={1}>
</Col>
</Row>
<Row style={{margin: 10}}>
<Col span={2}>
</Col>
<Col span={18}>
<Button type="primary" size="large" onClick={this.submitUserEdit.bind(this)}>{i18next.t("general:Save")}</Button> <Button type="primary" size="large" onClick={this.submitUserEdit.bind(this)}>{i18next.t("general:Save")}</Button>
</Col> </div>
</Row>
</div> </div>
); );
} }

30
web/src/UserListPage.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, Col, Popconfirm, Row, Switch, Table} from 'antd'; import {Button, Popconfirm, Switch, Table} from 'antd';
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import * as UserBackend from "./backend/UserBackend"; import * as UserBackend from "./backend/UserBackend";
@ -108,7 +108,8 @@ class UserListPage extends React.Component {
title: i18next.t("general:Organization"), title: i18next.t("general:Organization"),
dataIndex: 'owner', dataIndex: 'owner',
key: 'owner', key: 'owner',
width: '120px', width: (Setting.isMobile()) ? "100px" : "120px",
fixed: 'left',
sorter: (a, b) => a.owner.localeCompare(b.owner), sorter: (a, b) => a.owner.localeCompare(b.owner),
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -122,7 +123,8 @@ class UserListPage extends React.Component {
title: i18next.t("general:Name"), title: i18next.t("general:Name"),
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '100px', width: (Setting.isMobile()) ? "80px" : "100px",
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name), sorter: (a, b) => a.name.localeCompare(b.name),
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -136,7 +138,7 @@ class UserListPage extends React.Component {
title: i18next.t("general:Created time"), title: i18next.t("general:Created time"),
dataIndex: 'createdTime', dataIndex: 'createdTime',
key: 'createdTime', key: 'createdTime',
width: '160px', width: '180px',
sorter: (a, b) => a.createdTime.localeCompare(b.createdTime), sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
render: (text, record, index) => { render: (text, record, index) => {
return Setting.getFormattedDate(text); return Setting.getFormattedDate(text);
@ -153,7 +155,7 @@ class UserListPage extends React.Component {
title: i18next.t("general:Avatar"), title: i18next.t("general:Avatar"),
dataIndex: 'avatar', dataIndex: 'avatar',
key: 'avatar', key: 'avatar',
width: '100px', width: '80px',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<a target="_blank" rel="noreferrer" href={text}> <a target="_blank" rel="noreferrer" href={text}>
@ -208,7 +210,7 @@ class UserListPage extends React.Component {
title: i18next.t("user:Is admin"), title: i18next.t("user:Is admin"),
dataIndex: 'isAdmin', dataIndex: 'isAdmin',
key: 'isAdmin', key: 'isAdmin',
width: '120px', width: '100px',
sorter: (a, b) => a.isAdmin - b.isAdmin, sorter: (a, b) => a.isAdmin - b.isAdmin,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -220,7 +222,7 @@ class UserListPage extends React.Component {
title: i18next.t("user:Is global admin"), title: i18next.t("user:Is global admin"),
dataIndex: 'isGlobalAdmin', dataIndex: 'isGlobalAdmin',
key: 'isGlobalAdmin', key: 'isGlobalAdmin',
width: '120px', width: '100px',
sorter: (a, b) => a.isGlobalAdmin - b.isGlobalAdmin, sorter: (a, b) => a.isGlobalAdmin - b.isGlobalAdmin,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -232,7 +234,7 @@ class UserListPage extends React.Component {
title: i18next.t("user:Is forbidden"), title: i18next.t("user:Is forbidden"),
dataIndex: 'isForbidden', dataIndex: 'isForbidden',
key: 'isForbidden', key: 'isForbidden',
width: '120px', width: '100px',
sorter: (a, b) => a.isForbidden - b.isForbidden, sorter: (a, b) => a.isForbidden - b.isForbidden,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
@ -245,7 +247,7 @@ class UserListPage extends React.Component {
dataIndex: '', dataIndex: '',
key: 'op', key: 'op',
width: '190px', width: '190px',
fixed: 'right', fixed: (Setting.isMobile()) ? "false" : "right",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@ -264,7 +266,7 @@ class UserListPage extends React.Component {
return ( return (
<div> <div>
<Table columns={columns} scroll={{x: 1300}} dataSource={users} rowKey="name" size="middle" bordered pagination={{pageSize: 100}} <Table scroll={{x: 'max-content'}} columns={columns} scroll={{x: 1300}} dataSource={users} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{i18next.t("general:Users")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("general:Users")}&nbsp;&nbsp;&nbsp;&nbsp;
@ -280,17 +282,9 @@ class UserListPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Row style={{width: "100%"}}>
<Col span={1}>
</Col>
<Col span={22}>
{ {
this.renderTable(this.state.users) this.renderTable(this.state.users)
} }
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
); );
} }

11
web/src/basic/HomePage.js
View File

@ -70,11 +70,7 @@ class HomePage extends React.Component {
) )
} else { } else {
return ( return (
<div> <div style={{marginRight:'15px',marginLeft:'15px'}}>
<Row>
<Col span={1}>
</Col>
<Col span={22}>
<Row style={{marginLeft: "-20px", marginRight: "-20px", marginTop: "20px"}} gutter={24}> <Row style={{marginLeft: "-20px", marginRight: "-20px", marginTop: "20px"}} gutter={24}>
{ {
items.map(item => { items.map(item => {
@ -84,10 +80,6 @@ class HomePage extends React.Component {
}) })
} }
</Row> </Row>
</Col>
<Col span={1}>
</Col>
</Row>
</div> </div>
) )
} }
@ -96,7 +88,6 @@ class HomePage extends React.Component {
render() { render() {
return ( return (
<div> <div>
&nbsp;
<Row style={{width: "100%"}}> <Row style={{width: "100%"}}>
<Col span={24} style={{display: "flex", justifyContent: "center"}} > <Col span={24} style={{display: "flex", justifyContent: "center"}} >
{ {