Responsive design fixes and initial home load bug fix

client/app/static/app.jsx

@@ -23,7 +23,7 @@ class App extends React.Component {
     var that = this;
     return(
       <div>
-      <nav className="navbar container">
+      <nav className="navbar container navbar-default">
         <div className="container-fluid">
           {(localStorage.getItem('userToken')) ?
           <div className="navbar-header">

client/app/static/browse_articles.jsx

@@ -8,6 +8,33 @@ class BrowseArticles extends React.Component {
     this.state = {error: "", articles: [], url: "/api/articles"};
   }
 
+  componentDidMount() {
+    console.log("Component Mounted!");
+    var myHeaders = new Headers({
+        "Content-Type": "application/x-www-form-urlencoded",
+        "x-access-token": localStorage.getItem('userToken')
+    });
+    var myInit = { method: 'GET',
+               headers: myHeaders,
+               };
+    var that = this;
+    var url = '/api/articles';
+    console.log(url);
+    fetch(url,myInit)
+    .then(function(response) {
+      console.log(response);
+      return response.json();
+    })
+    .then(function(response) {
+      if(response.error.error)
+        that.setState({error: response.error.message})
+      else {
+        that.setState({articles: response.data})
+        console.log(that.state.articles);
+      }
+      console.log(response);
+    });
+  }
 
   componentWillReceiveProps(nextProps) {
     console.log('PREV PROPS');

client/app/static/browse_topics.jsx

@@ -50,10 +50,18 @@ class BrowseTopics extends React.Component {
       return <Loader />;
     }
     else {
-      return(<div>
-        <div className="list-group">
+      return(
+        <div className="custom-collapse">
+          <div className="visible-xs">
+        <button className="collapse-toggle btn btn-default" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
+          View Topics
+         </button>
+        <br/>
+        <br/>
+        </div>
+        <div className="list-group collapse" id="side-menu-collapse">
             {this.state.topics.map(topic => (
-              <a key={topic.id} href="#" className="list-group-item" onClick={(e) => this.topicSelect(topic.id,e)}>
+              <a key={topic.id} href="#" className="list-group-item dropdown-toggle" onClick={(e) => this.topicSelect(topic.id,e)}>
                 <h4 className="list-group-item-heading">{topic.name}</h4>
                 <p className="list-group-item-text">{topic.description}</p>
               </a>

client/assets/bootstrap.css

@@ -1568,7 +1568,7 @@ pre {
   word-break: break-all;
   word-wrap: break-word;
   background-color: #f5f5f5;
-  border: 1px solid #a0a0a0;
+  border: 1px solid #ccc;
 }
 pre code {
   padding: 0;
@@ -2557,7 +2557,7 @@ output {
   color: #4d4d4d;
   background-color: #fff;
   background-image: none;
-  border: 1px solid #a0a0a0;
+  border: 1px solid #ccc;
 }
 .form-control:focus {
   border-color: #a0a0a0;
@@ -3513,7 +3513,7 @@ tbody.collapse.in {
   background-color: #fff;
   -webkit-background-clip: padding-box;
           background-clip: padding-box;
-  border: 1px solid #a0a0a0;
+  border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, .15);
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
           box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
@@ -3880,7 +3880,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   color: #555;
   text-align: center;
   background-color: #eee;
-  border: 1px solid #a0a0a0;
+  border: 1px solid #ccc;
 }
 .input-group-addon.input-sm {
   padding: 5px 10px;
@@ -4460,8 +4460,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default {
-  background-color: #f8f8f8;
-  border-color: #e7e7e7;
+  
 }
 .navbar-default .navbar-brand {
   color: #777;
@@ -6080,7 +6079,7 @@ button.close {
   background-color: #fff;
   -webkit-background-clip: padding-box;
           background-clip: padding-box;
-  border: 1px solid #a0a0a0;
+  border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 6px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

client/assets/style.css

@@ -270,3 +270,10 @@ textarea {
 .list-group-item-heading {
   font-weight: 700;
 }
+
+@media screen and (min-width: 768px) {
+
+.custom-collapse .collapse{
+  			display:block;
+      }
+}