OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix upgrade warning being chopped off 

The flex box was behaving a bit strange, so we just wrap the content and change `height: 235px` to `max-height: 235px` to get scrollbars.
pull/21833/head
Travis Ralston 2019-06-25 15:40:22 -06:00
parent b6242dbad2
commit 0701d89bbe
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
res/css/views/rooms/_RoomUpgradeWarningBar.scss
View File

@ -15,17 +15,22 @@ limitations under the License.
*/ */
.mx_RoomUpgradeWarningBar { .mx_RoomUpgradeWarningBar {
max-height: 235px;
background-color: $preview-bar-bg-color;
padding-left: 20px;
padding-right: 20px;
overflow: scroll;
}
.mx_RoomUpgradeWarningBar_wrapped {
width: 100%;
height: 100%;
display: flex;
text-align: center; text-align: center;
height: 235px;
background-color: $event-selected-color;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
display: flex;
background-color: $preview-bar-bg-color;
-webkit-align-items: center; -webkit-align-items: center;
padding-left: 20px;
padding-right: 20px;
} }
.mx_RoomUpgradeWarningBar_header { .mx_RoomUpgradeWarningBar_header {

30
src/components/views/rooms/RoomUpgradeWarningBar.js
View File

@ -97,20 +97,22 @@ module.exports = React.createClass({
return ( return (
<div className="mx_RoomUpgradeWarningBar"> <div className="mx_RoomUpgradeWarningBar">
<div className="mx_RoomUpgradeWarningBar_header"> <div className="mx_RoomUpgradeWarningBar_wrapped">
{_t( <div className="mx_RoomUpgradeWarningBar_header">
"This room is running room version <roomVersion />, which this homeserver has " + {_t(
"marked as <i>unstable</i>.", "This room is running room version <roomVersion />, which this homeserver has " +
{}, "marked as <i>unstable</i>.",
{ {},
"roomVersion": () => <code>{this.props.room.getVersion()}</code>, {
"i": (sub) => <i>{sub}</i>, "roomVersion": () => <code>{this.props.room.getVersion()}</code>,
}, "i": (sub) => <i>{sub}</i>,
)} },
</div> )}
{doUpgradeWarnings} </div>
<div className="mx_RoomUpgradeWarningBar_small"> {doUpgradeWarnings}
{_t("Only room administrators will see this warning")} <div className="mx_RoomUpgradeWarningBar_small">
{_t("Only room administrators will see this warning")}
</div>
</div> </div>
</div> </div>
); );