Changeset dbd4834


Ignore:
Timestamp:
09/07/22 00:49:45 (21 months ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
f25d07e
Parents:
dfd5d87
Message:

Homepage, login and register components added

Location:
phonelux-frontend
Files:
23 added
1 deleted
13 edited
1 moved

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/package-lock.json

    rdfd5d87 rdbd4834  
    1111        "@emotion/react": "^11.10.0",
    1212        "@emotion/styled": "^11.10.0",
     13        "@fortawesome/fontawesome-svg-core": "^6.2.0",
     14        "@fortawesome/free-regular-svg-icons": "^6.2.0",
     15        "@fortawesome/free-solid-svg-icons": "^6.2.0",
     16        "@fortawesome/react-fontawesome": "^0.2.0",
    1317        "@mui/icons-material": "^5.10.2",
    1418        "@mui/material": "^5.10.2",
    … …  
    1620        "@testing-library/react": "^13.3.0",
    1721        "@testing-library/user-event": "^13.5.0",
     22        "axios": "^0.27.2",
    1823        "react": "^18.2.0",
    1924        "react-dom": "^18.2.0",
    … …  
    23762381      }
    23772382    },
     2383    "node_modules/@fortawesome/fontawesome-common-types": {
     2384      "version": "6.2.0",
     2385      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
     2386      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
     2387      "hasInstallScript": true,
     2388      "engines": {
     2389        "node": ">=6"
     2390      }
     2391    },
     2392    "node_modules/@fortawesome/fontawesome-svg-core": {
     2393      "version": "6.2.0",
     2394      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
     2395      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
     2396      "hasInstallScript": true,
     2397      "dependencies": {
     2398        "@fortawesome/fontawesome-common-types": "6.2.0"
     2399      },
     2400      "engines": {
     2401        "node": ">=6"
     2402      }
     2403    },
     2404    "node_modules/@fortawesome/free-regular-svg-icons": {
     2405      "version": "6.2.0",
     2406      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.0.tgz",
     2407      "integrity": "sha512-M1dG+PAmkYMTL9BSUHFXY5oaHwBYfHCPhbJ8qj8JELsc9XCrUJ6eEHWip4q0tE+h9C0DVyFkwIM9t7QYyCpprQ==",
     2408      "hasInstallScript": true,
     2409      "dependencies": {
     2410        "@fortawesome/fontawesome-common-types": "6.2.0"
     2411      },
     2412      "engines": {
     2413        "node": ">=6"
     2414      }
     2415    },
     2416    "node_modules/@fortawesome/free-solid-svg-icons": {
     2417      "version": "6.2.0",
     2418      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
     2419      "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
     2420      "hasInstallScript": true,
     2421      "dependencies": {
     2422        "@fortawesome/fontawesome-common-types": "6.2.0"
     2423      },
     2424      "engines": {
     2425        "node": ">=6"
     2426      }
     2427    },
     2428    "node_modules/@fortawesome/react-fontawesome": {
     2429      "version": "0.2.0",
     2430      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
     2431      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
     2432      "dependencies": {
     2433        "prop-types": "^15.8.1"
     2434      },
     2435      "peerDependencies": {
     2436        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
     2437        "react": ">=16.3"
     2438      }
     2439    },
    23782440    "node_modules/@humanwhocodes/config-array": {
    23792441      "version": "0.10.4",
    … …  
    53635425      "engines": {
    53645426        "node": ">=4"
     5427      }
     5428    },
     5429    "node_modules/axios": {
     5430      "version": "0.27.2",
     5431      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
     5432      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
     5433      "dependencies": {
     5434        "follow-redirects": "^1.14.9",
     5435        "form-data": "^4.0.0"
     5436      }
     5437    },
     5438    "node_modules/axios/node_modules/form-data": {
     5439      "version": "4.0.0",
     5440      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
     5441      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
     5442      "dependencies": {
     5443        "asynckit": "^0.4.0",
     5444        "combined-stream": "^1.0.8",
     5445        "mime-types": "^2.1.12"
     5446      },
     5447      "engines": {
     5448        "node": ">= 6"
    53655449      }
    53665450    },
    … …  
    1886518949      }
    1886618950    },
     18951    "@fortawesome/fontawesome-common-types": {
     18952      "version": "6.2.0",
     18953      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
     18954      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
     18955    },
     18956    "@fortawesome/fontawesome-svg-core": {
     18957      "version": "6.2.0",
     18958      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
     18959      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
     18960      "requires": {
     18961        "@fortawesome/fontawesome-common-types": "6.2.0"
     18962      }
     18963    },
     18964    "@fortawesome/free-regular-svg-icons": {
     18965      "version": "6.2.0",
     18966      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.0.tgz",
     18967      "integrity": "sha512-M1dG+PAmkYMTL9BSUHFXY5oaHwBYfHCPhbJ8qj8JELsc9XCrUJ6eEHWip4q0tE+h9C0DVyFkwIM9t7QYyCpprQ==",
     18968      "requires": {
     18969        "@fortawesome/fontawesome-common-types": "6.2.0"
     18970      }
     18971    },
     18972    "@fortawesome/free-solid-svg-icons": {
     18973      "version": "6.2.0",
     18974      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
     18975      "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
     18976      "requires": {
     18977        "@fortawesome/fontawesome-common-types": "6.2.0"
     18978      }
     18979    },
     18980    "@fortawesome/react-fontawesome": {
     18981      "version": "0.2.0",
     18982      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
     18983      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
     18984      "requires": {
     18985        "prop-types": "^15.8.1"
     18986      }
     18987    },
    1886718988    "@humanwhocodes/config-array": {
    1886818989      "version": "0.10.4",
    … …  
    2100521126      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
    2100621127      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     21128    },
     21129    "axios": {
     21130      "version": "0.27.2",
     21131      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
     21132      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
     21133      "requires": {
     21134        "follow-redirects": "^1.14.9",
     21135        "form-data": "^4.0.0"
     21136      },
     21137      "dependencies": {
     21138        "form-data": {
     21139          "version": "4.0.0",
     21140          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
     21141          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
     21142          "requires": {
     21143            "asynckit": "^0.4.0",
     21144            "combined-stream": "^1.0.8",
     21145            "mime-types": "^2.1.12"
     21146          }
     21147        }
     21148      }
    2100721149    },
    2100821150    "axobject-query": {

  • phonelux-frontend/package.json

    rdfd5d87 rdbd4834  
    66    "@emotion/react": "^11.10.0",
    77    "@emotion/styled": "^11.10.0",
     8    "@fortawesome/fontawesome-svg-core": "^6.2.0",
     9    "@fortawesome/free-regular-svg-icons": "^6.2.0",
     10    "@fortawesome/free-solid-svg-icons": "^6.2.0",
     11    "@fortawesome/react-fontawesome": "^0.2.0",
    812    "@mui/icons-material": "^5.10.2",
    913    "@mui/material": "^5.10.2",
    … …  
    1115    "@testing-library/react": "^13.3.0",
    1216    "@testing-library/user-event": "^13.5.0",
     17    "axios": "^0.27.2",
    1318    "react": "^18.2.0",
    1419    "react-dom": "^18.2.0",
    … …  
    4247  "devDependencies": {
    4348    "react-router-dom": "^6.3.0"
    44   }
     49  },
     50  "proxy": "http://localhost:8080"
    4551}

  • phonelux-frontend/src/App.js

    rdfd5d87 rdbd4834  
    33import GroupedFiltersComponent from "./components/GroupedFiltersComponent/GroupedFiltersComponent";
    44import HeaderComponent from "./components/HeaderComponent/HeaderComponent";
    5 import SearchFieldComponent from "./components/FiltersComponents/SearchFieldComponent"
    6 import FilterPriceComponent from "./components/FiltersComponents/FilterPriceComponent"
     5import InputFormComponent from "./components/LoginRegisterComponents/InputFormComponent";
     6import LoginFormComponent from "./components/LoginRegisterComponents/LoginFormComponent";
     7import RegisterFormComponent from "./components/LoginRegisterComponents/RegisterFormComponent";
     8import PaginationComponent from "./components/PaginationComponent/PaginationComponent"
     9import PhoneCardComponent from "./components/PhoneCardComponent/PhoneCardComponent";
     10import PhoneCardGridComponent from "./components/PhoneCardGridComponent/PhoneCardGridComponent";
     11import HomepageComponent from "./components/HomepageComponent"
     12import PhonePageComponent from "./components/PhonePageComponent";
     13import SortByComponent from "./components/FiltersComponents/SortByComponent";
     14import LoginPageComponent from "./components/LoginPageComponent"
     15import RegisterPageComponent from "./components/RegisterPageComponent";
    716
    817
    9 function App() {
     18
     19function App() { 
    1020  return (
    1121    <BrowserRouter>
    1222      <Routes>
    13         <Route path="/" element={<GroupedFiltersComponent/>}/>
     23        {/* { <Route path="/" element={<PhoneCardComponent
     24        image_url='https://admin.ledikom.mk/uploads/items/411/1641668143apple-iphone-13-pro-max-1-250x300-pad.jpg?v=1'
     25        model='Apple iPhone 13 Pro Max' price='75000'/>}/> } */}
     26        <Route path="/" element={<HomepageComponent/>}/>
     27        <Route path="/login" element={<LoginPageComponent/>}/>
     28        <Route path="/register" element={<RegisterPageComponent/>}/>
     29        <Route path="/phones/:phoneId" element={<PhonePageComponent/>} />
     30
    1431      </Routes>
    1532    </BrowserRouter>
     33
    1634  );
    1735}

  • phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css

    rdfd5d87 rdbd4834  
    1 #priceContainer{
     1.sliderPriceContainer{
    22    display: flex;
     3
    34}
    45
    5 #slider{
    6     margin-top: 20px;
     6#priceSlider{
     7    margin-top: 15px;
    78}
    89
    9 #box{
     10.sliderBox{
    1011    margin-left: 20px;
    1112}
    1213
    13 #priceLabel{
    14     margin-top: 23px;
     14.sliderPriceLabel{
     15    margin-top: 20px;
    1516    font-size: 17px;
    1617}

  • phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js

    rdfd5d87 rdbd4834  
    33import Slider from '@mui/material/Slider';
    44import "./FilterPriceComponent.css"
     5import axios from 'axios';
    56
    6 function valuetext(value) {
    7   return `${value}°C`;
    8 }
     7export class FilterPriceComponent extends React.Component {
    98
    10 export default function RangeSlider() {
    11   const [value, setValue] = React.useState([20, 37]);
     9  constructor(props) {
     10    super(props)
     11 
     12    this.state = {
     13      value: [1000,150000],
     14      minValue: 0,
     15      maxValue: 0
     16    }
     17  }
    1218
    13   const handleChange = (event, newValue) => {
    14     setValue(newValue);
     19  componentDidMount(){
     20
     21
     22  axios.get('/lowestPrice')
     23    .then(response => this.setState({minValue: response.data}))
     24    .catch(error => console.log(error))
     25
     26    axios.get('/highestPrice')
     27    .then(response => this.setState({
     28      maxValue: response.data,
     29    }))
     30    .catch(error => console.log(error))
     31
     32  }
     33
     34  changeValue = (event, newValue) => {
     35    this.setState({
     36      value: newValue
     37    });
    1538  };
    1639
    17   return (
    18     <div id="priceContainer">
    19       <label id="priceLabel">Цена:</label>
    20     <Box id="box" sx={{ width: 350 }}>
     40  handleChange = () => {
     41    this.props.changeHandler({priceRange: this.state.value.join('-')})
     42  }
     43
     44
     45  render() {
     46    return (
     47      <div className="sliderPriceContainer">
     48      <label className="sliderPriceLabel">Цена:</label>
     49    <Box className="sliderBox" sx={{ width: 280 }}>
    2150      <Slider
    22       id="slider"
     51      id="priceSlider"
    2352        getAriaLabel={() => 'Price range'}
    24         value={value}
    25         onChange={handleChange}
     53        value={this.state.value}
     54        onChange={this.changeValue}
     55        onChangeCommitted={this.handleChange}
    2656        valueLabelDisplay="auto"
    27         getAriaValueText={valuetext}
     57        min={this.state.minValue}
     58        max={this.state.maxValue}
    2859      />
    2960    </Box>
    3061    </div>
    3162  );
     63  }
    3264}
     65
     66export default FilterPriceComponent
     67

  • phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css

    rdfd5d87 rdbd4834  
    1 #demo-multiple-checkbox{
    2     margin-top: 10px;
     1.input-select-label{
     2    margin-top: -5px;
    33}
    44
     5.input-select-option fieldset{
     6    border-radius: 20px;
     7
     8}

  • phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js

    rdfd5d87 rdbd4834  
     1
    12import * as React from 'react';
    23import OutlinedInput from '@mui/material/OutlinedInput';
    … …  
    89import Checkbox from '@mui/material/Checkbox';
    910import "./FilterSelectComponent.css"
     11import axios from 'axios';
    1012
    11 const ITEM_HEIGHT = 48;
    12 const ITEM_PADDING_TOP = 8;
    13 const MenuProps = {
    14   PaperProps: {
    15     style: {
    16       maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
    17       width: 250,
    18     },
    19   },
    20 };
     13export class FilterSelectComponent extends React.Component {
    2114
    22 const categories = [
    23   'Category1',
    24   'Category2',
    25   'Category3',
    26   'Category4',
    27   'Category5',
    28   'Category6',
    29   'Category7',
    30   'Category8',
    31   'Category9',
    32   'Category10',
    33 ];
     15    constructor(props) {
     16      super(props)
     17       
     18      this.state = {
     19         pickedItems: [],
     20         items: [],
     21         type: '',
     22         ITEM_HEIGHT: 48,
     23         ITEM_PADDING_TOP: 8,
     24         MenuProps: {}
     25      }
     26 
     27    }
    3428
    35 export default function MultipleSelectCheckmarks() {
    36   const [category, setCategory] = React.useState([]);
     29    componentDidMount(){
     30        this.state.MenuProps = {
     31            PaperProps: {
     32              style: {
     33                maxHeight: this.state.ITEM_HEIGHT * 5.5 + this.state.ITEM_PADDING_TOP,
     34                width: 250,
     35              },
     36            },
     37        }
    3738
    38   const handleChange = (event) => {
    39     const {
    40       target: { value },
    41     } = event;
    42     setCategory(
    43       // On autofill we get a stringified value.
    44       typeof value === 'string' ? value.split(',') : value,
    45     );
    46   };
    4739
    48   return (
    49     <div>
    50       <FormControl id="form" sx={{ m: 1, width: 200 }}>
    51         <InputLabel id="demo-multiple-checkbox-label">Category</InputLabel>
    52         <Select
    53           size={"small"}
    54           labelId="demo-multiple-checkbox-label"
    55           id="demo-multiple-checkbox"
    56           multiple
    57           value={category}
    58           onChange={handleChange}
    59           input={<OutlinedInput label="Category" />}  // tuka odi soodvetno imeto na filter
    60           renderValue={(selected) => selected.join(', ')}
    61           MenuProps={MenuProps}
    62 >
    63           {categories.map((cat) => (
    64             <MenuItem key={cat} value={cat}>
    65               <Checkbox checked={category.indexOf(cat) > -1} />
    66               <ListItemText primary={cat} />
    67             </MenuItem>
    68           ))}
    69         </Select>
    70       </FormControl>
    71     </div>
    72   );
     40        let endpoint
     41        if(this.props.type == 'brands')
     42        {
     43          endpoint = '/brands'
     44          this.setState({
     45            type: 'Брендови'
     46          })
     47        }
     48        else{
     49          endpoint = '/shops'
     50          this.setState({
     51            type: 'Продавници'
     52          })
     53        }
     54
     55        axios.get(endpoint)
     56        .then(response => this.setState({items: response.data}))
     57        .catch(error => console.log(error))
     58    }
     59
     60    handleChange = (event) => {
     61       let value = event.target.value
     62        this.setState({
     63            pickedItems: typeof value === 'string' ? value.split(',') : value
     64        }, ()=>{
     65          if(this.props.type == 'brands')
     66          {
     67            this.props.changeHandler({brands: this.state.pickedItems.join(',')})
     68          }
     69         
     70          if(this.props.type == 'shops')
     71          {
     72            this.props.changeHandler({shops: this.state.pickedItems.join(',')})
     73          }
     74         
     75        })
     76      };
     77
     78
     79  render() {
     80    return (
     81        <div>
     82        <FormControl className="form-select-component" sx={{ m: 1, width: 200 }}>
     83          <InputLabel className="input-select-label">{this.state.type}</InputLabel>
     84          <Select
     85            size={"small"}
     86            labelId="input-label-id"
     87            className="input-select-option"
     88            multiple
     89            value={this.state.pickedItems}
     90            onChange={this.handleChange}
     91            input={<OutlinedInput className='inner-input-selectfilter' label={this.state.type} />}
     92            renderValue={(selected) => selected.join(', ')}
     93            MenuProps={this.state.MenuProps}
     94  >
     95            {this.state.items.map((item) => (
     96              <MenuItem key={item} value={item}>
     97                <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
     98                <ListItemText primary={item} />
     99              </MenuItem>
     100            ))}
     101          </Select>
     102        </FormControl>
     103      </div>
     104    )
     105  }
    73106}
     107
     108export default FilterSelectComponent

  • phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css

    rdfd5d87 rdbd4834  
    1 #searchfield{
    2     display: flex;
    3     border-radius: 20px;
    4     height: fit-content;
     1.search-phone-field{
     2        /* display: flex;
     3        height: fit-content;
     4        border-radius: 20px; */
     5        border: 1px solid rgb(131, 125, 125);
    56}
     7
     8.search-phone-input{
     9    margin:5px;
     10}
     11
     12
     13
     14

  • phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js

    rdfd5d87 rdbd4834  
    5959
    6060export default class SearchFieldComponent extends Component {
     61  constructor(props) {
     62    super(props)
     63 
     64    this.state = {
     65       
     66    }
     67  }
     68
     69  handleChange = (event) => {
     70    this.props.changeHandler({searchValue: event.target.value})
     71  }
     72 
    6173  render() {
    6274    return (
    63         <Search id="searchfield">
     75        <Search onChange={this.handleChange} className="search-phone-field">
    6476        <SearchIconWrapper id="iconwrapper">
    6577          <SearchIcon />
    6678        </SearchIconWrapper>
    6779        <StyledInputBase
    68         id="search"
     80          className="search-phone-input"
    6981          placeholder="Пребарувај…"
    7082          inputProps={{ 'aria-label': 'search' }}
    71         />
     83        /> 
    7284      </Search>
    7385    )

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

    rdfd5d87 rdbd4834  
    1 #filtersDiv{
    2     background-color: #91AD7E;
     1.grouped-filters-component{
     2    background-color: #a6c9ab;
    33    display: flex;
    4 }
    5 
    6 /* #filtersDiv > div{
    7     margin-left: 30px;
    8 } */
    9 
    10 
    11 #filtersDiv > div{
    12     margin-left: 30px;
    13 }
    14 
    15 #filtersDiv > div:nth-of-type(4){
    16     margin-top: 15px;
    17     margin-left: 200px;
     4    padding: 20px;
    185}
    196

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

    rdfd5d87 rdbd4834  
    88import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent"
    99import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent';
     10import { Grid } from '@mui/material';
     11import SortByComponent from '../FiltersComponents/SortByComponent';
    1012
    1113export default class GroupedFiltersComponent extends Component {
     14
     15  constructor(props) {
     16    super(props)
     17 
     18    this.state = {
     19     
     20    }
     21  }
     22 
     23
     24  componentDidMount(){
     25 
     26  }
     27
    1228  render() {
    1329    return (
    14       <div id="filtersDiv">
    15        <FilterSelectComponent/>
    16        <FilterSelectComponent/>
    17        <FilterPriceComponent/>
    18        <SearchFieldComponent/>
     30      <>
     31      <div className="grouped-filters-component">
     32        <Grid container spacing={5}>
     33
     34          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     35            <FilterSelectComponent changeHandler={this.props.passFilters} type='shops'/>
     36          </Grid>
     37
     38          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     39            <FilterSelectComponent changeHandler={this.props.passFilters} type='brands'/>
     40          </Grid>
     41
     42          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     43            <FilterPriceComponent changeHandler={this.props.passFilters}/>
     44          </Grid>
     45       
     46          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     47            <SearchFieldComponent changeHandler={this.props.passFilters} />
     48          </Grid>
     49       </Grid>
    1950      </div>
     51      <SortByComponent changeHandler={this.props.passFilters}/>
     52      </>
    2053    )
    2154  }
     55
    2256}

  • phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css

    rdfd5d87 rdbd4834  
    1 #header{
     1.header-component{
    22    background-color: #B6E2C8;
    33    display: flex;
    … …  
    55}
    66
    7 #header img{
     7.header-component img{
    88    width: 310px;
    99    height: 200px;

  • phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js

    rdfd5d87 rdbd4834  
    11import React, { Component } from 'react'
    2 import logo from '../../logo_phonelux.png'
     2import { Link } from 'react-router-dom'
     3import logo from '../../images/logo_phonelux.png'
    34import './HeaderComponent.css'
    45
    … …  
    67  render() {
    78    return (
    8       <div id='header'>
     9      <div className='header-component'>
     10          <Link style={{ textDecoration: 'none' }} to={"/"}>
    911        <img src={logo}></img>
     12        </Link>
    1013      </div>
    1114    )
Note: See TracChangeset for help on using the changeset viewer.