Commit 71f274aa authored by MrMan's avatar MrMan

Fix styling on sliding container

parent 03e1ffca
......@@ -56,12 +56,10 @@ class MatchConvoPage extends React.Component {
});
let closeButton = "";
if (this.props.showClose) {
if (this.props.showCloseButton) {
closeButton = (
<div className="float-right" onClick={this.state.closeFn}>
<h4>
<i className="fa fa-times"></i>
</h4>
<div className="float-left slim-margin-left" onClick={this.state.closeFn}>
<h2><i className="fa fa-times large"></i></h2>
</div>
);
}
......@@ -69,9 +67,27 @@ class MatchConvoPage extends React.Component {
return (
<div className="match-convo-page-container">
{closeButton}
<div className="pure-g">
{messageBubbles}
</div>
<div className="match-convo-page-chat-box abs pinned-to-bottom">
<div className="pure-g">
<div className="pure-u-4-5">
<textarea></textarea>
</div>
<div className="pure-u-1-5">
<div className="full-height nephritis-bg center-aligned-text">
<i className="fa fa-send large"></i>
</div>
</div>
</div>
</div>
</div>
);
}
......
......@@ -68,12 +68,12 @@ class MatchesPage extends React.Component {
);
});
let slideConvoOnScreen = _.isNull(this.currentMatch) ? "" : "onscreen-from-offscreen-right";
let convoShown = _.isNull(this.state.selectedMatch) ? "" : "onscreen";
return (
<div>
<div className="matches-page-container">
<LHSNav />
<div className="matches-page-container">
<div>
<div className="pure-g">
<div className="pure-u-1 right-aligned-text">
<div className="right-aligned-text">
......@@ -90,7 +90,7 @@ class MatchesPage extends React.Component {
</div>
</div>
<div id="match-convo-sliding-container" className={`offscreen-right ${slideConvoOnScreen}`}>
<div id="match-convo-sliding-container" className={`offscreen-right ${convoShown}`}>
<MatchConvoPage match={this.state.selectedMatch}
showCloseButton={true}
closeFn={this.hideMatchConvoContainer.bind(this)}/>
......
......@@ -3,6 +3,10 @@ body, html, #app {
width: 100%;
}
body {
overflow-x: hidden;
}
.landing-wide-button {
padding-top: .1em;
padding-bottom: .1em;
......@@ -116,9 +120,17 @@ body {
}
#match-convo-sliding-container {
width: 100%;
min-height: 100%;
top: 0;
background-color: white;
transition: left 1s;
}
.match-convo-page-container {
position: relative;
}
/*******************/
/* Preference page */
/*******************/
......@@ -184,6 +196,7 @@ section.collapsible-labeled-form-section > label {
.super-slim-text { font-weight: 200; }
.slim-margin-right { margin-right: 1em; }
.slim-margin-left { margin-left: 1em; }
.right-aligned-text { text-align: right; }
.left-aligned-text { text-align: left; }
......@@ -216,6 +229,7 @@ span.large {
bottom: 0;
left: 0;
}
.abs.pinned-to-bottom { position: absolute; }
button.borderless { border: none; }
button.squared { border-radius: 0; }
......@@ -228,12 +242,13 @@ button.in-stack { margin-bottom: .25em; }
.slim-right-padding { padding-right: 1em; }
.float-right { float: right; }
.float-left { float: left; }
.offscreen-right {
position: absolute;
left: 100%;
}
.onscreen-from-offscreen-right { left: 0; }
.offscreen-right.onscreen { left: 0; }
/* Pure Overrides */
.button-success,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment