remove transparent background for now; specify image width & height; punt the label over to the far RHS; to get around various layout problems in Chrome 44 and Safari 8

This commit is contained in:
Matthew Hodgson 2015-10-29 11:01:23 +00:00
parent 2c05515141
commit 9fd2bf0989
3 changed files with 12 additions and 9 deletions

View File

@ -420,7 +420,7 @@ module.exports = {
var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_before[0]); var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_before[0]);
ret.push(<li key={mxEv.getId() + "-1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>); ret.push(<li key={mxEv.getId() + "-1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>);
} }
ret.push(<li key={mxEv.getId()}><EventTile mxEvent={mxEv} searchTerm={this.state.searchTerm}/></li>); ret.push(<li key={mxEv.getId() + "+0"}><EventTile mxEvent={mxEv} searchTerm={this.state.searchTerm}/></li>);
if (resultList[i].context.events_after[0]) { if (resultList[i].context.events_after[0]) {
var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_after[0]); var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_after[0]);
ret.push(<li key={mxEv.getId() + "+1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>); ret.push(<li key={mxEv.getId() + "+1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>);

View File

@ -33,10 +33,10 @@ limitations under the License.
-webkit-flex: 1; -webkit-flex: 1;
flex: 1 1 10%; flex: 1 1 10%;
min-width: 60px; min-width: 60px;
/* /*
background-color: #080; background-color: #080;
height: 20px; height: 20px;
*/ */
} }
.mx_ImageView_content { .mx_ImageView_content {
@ -45,8 +45,8 @@ limitations under the License.
/* min-width hack needed for FF */ /* min-width hack needed for FF */
min-width: 0px; min-width: 0px;
height: 90%; height: 90%;
-webkit-flex: 15; -webkit-flex: 5;
flex: 15 15 0; flex: 5 5 0;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -62,7 +62,7 @@ limitations under the License.
max-height: 100%; max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */ /* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */
object-fit: contain; object-fit: contain;
background-image: url('img/trans.png'); /* background-image: url('img/trans.png'); */
} }
.mx_ImageView_labelWrapper { .mx_ImageView_labelWrapper {
@ -75,8 +75,11 @@ limitations under the License.
.mx_ImageView_label { .mx_ImageView_label {
text-align: left; text-align: left;
display: flex; display: flex;
display: -webkit-flex;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
padding-left: 60px; padding-left: 60px;
padding-right: 60px; padding-right: 60px;
min-height: 100%; min-height: 100%;
@ -130,8 +133,8 @@ limitations under the License.
-webkit-flex: 1; -webkit-flex: 1;
flex: 1 1 10%; flex: 1 1 10%;
min-width: 300px; min-width: 300px;
/* /*
background-color: #800; background-color: #800;
height: 20px; height: 20px;
*/ */
} }

View File

@ -97,7 +97,7 @@ module.exports = React.createClass({
<div className="mx_ImageView_lhs"> <div className="mx_ImageView_lhs">
</div> </div>
<div className="mx_ImageView_content"> <div className="mx_ImageView_content">
<img src={this.props.src}/> <img src={this.props.src} width={this.props.width} height={this.props.height}/>
<div className="mx_ImageView_labelWrapper"> <div className="mx_ImageView_labelWrapper">
<div className="mx_ImageView_label"> <div className="mx_ImageView_label">
<div className="mx_ImageView_shim"> <div className="mx_ImageView_shim">