haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 10:50:24 +00:00
Code Issues Releases Wiki Activity

Fix wikis list style when side panel width is changing (#6349)

Browse Source 
* fix wikis list style when side panel width is changing

* change code format

* fix wiki list item width when side panel is folded
This commit is contained in:
Michael An
2024-07-15 17:23:23 +08:00
committed by GitHub
parent 2536d5c6c3
commit 7c6866503f
4 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/wiki-card-view/wiki-card-group.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import WikiCardItem from './wiki-card-item';
import WikiCardItemAdd from './wiki-card-item-add';
import { isMobile } from '../../utils/utils';
import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
const propTypes = {
wikis: PropTypes.array.isRequired,
@@ -12,6 +13,8 @@ const propTypes = {
isShowAvatar: PropTypes.bool.isRequired,
renameWiki: PropTypes.func.isRequired,
toggelAddWikiDialog: PropTypes.func,
sidePanelRate: PropTypes.number,
isSidePanelFolded: PropTypes.bool,
};
class WikiCardGroup extends Component {
@@ -29,10 +32,16 @@ class WikiCardGroup extends Component {
window.removeEventListener('resize', this.onResize);
}
getContainerWidth = () => {
const { sidePanelRate, isSidePanelFolded } = this.props;
return isSidePanelFolded ? window.innerWidth - SIDE_PANEL_FOLDED_WIDTH : window.innerWidth * (1 - sidePanelRate);
};
onResize = () => {
if (isMobile) return;
const numberOfWiki = Math.floor((window.innerWidth * 0.78 / 180));
const gridTemplateColumns = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
const containerWidth = this.getContainerWidth();
const numberOfWiki = Math.floor(containerWidth / 180);
const gridTemplateColumns = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
if (this.groupItemsRef.current) {
this.groupItemsRef.current.style.gridTemplateColumns = gridTemplateColumns;
}
@@ -40,8 +49,9 @@ class WikiCardGroup extends Component {
render() {
const { wikis, title, isDepartment, toggelAddWikiDialog } = this.props;
const numberOfWiki = Math.floor((window.innerWidth * 0.78 / 180));
const grids = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
const containerWidth = this.getContainerWidth();
const numberOfWiki = Math.floor(containerWidth / 180);
const grids = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
return (
<div className='wiki-card-group mb-4'>
<h4 className="sf-heading">