Changeset dbd4834 for phonelux-frontend/src/components/GroupedFiltersComponent

Timestamp:

09/07/22 00:49:45 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

f25d07e

Parents:

dfd5d87

Message:

Homepage, login and register components added

Location:

phonelux-frontend/src/components/GroupedFiltersComponent

Files:

• GroupedFiltersComponent.css (modified) (1 diff)
• GroupedFiltersComponent.js (modified) (1 diff)

phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css

@@ -1 @@
-#filtersDiv{
-    background-color: #91AD7E;
+.grouped-filters-component{
+    background-color: #a6c9ab;
     display: flex;
-}
-
-/* #filtersDiv > div{
-    margin-left: 30px;
-} */
-
-
-#filtersDiv > div{
-    margin-left: 30px;
-}
-
-#filtersDiv > div:nth-of-type(4){
-    margin-top: 15px;
-    margin-left: 200px;
+    padding: 20px;
 }
 

phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js

@@ -8 +8 @@
 import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent"
 import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent';
+import { Grid } from '@mui/material';
+import SortByComponent from '../FiltersComponents/SortByComponent';
 
 export default class GroupedFiltersComponent extends Component {
+
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      
+    }
+  }
+  
+
+  componentDidMount(){
+  
+  }
+
   render() {
     return (
-      <div id="filtersDiv">
-       <FilterSelectComponent/>
-       <FilterSelectComponent/>
-       <FilterPriceComponent/>
-       <SearchFieldComponent/>
+      <>
+      <div className="grouped-filters-component">
+        <Grid container spacing={5}>
+
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <FilterSelectComponent changeHandler={this.props.passFilters} type='shops'/>
+          </Grid>
+
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <FilterSelectComponent changeHandler={this.props.passFilters} type='brands'/>
+          </Grid>
+
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <FilterPriceComponent changeHandler={this.props.passFilters}/>
+          </Grid> 
+       
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <SearchFieldComponent changeHandler={this.props.passFilters} />
+          </Grid>
+       </Grid>
       </div>
+      <SortByComponent changeHandler={this.props.passFilters}/>
+      </>
     )
   }
+
 }