hieu/chatngay_chatboard_dev
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
hieutmd
2023-05-02 15:15:45 +07:00
parent c23afc427f
commit 3ee8d6d0be
2 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.tsx
View File

@@ -140,9 +140,10 @@ const ShowUserSpace = ({openHelp}: {openHelp: () => any}) => {
const App: FC<{ client_setting: ClientSettings }> = ({ client_setting }) => { const App: FC<{ client_setting: ClientSettings }> = ({ client_setting }) => {
const HEADER_HEIGHT = 70; const HEADER_HEIGHT = 70;
const [closeHelp, setHelpClose] = useState<boolean>(false); const [help_open, setHelpOpen] = useState<boolean>(false);
const LAYOUT_CLOSED = closeHelp ? { width: 1200, marginLeft: 'auto', marginRight: 'auto' } : { marginTop: HEADER_HEIGHT, height: WINDOW_HEIGHT - HEADER_HEIGHT, overflow: 'auto' }; const LAYOUT_CLOSED = !help_open ? { width: 1200, marginLeft: 'auto', marginRight: 'auto' } : { marginTop: HEADER_HEIGHT, height: WINDOW_HEIGHT - HEADER_HEIGHT, overflow: 'auto' };
const windowWidth = window.innerWidth; const windowWidth = window.innerWidth;
const is_small_window = windowWidth <= 1366;
return ( return (
<Layout className={'box-chatboard'}> <Layout className={'box-chatboard'}>
@@ -157,38 +158,38 @@ const App: FC<{ client_setting: ClientSettings }> = ({ client_setting }) => {
</div> </div>
</Col> </Col>
{ {
windowWidth <= 1366 ? is_small_window ?
<Col className={'content-chatboard-col'} span={20}> <Col className={'content-chatboard-col'} span={20}>
<Content className="contentCenter"> <Content className="contentCenter">
<ShowUserSpace openHelp={() => setHelpClose(true)} /> <ShowUserSpace openHelp={() => setHelpOpen(true)} />
</Content> </Content>
</Col> </Col>
: :
<Col className={'content-chatboard-col content-chatboard-col-big'} span={14}> <Col className={'content-chatboard-col content-chatboard-col-big'} span={ help_open ? 14 : 20 }>
<Content className="contentCenter"> <Content className="contentCenter">
<ShowUserSpace openHelp={() => setHelpClose(true)} /> <ShowUserSpace openHelp={() => setHelpOpen(true)} />
</Content> </Content>
</Col> </Col>
} }
{ {
windowWidth <= 1366 ? help_open &&
( (
closeHelp && is_small_window ?
<div className="fix-ab-ct-right" id="fix-ab-ct-right"> <div className="fix-ab-ct-right" id="fix-ab-ct-right">
<div className="contentRight" > <div className="contentRight" >
<h2 className="contentRightHeader">Trợ giúp Admin <CloseOutlined onClick={() => setHelpClose(false)} title={'Đóng'} /> </h2> <h2 className="contentRightHeader">Trợ giúp Admin <CloseOutlined onClick={() => setHelpOpen(false)} title={'Đóng'} /> </h2>
<HelpSideBar /> <HelpSideBar />
</div>
</div> </div>
</div> :
<Col className={'content-chatboard-col'} span={6}>
<div className="contentRight" >
<h2 className="contentRightHeader">Trợ giúp Admin <a onClick={() => setHelpOpen(false)}>Đóng</a></h2>
<HelpSideBar />
</div>
</Col>
) )
:
<Col className={'content-chatboard-col'} span={6}>
<div className="contentRight" >
<h2 className="contentRightHeader">Trợ giúp <a onClick={() => setHelpClose(false)}>Đóng</a></h2>
<HelpSideBar />
</div>
</Col>
} }
</Row> </Row>
</Layout> </Layout>

11
src/styles/app.css
View File

@@ -54,11 +54,14 @@ code {
/* use for SPAN in place of A tag */ /* use for SPAN in place of A tag */
.box-chatboard { .box-chatboard {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
float: left; /*float: left;
position: relative; position: relative;*/
} }
.a-link { .a-link {
@@ -705,11 +708,11 @@ code {
display: block; display: block;
} }
.content-chatboard-col-big .contentCenterHeaderAdmin { .content-chatboard-col-big .contentCenterHeaderAdmin {
display: none; /*display: none;*/
} }
@media (max-width: 1366px) { @media (max-width: 1366px) {
.contentCenterCtColRight .ant-tabs-content { .contentCenterCtColRight .ant-tabs-content {
max-height: 140px; max-height: 140px;
min-height: 140px; min-height: 140px;
} }
} }