Styling side bar #77

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

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -64,7 +64,7 @@ export default class OpenStreetMap extends Component {
 
     render() {
         return (
-                <Map className={"col m6 l9 hide-on-small-only"} center={[this.state.lat, this.state.lng]} zoom={this.state.zoom}>
+                <Map className={"col m6 l8 hide-on-small-only"} center={[this.state.lat, this.state.lng]} zoom={this.state.zoom}>
                     <TileLayer
                         attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -38,19 +38,18 @@ export default class Sidebar extends React.Component {
 
     render() {
         let searchTitle = (this.BuildingStore.getSearchKey === "")
-            ? "Results (" + this.BuildingStore.getFilteredBuildings.length + ")"
+            ? this.BuildingStore.getFilteredBuildings.length + " results "
             : "Results for '" + this.BuildingStore.getSearchKey + "' (" + this.renderLists().length + ")";
         return (
 
-                <Col l={3} m={6} s={12}>
-                    <div className="sidebar">
-
+            <Col l={4} m={6} s={12}>
+                <div className="sidebar">
                     {this.show()}
-                    </div>
-                    <div className="result">
-                        <h4 className="result__text">{searchTitle}</h4>
-                    </div>
-                </Col>
+                </div>
+                <div className="result">
+                    <h4 className="result__text">{searchTitle}</h4>
+                </div>
+            </Col>
 
         )
     }

diff --git a/src/components/SidebarSearchResult.jsx b/src/components/SidebarSearchResult.jsx
@@ -44,12 +44,12 @@ export default class SidebarSearchResult extends React.Component {
 
                         <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>
-
+                    <img className="col m3 s12 sidebar__searchresult__thumbnail" src={this.Building.src}/>
                     <Col m={9} s={12}>
                         {/* {this.showAccessibilityInformation()} */}
                     </Col>

diff --git a/src/css/Sidebar.scss b/src/css/Sidebar.scss
@@ -1,12 +1,17 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 
+
+.row.application__content > .col:first-of-type{
+    height: 100%;
+}
+
 div.sidebar {
     height: 100%;
     margin: 0;
     float: left;
     background-color: #fff;
-    overflow: scroll;
+    overflow: auto;
 }
 
 div.sidebar__card {
@@ -17,9 +22,9 @@ div.sidebar__card {
 .result{
     position: absolute;
     bottom: 0;
-    height:5%;
+    left:0;
     width:100%;
-    background:$colorAlmostWhite;
+    border-top: 1px solid rgba(164, 164, 164, 0.21);;
     clear:both;
     padding: 0;
 
@@ -28,5 +33,6 @@ div.sidebar__card {
 .result__text {
     font-size: 10px;
     font-family: 'Open Sans', sans-serif;
+    margin-left: 10px;
 
 }
diff --git a/src/css/SidebarBuildingDetail.scss b/src/css/SidebarBuildingDetail.scss
@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+.search__filters__filter__caption{
+  font-family: 'Montserrat', sans-serif;
+
+}
+
+h4{
+  font-family: 'Montserrat', sans-serif;
+
+}
diff --git a/src/css/SidebarSearchResult.scss b/src/css/SidebarSearchResult.scss
@@ -13,4 +13,8 @@
 
 hr {
   border-color: rgba(164, 164, 164, 0.21);
+}
+
+.sidebar__searchresult__thumbnail{
+  float: right;
 }