mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-04 02:02:14 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2080 from matrix-org/dbkr/persistent_app_css_fixes

Browse Source 
Fix persisent apps being the wrong size
This commit is contained in:
David Baker 2018-07-23 16:05:02 +01:00 committed by GitHub
commit c1891aa005
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/structures/_LeftPanel.scss
View File

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -54,7 +55,7 @@ limitations under the License.
} }
.mx_LeftPanel .mx_AppTileFullWidth { .mx_LeftPanel .mx_AppTile_mini {
height: 132px; height: 132px;
} }

28
res/css/views/rooms/_AppsDrawer.scss
View File

@ -61,10 +61,6 @@ limitations under the License.
background-color: $dialog-background-bg-color; background-color: $dialog-background-bg-color;
} }
.mx_AppTile_persistedWrapper {
height: 280px;
}
.mx_AppTile:last-child { .mx_AppTile:last-child {
margin-right: 1px; margin-right: 1px;
} }
@ -79,6 +75,22 @@ limitations under the License.
border-radius: 2px; border-radius: 2px;
} }
.mx_AppTile_mini {
max-width: 960px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mx_AppTile_persistedWrapper {
height: 280px;
}
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
height: 114px;
}
.mx_AppTileMenuBar { .mx_AppTileMenuBar {
margin: 0; margin: 0;
padding: 2px 10px; padding: 2px 10px;
@ -131,11 +143,17 @@ limitations under the License.
} }
.mx_AppTileBody_mini { .mx_AppTileBody_mini {
height: 132px; height: 112px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.mx_AppTileBody_mini iframe {
border: none;
width: 100%;
height: 100%;
}
.mx_AppTileBody iframe { .mx_AppTileBody iframe {
width: 100%; width: 100%;
height: 280px; height: 280px;

11
src/components/views/elements/AppTile.js
View File

@ -616,8 +616,17 @@ export default class AppTile extends React.Component {
const reloadWidgetIcon = 'img/button-refresh.svg'; const reloadWidgetIcon = 'img/button-refresh.svg';
const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg'); const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
let appTileClass;
if (this.props.miniMode) {
appTileClass = 'mx_AppTile_mini';
} else if (this.props.fullWidth) {
appTileClass = 'mx_AppTileFullWidth';
} else {
appTileClass = 'mx_AppTile';
}
return ( return (
<div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}> <div className={appTileClass} id={this.props.id}>
{ this.props.showMenubar && { this.props.showMenubar &&
<div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}> <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
<span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}> <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>