added responsive design to module

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode

client/components/App.jsx

@@ -110,7 +110,7 @@ class App extends React.Component {
     return (
       <div>
         <div id="search">
-          <div className="container">
+          <div className="container d-none d-sm-block"> {/* hidden on xs screen */}
             <Search
               name={this.state.hostel.name}
               location_id={this.state.hostel.location_id}
@@ -128,7 +128,7 @@ class App extends React.Component {
                 <Review highlight={this.state.highlight} />
               }
               <div className="col-md-9">
-                <h4>Property Description</h4>
+                <h4 className="d-none d-sm-block">Property Description</h4> {/* hidden on xs screen */}
                 <p>{this.state.hostel.description}</p>
               </div>
             </div>

client/components/Nav.jsx

@@ -1,21 +1,38 @@
 import React from 'react';
 
-const Nav = () => (
-  <section id="navbar" className="container">
+const Nav = () => [
+  <section id="navbar" className="container d-none d-sm-block"> {/* only visible on large screen */}
     <ul className="nav">
       <li className="nav-item">
         <a className="nav-link active" href="#">
           Overview
         </a>
       </li>
       <li className="nav-item">
-        <a className="nav-link" href="#">Prices</a>
+        <a className="nav-link" href="#">
+          Prices
+        </a>
       </li>
       <li className="nav-item">
-        <a className="nav-link" href="#">Reviews</a>
+        <a className="nav-link" href="#">
+          Reviews
+        </a>
       </li>
     </ul>
-  </section>
-);
+  </section>,
+  <div className="container navbar-mobile px-0 d-block d-sm-none"> {/* hidden on large screen */}
+    <div className="row navbar-mobile_row my-0">
+      <div className="col-4 py-3 px-0">
+        <i className="far fa-calendar" />&nbsp;PRICES
+      </div>
+      <div className="col-4 py-3 px-0">
+        <i className="fas fa-map-marker-alt" />&nbsp;MAP
+      </div>
+      <div className="col-4 py-3 px-0">
+        <i className="fas fa-comment" />&nbsp;REVIEWS
+      </div>
+    </div>
+  </div>
+];
 
 export default Nav;

client/components/Photos.jsx

@@ -8,7 +8,7 @@ const Photos = (props) => {
   };
 
   return (
-    <section id="photo-gallery" className="container">
+    <section id="photo-gallery" className="container d-none d-sm-block">
       <div className="row no-gutters gallery">
         {
           props.urls.map((url, i) => (

client/components/Review.jsx

@@ -28,10 +28,10 @@ const getIconClassName = (feature) => {
 const Review = props => (
   <div className="col-md-3">
     <div className="row rating-summary">
-      <div className="col-md-1 score">
+      <div className="btn score">
         {props.highlight.rating}
       </div>
-      <div className="col-md-9 info">
+      <div className="info ml-3">
         <p className="keyword">{props.highlight.keyword}</p>
         <a className="counter" href="#">
           <i className="far fa-comment" />
@@ -55,7 +55,8 @@ const Review = props => (
         ))
       }
     </ul>
-    <button type="button" className="btn btn-link">Read all reviews</button>
+    {/* hidden on xs screen */}
+    <button type="button" className="btn btn-link d-none d-sm-block">Read all reviews</button>
   </div>
 );
 

database/index.js

@@ -1,6 +1,6 @@
 const mongoose = require('mongoose');
 
-mongoose.connect('mongodb://mongo/ruinn');
+mongoose.connect('mongodb://admin:pass1234@ds163650.mlab.com:63650/ruinn-overview');
 
 const hostelSchema = mongoose.Schema({
   id: Number,

docker-compose.debug.yml

@@ -0,0 +1,13 @@
+version: '2.1'
+
+services:
+  overview:
+    image: overview
+    build: .
+    environment:
+      NODE_ENV: development
+    ports:
+      - 3002:3002
+      - 9229:9229
+    ## set your startup file here
+    command: node --inspect index.js

public/style.scss

@@ -1,5 +1,5 @@
 #Overview {
-  
+
   h2 {
     font-family: "Noto", Helvetica, Arial, sans-serif;
     font-size: 1.2rem;
@@ -26,7 +26,7 @@
     font-family: "Noto", Helvetica, Arial, sans-serif;
     background-color: #313131;
   }
-  
+
   label {
     color: #ccc;
     font-weight: 700;
@@ -52,7 +52,7 @@
   .nav-item {
     padding-right: 1rem;
     margin-right: 1rem;
-    border-right: 1px solid #e4e4e4; 
+    border-right: 1px solid #e4e4e4;
   }
 
   .nav-link {
@@ -63,6 +63,17 @@
     color: #444;
   }
 
+  .navbar-mobile {
+    font-size: 11.2px;
+    text-align: center;
+    .navbar-mobile_row {
+      div:nth-child(2) {
+        border-left: 2px #F8F8F8 solid !important;
+        border-right: 2px #F8F8F8 solid !important;
+      }
+    }
+  }
+
   a.nav-link.active {
     border-bottom: 3px solid #444;
   }