diff --git a/res/css/_components.scss b/res/css/_components.scss index 035caec36a..f6c6363046 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -17,6 +17,7 @@ @import "./structures/_LeftPanelWidget.scss"; @import "./structures/_MainSplit.scss"; @import "./structures/_MatrixChat.scss"; +@import "./structures/_BackdropPanel.scss"; @import "./structures/_MyGroups.scss"; @import "./structures/_NonUrgentToastContainer.scss"; @import "./structures/_NotificationPanel.scss"; diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss new file mode 100644 index 0000000000..3415a49d2e --- /dev/null +++ b/res/css/structures/_BackdropPanel.scss @@ -0,0 +1,33 @@ +/* +Copyright 2021 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_BackdropPanel { + position: absolute; + left: 0; + top: 0; + height: 100vh; + width: 100%; +} + +.mx_BackdropPanel--canvas { + position: absolute; + top: 0; + left: 0; + min-height: 100%; + z-index: 0; + pointer-events: none; + overflow: hidden; +} diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 4bd6b1e816..f0203f6905 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -20,7 +20,6 @@ $roomListCollapsedWidth: 68px; .mx_LeftPanel { // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel min-width: 206px; - max-width: 50%; // Create a row-based flexbox for the GroupFilterPanel and the room list display: flex; diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 77dc5f4454..43bf1b9c3c 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -29,22 +29,10 @@ limitations under the License. .mx_MatrixChat_wrapper { display: flex; - flex-direction: column; - width: 100%; height: 100%; } -.mx_BackdropPanel { - position: absolute; - top: 0; - left: 0; - min-height: 100%; - z-index: 0; - pointer-events: none; - overflow: hidden; -} - .mx_MatrixToolbar { order: 1; @@ -57,10 +45,10 @@ limitations under the License. display: flex; - order: 2; - flex: 1; + flex-grow: 0; min-height: 0; + max-width: 50%; } .mx_MatrixChat_syncError { diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 831f186ed4..84f28b5ada 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -18,6 +18,8 @@ limitations under the License. word-wrap: break-word; display: flex; flex-direction: column; + flex: 1; + position: relative; } diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index 1242835450..c1c1e784aa 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -131,10 +131,10 @@ export default class BackdropPanel extends React.PureComponent { public render() { if (!this.props.backgroundImage) return null; - return
+ return
{ opacity: .12, }} ref={this.roomListCanvasRef} - className="mx_BackdropPanel" + className="mx_BackdropPanel--canvas" />
; } diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 62e6f57780..2371aec384 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -644,8 +644,8 @@ class LoggedInView extends React.Component { resizeNotifier={this.props.resizeNotifier} /> - { pageElement }
+ { pageElement }