pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

making contacts scrollable

Browse Source
This commit is contained in:
or-else
2016-01-10 19:33:19 -08:00
parent 3f2746cdb7
commit 6d0d75ab1d
2 changed files with 61 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+49 -48
View File
@@ -11,77 +11,76 @@ html, body {
width:100%; width:100%;
} }
/* Top-level layout style: sidebar + main view */ /* Top-level layout style: sidepanel + main view */
#mountPoint { #mountPoint {
padding-left: 0; padding-left: 0;
transition: all 0.5s ease; transition: all 0.5s ease;
height: 100%; height: 100%;
} }
#mountPoint.toggled { #mountPoint.toggled {
padding-left: 30em; padding-left: 30em;
} }
#sidebar-wrapper { #sidepanel-wrapper {
position: fixed; position: fixed;
left: 30em; left: 30em;
width: 0; width: 0;
height: 100%; height: 100vh;
margin-left: -30em; margin-left: -30em;
overflow-y: auto; transition: all 0.5s ease;
transition: all 0.5s ease;
} }
#mountPoint.toggled #sidebar-wrapper { #mountPoint.toggled #sidepanel-wrapper {
width: 30em; width: 30em;
} }
#page-content-wrapper { #page-content-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
background-color: #CCF
} }
#mountPoint.toggled #page-content-wrapper { #mountPoint.toggled #page-content-wrapper {
position: absolute; position: absolute;
margin-right: -30em; margin-right: -30em;
} }
.sidebar-nav { .sidepanel-nav {
position: absolute; position: absolute;
top: 0; top: 0;
width: 30em; width: 30em;
margin: 0; margin: 0;
padding: 0; padding: 0;
x-height: 100%;
} }
@media(min-width:768px) { @media(min-width:768px) {
#mountPoint { #mountPoint {
padding-left: 30em; padding-left: 30em;
} }
#mountPoint.toggled { #mountPoint.toggled {
padding-left: 0; padding-left: 0;
} }
#sidebar-wrapper { #sidepanel-wrapper {
width: 30em; width: 30em;
} }
#mountPoint.toggled #sidebar-wrapper { #mountPoint.toggled #sidepanel-wrapper {
width: 0; width: 0;
} }
#page-content-wrapper { #page-content-wrapper {
position: relative; position: relative;
height: 100%; height: 100%;
} }
#mountPoint.toggled #page-content-wrapper { #mountPoint.toggled #page-content-wrapper {
position: relative; position: relative;
margin-right: 0; margin-right: 0;
} }
} }
/* END of top-level layout */ /* END of top-level layout */
@@ -122,6 +121,8 @@ html, body {
.contactList { .contactList {
padding: 0.5em; padding: 0.5em;
height: 85vh;
overflow-y: scroll;
} }
.contactList li { .contactList li {
@@ -154,7 +155,7 @@ html, body {
} }
.fullViewPort { .fullViewPort {
height: 98vh; height: 99vh;
overflow-y: hidden; overflow-y: hidden;
} }
index.html
+12 -12
View File
@@ -258,7 +258,7 @@
default:; default:;
}; };
return ( return (
<div className="sidebar-nav"> <div className="sidepanel-nav">
<SideNavbar state={this.props.state} <SideNavbar state={this.props.state}
title={title} avatar={avatar} title={title} avatar={avatar}
onSignUp={this.props.onSignUp} onSignUp={this.props.onSignUp}
@@ -315,15 +315,15 @@
}); });
var contactsData = [ var contactsData = [
{id: "usrBOB", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0}, {topic: "usrBOB", public: "Bob Smith", private: "This is another comment", online: {now: true}, unread: 0},
{id: "usrCAROL", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2}, {topic: "usrCAROL", public: "Carol Xmas", private: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
{id: "usrDAVE", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}, {topic: "usrDAVE", public: "Dave Goliaphsson", private: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0},
{id: "usrBOB2", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0}, {topic: "usrBOB2", public: "Bob Smith", private: "This is another comment", online: {now: true}, unread: 0},
{id: "usrCAROL2", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2}, {topic: "usrCAROL2", public: "Carol Xmas", private: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
{id: "usrDAVE2", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}, {topic: "usrDAVE2", public: "Dave Goliaphsson", private: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0},
{id: "usrBOB3", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0}, {topic: "usrBOB3", public: "Bob Smith", private: "This is another comment", online: {now: true}, unread: 0},
{id: "usrCAROL3", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2}, {topic: "usrCAROL3", public: "Carol Xmas", private: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
{id: "usrDAVE3", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0} {topic: "usrDAVE3", public: "Dave Goliaphsson", private: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}
]; ];
/* A single topic */ /* A single topic */
@@ -405,7 +405,7 @@
} }
}); });
/* The panel to hold all contacts-related stuff together */ /* The panel holds all contacts-related stuff */
var ContactsView = React.createClass({ var ContactsView = React.createClass({
render: function() { render: function() {
return ( return (
@@ -624,7 +624,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
return ( return (
<div className="fullScreen"> <div className="fullScreen">
<div id="sidebar-wrapper"> <div id="sidepanel-wrapper">
<SidepanelView <SidepanelView
state={this.state.sidePanel} state={this.state.sidePanel}
title={this.state.sideTitle} title={this.state.sideTitle}