DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(admin): dynamic width

This commit is contained in:
dntzhang 2021-08-02 15:47:29 +08:00
parent 42a4540576
commit d7e74f862c
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/admin/src/components/admin-dashboard.tsx
View File

@ -22,7 +22,7 @@ export default class extends WeElement<Props> {
render() {
return (
<div class={tw``}>
<div class={tw`flex flex-col sm:flex-row md:flex-row flex-wrap gap-x-2 px-2 py-2`} >
<div class={tw`flex flex-col sm:flex-row md:flex-row flex-wrap gap-x-4 px-2 py-2`} >
<o-chart-card content="9987" class={tw`flex-1 md:w-5/12`} describe="PV" color="#07c160" data={[12, 19, 3, 5, 2, 3]} labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}>
<o-icon-people width="2em" height="2em" fill="white"></o-icon-people>
</o-chart-card>

12
packages/admin/src/layouts/basic-layout.tsx
View File

@ -61,6 +61,14 @@ export default class extends WeElement {
installed() {
this.store.ui.baseLayout = this
window.addEventListener('resize', () => {
this.update()
})
}
getMainContentWidth() {
return (window.innerWidth - (this.store.isLeftPanelClosed ? 0 : 256)) + 'px'
}
render() {
@ -74,7 +82,7 @@ export default class extends WeElement {
} flex-none overflow-hidden bg-white z-50 transition-all duration-500 ease-in-out sm:relative fixed `}
></layout-left-panel>
<layout-container class={tw`flex-1 flex-grow`}>
<div class={tw`overflow-auto`} style={{ width: (window.innerWidth - 256) + 'px' }}>
<div class={tw`overflow-auto`} style={{ width: this.getMainContentWidth() }}>
<o-tabs
closable
type="card"
@ -85,7 +93,7 @@ export default class extends WeElement {
></o-tabs>
</div>
<div style={{ height: 'calc(100vh - 90px)' }} class={tw`overflow-auto`}>
<div style={{ height: 'calc(100vh - 90px)', width: this.getMainContentWidth() }} class={tw`overflow-auto`}>
<slot></slot>
</div>
</layout-container>