Changeset dbd4834
- Timestamp:
- 09/07/22 00:49:45 (2 years ago)
- Branches:
- master
- Children:
- f25d07e
- Parents:
- dfd5d87
- Location:
- phonelux-frontend
- Files:
-
- 23 added
- 1 deleted
- 13 edited
- 1 moved
Legend:
- Unmodified
- Added
- Removed
-
phonelux-frontend/package-lock.json
rdfd5d87 rdbd4834 11 11 "@emotion/react": "^11.10.0", 12 12 "@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", 13 17 "@mui/icons-material": "^5.10.2", 14 18 "@mui/material": "^5.10.2", … … 16 20 "@testing-library/react": "^13.3.0", 17 21 "@testing-library/user-event": "^13.5.0", 22 "axios": "^0.27.2", 18 23 "react": "^18.2.0", 19 24 "react-dom": "^18.2.0", … … 2376 2381 } 2377 2382 }, 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 }, 2378 2440 "node_modules/@humanwhocodes/config-array": { 2379 2441 "version": "0.10.4", … … 5363 5425 "engines": { 5364 5426 "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" 5365 5449 } 5366 5450 }, … … 18865 18949 } 18866 18950 }, 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 }, 18867 18988 "@humanwhocodes/config-array": { 18868 18989 "version": "0.10.4", … … 21005 21126 "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz", 21006 21127 "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 } 21007 21149 }, 21008 21150 "axobject-query": { -
phonelux-frontend/package.json
rdfd5d87 rdbd4834 6 6 "@emotion/react": "^11.10.0", 7 7 "@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", 8 12 "@mui/icons-material": "^5.10.2", 9 13 "@mui/material": "^5.10.2", … … 11 15 "@testing-library/react": "^13.3.0", 12 16 "@testing-library/user-event": "^13.5.0", 17 "axios": "^0.27.2", 13 18 "react": "^18.2.0", 14 19 "react-dom": "^18.2.0", … … 42 47 "devDependencies": { 43 48 "react-router-dom": "^6.3.0" 44 } 49 }, 50 "proxy": "http://localhost:8080" 45 51 } -
phonelux-frontend/src/App.js
rdfd5d87 rdbd4834 3 3 import GroupedFiltersComponent from "./components/GroupedFiltersComponent/GroupedFiltersComponent"; 4 4 import HeaderComponent from "./components/HeaderComponent/HeaderComponent"; 5 import SearchFieldComponent from "./components/FiltersComponents/SearchFieldComponent" 6 import FilterPriceComponent from "./components/FiltersComponents/FilterPriceComponent" 5 import InputFormComponent from "./components/LoginRegisterComponents/InputFormComponent"; 6 import LoginFormComponent from "./components/LoginRegisterComponents/LoginFormComponent"; 7 import RegisterFormComponent from "./components/LoginRegisterComponents/RegisterFormComponent"; 8 import PaginationComponent from "./components/PaginationComponent/PaginationComponent" 9 import PhoneCardComponent from "./components/PhoneCardComponent/PhoneCardComponent"; 10 import PhoneCardGridComponent from "./components/PhoneCardGridComponent/PhoneCardGridComponent"; 11 import HomepageComponent from "./components/HomepageComponent" 12 import PhonePageComponent from "./components/PhonePageComponent"; 13 import SortByComponent from "./components/FiltersComponents/SortByComponent"; 14 import LoginPageComponent from "./components/LoginPageComponent" 15 import RegisterPageComponent from "./components/RegisterPageComponent"; 7 16 8 17 9 function App() { 18 19 function App() { 10 20 return ( 11 21 <BrowserRouter> 12 22 <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 14 31 </Routes> 15 32 </BrowserRouter> 33 16 34 ); 17 35 } -
phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css
rdfd5d87 rdbd4834 1 #priceContainer{1 .sliderPriceContainer{ 2 2 display: flex; 3 3 4 } 4 5 5 # slider{6 margin-top: 20px;6 #priceSlider{ 7 margin-top: 15px; 7 8 } 8 9 9 #box{10 .sliderBox{ 10 11 margin-left: 20px; 11 12 } 12 13 13 #priceLabel{14 margin-top: 2 3px;14 .sliderPriceLabel{ 15 margin-top: 20px; 15 16 font-size: 17px; 16 17 } -
phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
rdfd5d87 rdbd4834 3 3 import Slider from '@mui/material/Slider'; 4 4 import "./FilterPriceComponent.css" 5 import axios from 'axios'; 5 6 6 function valuetext(value) { 7 return `${value}°C`; 8 } 7 export class FilterPriceComponent extends React.Component { 9 8 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 } 12 18 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 }); 15 38 }; 16 39 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 }}> 21 50 <Slider 22 id=" slider"51 id="priceSlider" 23 52 getAriaLabel={() => 'Price range'} 24 value={value} 25 onChange={handleChange} 53 value={this.state.value} 54 onChange={this.changeValue} 55 onChangeCommitted={this.handleChange} 26 56 valueLabelDisplay="auto" 27 getAriaValueText={valuetext} 57 min={this.state.minValue} 58 max={this.state.maxValue} 28 59 /> 29 60 </Box> 30 61 </div> 31 62 ); 63 } 32 64 } 65 66 export 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; 3 3 } 4 4 5 .input-select-option fieldset{ 6 border-radius: 20px; 7 8 } -
phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
rdfd5d87 rdbd4834 1 1 2 import * as React from 'react'; 2 3 import OutlinedInput from '@mui/material/OutlinedInput'; … … 8 9 import Checkbox from '@mui/material/Checkbox'; 9 10 import "./FilterSelectComponent.css" 11 import axios from 'axios'; 10 12 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 }; 13 export class FilterSelectComponent extends React.Component { 21 14 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 } 34 28 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 } 37 38 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 };47 39 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 } 73 106 } 107 108 export 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); 5 6 } 7 8 .search-phone-input{ 9 margin:5px; 10 } 11 12 13 14 -
phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
rdfd5d87 rdbd4834 59 59 60 60 export 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 61 73 render() { 62 74 return ( 63 <Search id="searchfield">75 <Search onChange={this.handleChange} className="search-phone-field"> 64 76 <SearchIconWrapper id="iconwrapper"> 65 77 <SearchIcon /> 66 78 </SearchIconWrapper> 67 79 <StyledInputBase 68 id="search"80 className="search-phone-input" 69 81 placeholder="Пребарувај…" 70 82 inputProps={{ 'aria-label': 'search' }} 71 /> 83 /> 72 84 </Search> 73 85 ) -
phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css
rdfd5d87 rdbd4834 1 #filtersDiv{2 background-color: # 91AD7E;1 .grouped-filters-component{ 2 background-color: #a6c9ab; 3 3 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; 18 5 } 19 6 -
phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
rdfd5d87 rdbd4834 8 8 import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent" 9 9 import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent'; 10 import { Grid } from '@mui/material'; 11 import SortByComponent from '../FiltersComponents/SortByComponent'; 10 12 11 13 export 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 12 28 render() { 13 29 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> 19 50 </div> 51 <SortByComponent changeHandler={this.props.passFilters}/> 52 </> 20 53 ) 21 54 } 55 22 56 } -
phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
rdfd5d87 rdbd4834 1 #header{1 .header-component{ 2 2 background-color: #B6E2C8; 3 3 display: flex; … … 5 5 } 6 6 7 #headerimg{7 .header-component img{ 8 8 width: 310px; 9 9 height: 200px; -
phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
rdfd5d87 rdbd4834 1 1 import React, { Component } from 'react' 2 import logo from '../../logo_phonelux.png' 2 import { Link } from 'react-router-dom' 3 import logo from '../../images/logo_phonelux.png' 3 4 import './HeaderComponent.css' 4 5 … … 6 7 render() { 7 8 return ( 8 <div id='header'> 9 <div className='header-component'> 10 <Link style={{ textDecoration: 'none' }} to={"/"}> 9 11 <img src={logo}></img> 12 </Link> 10 13 </div> 11 14 )
Note:
See TracChangeset
for help on using the changeset viewer.