BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix mobile and small tablet, chat / userlist position

Browse Source
This commit is contained in:
KDSBrowne 2018-04-28 18:59:45 -07:00
parent 261a2e3b59
commit a9072f5a32
2 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
bigbluebutton-html5/imports/ui/components/app/component.jsx
View File

@ -62,6 +62,7 @@ class App extends Component {
this.state = {
compactUserList: false, // TODO: Change this on userlist resize (?)
width: 0,
};
}
@ -73,6 +74,9 @@ class App extends Component {
document.getElementsByTagName('html')[0].style.fontSize = this.props.fontSize;
}
componentDidUpdate(prevProps, prevState) {
console.log(this.state.width);
}
renderNavBar() {
@ -126,13 +130,14 @@ class App extends Component {
return (
<Resizable
minWidth={'10%'}
maxWidth={'20%'}
ref={node => { this.resizableUserList = node; }}
enable={{ right:true }}
minWidth="10%"
maxWidth="20%"
ref={(node) => { this.resizableUserList = node; }}
enable={{ right: true }}
className={styles.resizableUserList}
>
<div
className={cx(styles.userList, userListStyle)}
className={cx(styles.userList, userListStyle)}
aria-label={intl.formatMessage(intlMessages.userListLabel)}
aria-hidden={chatIsOpen}
>
@ -149,10 +154,11 @@ class App extends Component {
return (
<Resizable
minWidth={'15%'}
maxWidth={'30%'}
ref={node => { this.resizableChat = node; }}
enable={{ right:true }}
minWidth="15%"
maxWidth="30%"
ref={(node) => { this.resizableChat = node; }}
className={styles.resizableChat}
enable={{ right: true }}
>
<section
className={styles.chat}
@ -165,7 +171,9 @@ class App extends Component {
}
renderMedia() {
const { media, intl, chatIsOpen, userlistIsOpen } = this.props;
const {
media, intl, chatIsOpen, userlistIsOpen,
} = this.props;
if (!media) return null;
@ -182,7 +190,9 @@ class App extends Component {
}
renderActionsBar() {
const { actionsbar, intl, userlistIsOpen, chatIsOpen } = this.props;
const {
actionsbar, intl, userlistIsOpen, chatIsOpen,
} = this.props;
if (!actionsbar) return null;

13
bigbluebutton-html5/imports/ui/components/app/styles.scss
View File

@ -91,6 +91,7 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
}
}
.userList {
@extend %full-page;
@extend %text-elipsis;
@ -112,6 +113,12 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
@include mq($xlarge-up) {
flex-basis: 10vw;
}
@include mq('only screen and (max-width: 640px)') {
padding-top: $navbar-height;
height: 100vh;
width: 100vw;
}
}
.userlistPad {
@ -147,6 +154,12 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
@include mq($xlarge-up) {
flex-basis: 20vw;
}
@include mq('only screen and (max-width: 640px)') {
padding-top: $navbar-height;
height: 100vh;
width: 100vw;
}
}
.sidebar {