Styling side bar #77

oSoc18 · Jul 24, 2018 · 6740dbd · 6740dbd
1 parent 8401f1b
commit 6740dbd
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 29 deletions.
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import SearchResult from "./SidebarSearchResult.jsx";
-import {Card, Col} from "react-materialize";
+import {Card, Col, Pagination} from "react-materialize";
 import BuildingDetail from './SidebarBuildingDetail.jsx';
 import {inject, observer} from 'mobx-react';
 
@@ -41,10 +41,17 @@ export default class Sidebar extends React.Component {
             ? "Results (" + this.BuildingStore.getFilteredBuildings.length + ")"
             : "Results for '" + this.BuildingStore.getSearchKey + "' (" + this.renderLists().length + ")";
         return (
-            <Col l={3} m={6} s={12} className="sidebar">
-                <h4>{searchTitle}</h4>
-                {this.show()}
-            </Col>
+
+                <Col l={3} m={6} s={12}>
+                    <div className="sidebar">
+
+                    {this.show()}
+                    </div>
+                    <div className="result">
+                        <h4 className="result__text">{searchTitle}</h4>
+                    </div>
+                </Col>
+
         )
     }
 }
diff --git a/src/components/SidebarSearchResult.jsx b/src/components/SidebarSearchResult.jsx
@@ -6,14 +6,14 @@ import {inject, observer} from 'mobx-react';
 @inject('BuildingStore')
 @observer
 export default class SidebarSearchResult extends React.Component {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.handleClick = this.handleClick.bind(this);
         this.BuildingStore = this.props.BuildingStore;
         this.Building = this.props.buildings.props;
     }
 
-    handleClick(e){
+    handleClick(e) {
         e.preventDefault();
         let id = this.Building.id;
         let building = this.BuildingStore.getBuildings.find(b => b.props.id === id);
@@ -23,37 +23,41 @@ export default class SidebarSearchResult extends React.Component {
     }
 
     showAccessibilityInformation = () => {
-        try{
+        try {
             <div>
-                <p><i className="material-icons">wheelchair</i> {this.Building.door.description}: {this.Building.door.width} cm</p>
+                <p><i
+                    className="material-icons">wheelchair</i> {this.Building.door.description}: {this.Building.door.width} cm
+                </p>
                 <i className="material-icons">hearing</i>
                 <i className="material-icons">accessibility</i>
             </div>
-        }catch(e){
+        } catch (e) {
             console.log(e);
         }
     }
 
     render() {
         return (
-            <Card>
-            <Row>
-                <Col m={12} s={12}>
-                    <hr />
-                    <h4>{this.Building.title}</h4>
-                </Col>
-
-                <img className="col m3 s12 sidebar__searchresult__thumbnail" src={this.Building.src}/>
-
-                <Col m={9} s={12}>
-                    <span className="sidebar__searchresult__description"><p>{this.Building.description}</p></span>
-                </Col>
-                <Col m={9} s={12}>
-                    {/* {this.showAccessibilityInformation()} */}
-                </Col>
-                <a className="col m12 s12 center" href="#" onClick={this.handleClick} id={this.Building.id}>Meer details...</a>
-            </Row>
-            </Card>
+            <div className="buildings__card">
+                <Row>
+                    <Col m={12} s={12}>
+
+                        <h4 className="building__name">{this.Building.title}</h4>
+                    </Col>
+                    <img className="col m3 s12 sidebar__searchresult__thumbnail" src={this.Building.src}/>
+
+                    <Col m={9} s={12}>
+                        <span className="sidebar__searchresult__description"><p>{this.Building.description}</p></span>
+                    </Col>
+
+                    <Col m={9} s={12}>
+                        {/* {this.showAccessibilityInformation()} */}
+                    </Col>
+                    <a className="col m12 s12 center" href="#" onClick={this.handleClick} id={this.Building.id}>Meer
+                        details...</a>
+                </Row>
+                <hr/>
+            </div>
         )
     }
 }
diff --git a/src/css/App.scss b/src/css/App.scss
@@ -2,6 +2,7 @@
 $colorPrimary: #27b59f;
 $colorPrimaryLight: lighten($colorPrimary,20%);
 $colorPrimaryDark: #026863;
+$colorAlmostWhite: #d6f2ec;
 
 $textColor: #333;
 $textColorOnPrimary: $colorPrimaryDark;
@@ -19,5 +20,5 @@ html, body, div#root, div.application {
 
 div.application__content {
     position: relative;
-    height: calc(100% - 64px);
+    height: calc(100% - 112px);
 }
diff --git a/src/css/Sidebar.scss b/src/css/Sidebar.scss
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
 div.sidebar {
     height: 100%;
     margin: 0;
@@ -9,4 +12,21 @@ div.sidebar {
 div.sidebar__card {
 
     height: 100%;
+}
+
+.result{
+    position: absolute;
+    bottom: 0;
+    height:5%;
+    width:100%;
+    background:$colorAlmostWhite;
+    clear:both;
+    padding: 0;
+
+}
+
+.result__text {
+    font-size: 10px;
+    font-family: 'Open Sans', sans-serif;
+
 }
diff --git a/src/css/SidebarSearchResult.scss b/src/css/SidebarSearchResult.scss
@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+.building__name {
+  font-family: 'Montserrat', sans-serif;
+}
+
+.center {
+  font-family: 'Open Sans', sans-serif;
+  color: $colorPrimary;
+  text-align: left !important;
+}
+
+hr {
+  border-color: rgba(164, 164, 164, 0.21);
+}