#88 edit filters, and clean what doesn't work

oSoc18 · Aug 20, 2018 · 6230e29 · 6230e29
1 parent 8b1545f
commit 6230e29
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 30 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react'
-import {Col, Input, Row} from "react-materialize";
+import {Col, Input, Row, Modal, Button} from "react-materialize";
 import {SearchFilterContainer} from "./SearchFilterContainer";
 import {inject, observer} from 'mobx-react';
 
@@ -57,9 +57,7 @@ export default class Header extends Component {
      * @type {*[]}
      */
     filters = [
-        {name: 'Categorie', content: this.typeOfBuildingFilter},
-        {name: 'Breedte rolstoel', content: this.wheelchairWidthFilter},
-        {name: 'Faciliteiten', content: this.facilitiesFilter},
+        {name: 'Breedte rolstoel', content: this.wheelchairWidthFilter}
     ];
 
 
@@ -117,6 +115,11 @@ export default class Header extends Component {
         this.BuildingStore.setSearchKey(document.getElementById('search').value);
     }
 
+    resetFilters = (e) => {
+        this.renderFilters();
+    }
+
+
     render() {
         return (
             <nav className="header">
@@ -128,6 +131,12 @@ export default class Header extends Component {
                             <h1 className="brand__name">Access Flanders</h1>
                         </div>
                     </Col>
+                    <Modal
+                        header='Als jij rolstoelgebruiker bent'
+                        trigger={<Button className="button">DEMO</Button>}>
+                        <p>
+                            vul alstublieft de breedte van uw rolstoel in.</p><p> We toon enkel bereikbare locaties voor jou op de kaart.</p>
+                    </Modal>
                     <Col s={1} className="right">
                         <a href="https://github.com/oSoc18/OASIS" target="_blank">
                             <img alt="github icon" title="github" className="social__media__icon"
@@ -150,6 +159,10 @@ export default class Header extends Component {
                     <Col s={8}>
                         <div className="search__filters">
                             {this.renderFilters()}
+                            <label>
+                                <i className="material-icons">search</i>
+                            </label>
+                            <Button className="resetFiltersButton" onClick={this.resetFilters}>close</Button>
                         </div>
                     </Col>
                 </Row>

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -27,7 +27,7 @@ export default class OpenStreetMap extends Component {
                 this.setState({
                     lat: position.coords.latitude,
                     lng: position.coords.longitude,
-                    zoom: 16
+                    zoom: 10
                 });
             });
     }

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -17,7 +17,9 @@ export default class Sidebar extends React.Component {
     renderLists = () => {
         let result = [];
         for (let i = 0; i < this.BuildingStore.getFilteredBuildings.length; i++) {
-            result.push(<SearchResult buildings={this.BuildingStore.getFilteredBuildings[i]} key={++this.UID}/>);
+            if(this.BuildingStore.getFilteredBuildings[i].lat==this.BuildingStore.getFilteredBuildings[i].lat){
+                result.push(<SearchResult buildings={this.BuildingStore.getFilteredBuildings[i]} key={++this.UID}/>);
+            }
         }
         return result;
     };

diff --git a/src/css/Header.scss b/src/css/Header.scss
@@ -60,6 +60,7 @@ $filterBarBackground: white;
 .header .search {
   background-color: $colorPrimaryLight;
   padding: 0 !important;
+  z-index:10000;
 
   ::placeholder {
     color: $colorPrimaryDark;
@@ -95,12 +96,15 @@ $filterBarBackground: white;
 
   /* Search filters with a modal dropdown*/
   .search__filters__filter.search__filters__filter--modal {
+    border-radius: 8px;
     position: relative;
     height: $headerBarRowHeight;
-    width: auto;
+    width: 300px;
     cursor: pointer;
     display: inline-block;
     vertical-align: top;
+    background-color: white;
+    z-index: 10000;
 
     .search__filters__filter__caption {
       height: $headerBarRowHeight;
@@ -117,43 +121,43 @@ $filterBarBackground: white;
         font-size: 20px;
         border-radius: 4px;
         color: $filterBarForeground;
-        border: 1px solid $filterBarForeground;
-      }
-
-      &.search__filters__filter__caption--active a {
-        background-color: $filterBarActiveBackground;
-        color: $filterBarBackground;
-        border: 1px solid $filterBarForeground;
+        border: 0px solid $filterBarForeground;
       }
 
     }
 
     .search__filters__filter__detail {
-      background-color: white;
-      border-radius: 4px;
-      width: 100%;
-      min-height: 25px;
+      border-radius: 8px;
+      width: auto;
+      height: $headerBarRowHeight;
       position: absolute;
-      left: 0;
+      left: 270px;
+      top:0px;
       z-index: 10000;
       color: black;
-      padding: $headerBarPadding * 2;
-      display: none;
+      display: block;
       line-height: 18px;
-      box-shadow: rgba(0, 0, 0, 0.15) 0 14px 36px 2px !important;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .search__filters__filter__detail--visible {
-      display: block !important;
-      width: auto;
       background-color: $filterBarBackground;
-      box-shadow: rgba(0, 0, 0, 0.15) 0 14px 36px 2px !important;
-      border: 1px solid rgba($filterBarForeground, 0.2);
+      box-shadow: rgba(0, 0, 0, 0) 0 0px 0px 0px !important;
+      border: 0px solid rgba($filterBarForeground, 0.2);
     }
 
     #wheelslider {
       width: 240px;
     }
   }
+}
+.button{
+  position: absolute;
+  top: 4px;
+  box-shadow: 8px 8px 20px rgba(250, 250, 250,0.5) !important;
+  height: $headerBarRowHeight - 8px !important;
+}
+.modal{
+  top: 20% !important;
+
+}
+
+.resetFiltersButton{
+  position: absolute;
 }