daily commit
This commit is contained in:
or-else
+115
-18
@@ -2,36 +2,96 @@ html, body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.fullScreen {
|
||||
width: 100%!important;
|
||||
height: 100%!important;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
width: 30em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
/* Top-level layout style: sidebar + main view */
|
||||
#mountPoint {
|
||||
padding-left: 0;
|
||||
transition: all 0.5s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.messagesContainer {
|
||||
margin-left: 30em;
|
||||
#mountPoint.toggled {
|
||||
padding-left: 30em;
|
||||
}
|
||||
|
||||
.messagesContainer {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
#sidebar-wrapper {
|
||||
position: fixed;
|
||||
left: 30em;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
margin-left: -30em;
|
||||
overflow-y: auto;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#mountPoint.toggled #sidebar-wrapper {
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: #CCF
|
||||
}
|
||||
|
||||
#mountPoint.toggled #page-content-wrapper {
|
||||
position: absolute;
|
||||
margin-right: -30em;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#mountPoint {
|
||||
padding-left: 30em;
|
||||
}
|
||||
|
||||
#mountPoint.toggled {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
#mountPoint.toggled #sidebar-wrapper {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#mountPoint.toggled #page-content-wrapper {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
/* END of top-level layout */
|
||||
|
||||
.avatar {
|
||||
width: 32pt;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: 64px;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
@@ -73,6 +133,47 @@ html, body {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.fullHeight {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fullViewPort {
|
||||
height: 98vh;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chatTitle {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 64px;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#messagesPanel {
|
||||
overflow-y: scroll;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#messagesView {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
#sendMessagePanel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.chatBox {
|
||||
list-style: none;
|
||||
padding: 1.5em 0 1.5em;
|
||||
@@ -82,6 +183,7 @@ html, body {
|
||||
.chatBox > li {
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
x-white-space: pre;
|
||||
}
|
||||
|
||||
.chatBox > li:before,
|
||||
@@ -160,8 +262,3 @@ html, body {
|
||||
.chatBox-body > p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
+31
-18
@@ -15,7 +15,7 @@
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mountPoint" class="fullScreen"></div>
|
||||
<div id="mountPoint"></div>
|
||||
<script type="text/babel">
|
||||
function shortDateFormat(then) {
|
||||
var now = new Date();
|
||||
@@ -144,13 +144,19 @@ eleifend fringilla urna euismod tristique. Nullam at magna vel mauris rutrum fin
|
||||
Nulla vitae est aliquam, egestas nunc dapibus, dapibus risus.\
|
||||
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
|
||||
Nullam vitae condimentum lectus, quis maximus elit.\
|
||||
<br />\
|
||||
\
|
||||
Nunc ac nisi risus. Integer eget augue vel risus commodo blandit. Nulla faucibus convallis neque sed eleifend. Vestibulum\
|
||||
dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac habitasse platea dictumst.",
|
||||
timestamp: new Date(2016, 0, 1, 2, 3, 4, 567),
|
||||
response: true
|
||||
},
|
||||
{id: 3, content: "OK!", timestamp: new Date(2016, 0, 2, 15, 16, 17, 567), response: false}
|
||||
{id: 3, content: "Ooga chaka ooga ooga!", timestamp: new Date(2016, 0, 2, 16, 17, 18, 567), response: false},
|
||||
{id: 4, content: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
|
||||
Nullam vitae condimentum lectus, quis maximus elit.", timestamp: new Date(2016, 0, 3, 1, 2, 3, 567), response: true},
|
||||
{id: 5, content: "Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis.",
|
||||
timestamp: new Date(2016, 0, 3, 4, 5, 6, 567), response: true},
|
||||
{id: 6, content: "No way.", timestamp: new Date(2016, 0, 3, 15, 16, 17, 567), response: false},
|
||||
{id: 7, content: "OK!", timestamp: new Date(2016, 0, 3, 18, 19, 20, 567), response: true}
|
||||
];
|
||||
|
||||
var Contact = React.createClass({
|
||||
@@ -320,27 +326,34 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div className="container-fluid fullScreen">
|
||||
<div className="row fullScreen">
|
||||
<div className="menuContainer">
|
||||
<div className="fullScreen">
|
||||
|
||||
<div id="sidebar-wrapper">
|
||||
<div className="sidebar-nav">
|
||||
{this.state.loggedIn ? <ContactsView data={contactsData} /> : <LoginView onLogin={this.handleLogin} />}
|
||||
</div>
|
||||
<div className="col-md-12 messagesContainer">
|
||||
<div className="row fullScreen">
|
||||
<div className="panel panel-default fullScreen">
|
||||
<div className="panel-heading">
|
||||
<h3 className="panel-title">{this.state.chatTitle}</h3>
|
||||
</div>
|
||||
|
||||
<div id="page-content-wrapper">
|
||||
<div className="container-fluid fullHeight">
|
||||
<div className="row fullHeight">
|
||||
<div className="col-lg-12 fullHeight">
|
||||
<div className="panel panel-default fullViewPort" id="messagesPanel">
|
||||
<div className="panel-heading" id="chatTitle">
|
||||
<h3 className="panel-title">{this.state.chatTitle}</h3>
|
||||
</div>
|
||||
<div className="panel-body" id="messagesView">
|
||||
<MessagesView />
|
||||
</div>
|
||||
<div className="panel-footer" id="sendMessagePanel">
|
||||
<Message.Send />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<MessagesView />
|
||||
</div>
|
||||
<div className="panel-footer">
|
||||
<Message.Send />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user