Commit 92ba5671 authored by MrMan's avatar MrMan

livable styling on match convo page

parent f6d07c7e
......@@ -25,9 +25,13 @@ class MatchConvoPage extends React.Component {
let receivedOrSent = m.to === this.props.viewingUser._id ? "received" : "sent";
return (
<div key={m._id + '-msg-' + i} className={`pure-u-1 match-convo-message ${receivedOrSent}`}>
<div className="match-convo-message slim-padding">{m.message}</div>
<div className="match-convo-sent-date no-vertical-margins right-aligned-text slim-right-padding"><MomentFuzzyDate date={m.sent_date}/></div>
<div key={m._id + '-msg-' + i} className="pure-u-1">
<div className={`match-convo-message ${receivedOrSent}`}>
<div className="match-convo-message slim-padding">{m.message}</div>
<div className="match-convo-sent-date no-vertical-margins right-aligned-text slim-right-padding">
<MomentFuzzyDate date={m.sent_date}/>
</div>
</div>
</div>
);
});
......@@ -35,9 +39,9 @@ class MatchConvoPage extends React.Component {
let closeButton = "";
if (this.props.showCloseButton) {
closeButton = (
<div className="float-left slim-margin-left"
<div id="match-convo-close-btn"
onClick={() => { if (this.props.closeFn) { this.props.closeFn(); }}}>
<h2><i className="fa fa-times large"></i></h2>
<h2 className="no-margin"><i className="fa fa-arrow-left large"></i></h2>
</div>
);
}
......@@ -47,18 +51,18 @@ class MatchConvoPage extends React.Component {
return (
<div className="match-convo-page-container">
{closeButton}
<h1 className="right-aligned-text slim-text slim-right-padding">{this.props.matchedUser.name}</h1>
<div className="match-convo-page-messages-container">
<div className="pure-g">
{messageListElements}
</div>
</div>
<div className="match-convo-page-chat-box abs pinned-to-bottom full-width">
<div className="pure-g full-height">
<div className="pure-u-4-5 full-height">
<textarea placeholder="Enter message..." className="pure-u-1 full-height"></textarea>
<textarea placeholder="Enter message..." className="pure-u-1 full-height squared"></textarea>
</div>
<div className="pure-u-1-5 full-height">
......@@ -68,7 +72,6 @@ class MatchConvoPage extends React.Component {
</div>
</div>
</div>
</div>
</div>
......
......@@ -129,8 +129,9 @@ body {
.match-convo-page-container {
width: 100%;
min-height: 100%;
position: absolute;
height: 100%;
/* position: absolute; */
overflow-y: hidden;
}
/*******************/
......@@ -194,8 +195,28 @@ section.collapsible-labeled-form-section > label {
/* MatchConvoPage */
/******************/
#match-convo-close-btn {
top: 0;
left: 0;
z-index: 1;
position: absolute;
color: white;
padding-left: .25em;
paddint-top: .25em;
background-color: rgba(40,40,40,0.6);
border-radius: 1em;
padding: .1em;
}
.match-convo-page-messages-container {
position: absolute;
overflow-y: hidden;
height: 90%; /* Space is left for the chat box */
}
.match-convo-page-chat-box {
height: 4em;
height: 10%;
}
.match-convo-page-chat-box textarea {
......@@ -205,7 +226,7 @@ section.collapsible-labeled-form-section > label {
}
.match-convo-message {
margin-bottom: .25em;
margin: .5em;
padding: .25em;
}
......@@ -221,7 +242,7 @@ section.collapsible-labeled-form-section > label {
.match-convo-sent-date {
font-style: italic;
font-size: medium;
font-size: small;
}
/*******************/
......@@ -268,9 +289,10 @@ span.large {
.abs.pinned-to-bottom { position: absolute; }
button.borderless { border: none; }
button.squared { border-radius: 0; }
button.in-stack { margin-bottom: .25em; }
.squared { border-radius: 0; }
.slim-vertical-padding {
padding-top: 1em;
padding-bottom: 1em;
......
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