diff --git a/kivi-cars/public/manifest.json b/kivi-cars/public/manifest.json index 080d6c7..4a3ef25 100644 --- a/kivi-cars/public/manifest.json +++ b/kivi-cars/public/manifest.json @@ -1,23 +1,23 @@ { "short_name": "React App", "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], + // "icons": [ + // { + // "src": "favicon.ico", + // "sizes": "64x64 32x32 24x24 16x16", + // "type": "image/x-icon" + // }, + // { + // "src": "logo192.png", + // "type": "image/png", + // "sizes": "192x192" + // }, + // { + // "src": "logo512.png", + // "type": "image/png", + // "sizes": "512x512" + // } + // ], "start_url": ".", "display": "standalone", "theme_color": "#000000", diff --git a/kivi-cars/src/components/Filters/Standard-Filters.js b/kivi-cars/src/components/Filters/Advanced-filters.js similarity index 74% rename from kivi-cars/src/components/Filters/Standard-Filters.js rename to kivi-cars/src/components/Filters/Advanced-filters.js index bbaa1a8..0e5a5f2 100644 --- a/kivi-cars/src/components/Filters/Standard-Filters.js +++ b/kivi-cars/src/components/Filters/Advanced-filters.js @@ -2,7 +2,7 @@ import React from "react"; import "./Filters.css"; import Cars from "../../data/cars"; -const Filters = () => { +const AdvancedFilters = () => { return(
@@ -11,4 +11,4 @@ const Filters = () => { ) } -export default Filters \ No newline at end of file +export default AdvancedFilters \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.css b/kivi-cars/src/components/Filters/Filter/DoubleFilter.css new file mode 100644 index 0000000..f1e5bc4 --- /dev/null +++ b/kivi-cars/src/components/Filters/Filter/DoubleFilter.css @@ -0,0 +1,48 @@ +*{ + margin: 0; + padding: 0; +} + +.doubleFilter-component{ + padding: 0.5em; + width: 100%; + box-sizing: border-box; + text-align: center; +} + +label{ + width: 100%; + +} + +.double-filters{ + display: flex; + width: 100%; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; +} + +.filter{ + padding: 0.5em; +} + +.filter input{ + width: 6em; + height: 2em; + text-align: center; + border: 2px solid #02adba; + background-color: #fff; + border-radius: 5px; + margin-left: 0.5em; +} + +@media only screen and (min-width: 541px) { + .doubleFilter-component{ + font-size: 24px; + } + + .filter input{ + font-size: 20px; + } +} \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js new file mode 100644 index 0000000..e13e6a3 --- /dev/null +++ b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js @@ -0,0 +1,23 @@ +import React from "react"; +import "./DoubleFilter.css"; + +const DoubleFilter = (props) => { + + return ( +
+ +
+
+ + +
+
+ + +
+
+
+ ) +} + +export default DoubleFilter; \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Filter/Filter.css b/kivi-cars/src/components/Filters/Filter/Filter.css new file mode 100644 index 0000000..80cb185 --- /dev/null +++ b/kivi-cars/src/components/Filters/Filter/Filter.css @@ -0,0 +1,32 @@ +*{ + margin: 0; + padding: 0; +} + +.filter-component{ + padding: 0.5em; + width: 50%; + box-sizing: border-box; + text-align: center; +} + +.dropdown-list{ + width: 10em; + height: 2em; + text-align: center; + border: 2px solid #02adba; + background-color: #fff; + border-radius: 5px; + margin-top: 0.25em; +} + +@media only screen and (min-width: 541px) { + .filter-component{ + font-size: 24px; + } + + .dropdown-list{ + margin-left: 1em; + font-size: 20px; + } +} \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Filter/Filter.js b/kivi-cars/src/components/Filters/Filter/Filter.js index deeb444..b1bcc93 100644 --- a/kivi-cars/src/components/Filters/Filter/Filter.js +++ b/kivi-cars/src/components/Filters/Filter/Filter.js @@ -1,12 +1,16 @@ import React from "react"; +import './Filter.css'; const Filter = (props) => { return( -
- + {props.tipovi.map((tip, i) => { + return ( + + ) + })}
) diff --git a/kivi-cars/src/components/Filters/Filters.css b/kivi-cars/src/components/Filters/Filters.css index b28b04f..45964a0 100644 --- a/kivi-cars/src/components/Filters/Filters.css +++ b/kivi-cars/src/components/Filters/Filters.css @@ -1,3 +1,16 @@ +*{ + margin: 0; + padding: 0; +} + +.filters-container{ + width: 90%; + margin: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} diff --git a/kivi-cars/src/components/Filters/Standard-filters.js b/kivi-cars/src/components/Filters/Standard-filters.js index 4eee36c..21d1b81 100644 --- a/kivi-cars/src/components/Filters/Standard-filters.js +++ b/kivi-cars/src/components/Filters/Standard-filters.js @@ -1 +1,74 @@ -import React from "react"; \ No newline at end of file +import React from "react"; +import "./Filters.css"; +import Cars from "../../data/cars"; +import Cubes from "../../data/cubes"; +import Type from "../../data/type"; +import Fuel from "../../data/fuel"; +import Transmission from "../../data/transmission"; +import Drive from "../../data/drive"; +import Condition from "../../data/condition"; +import Doors from "../../data/doors"; +import Filter from "./Filter/Filter"; +import DoubleFilter from "./Filter/DoubleFilter"; +import Year from "../../data/year"; +import Price from "../../data/price"; +import HorsePower from "../../data/horsepower"; +import Kilowats from "../../data/kilowats"; + +const StandardFilters = () => { + + let brand_index = 5 + let index = 0 + + const brands = Cars.map(brand => { + return brand.brand + }) + + const models = Cars[brand_index].models + + const Brands = { + "ime": "Marka", + "tipovi": ["Odaberite", ...brands] + } + + const Models = { + "ime": "Modeli", + "tipovi": ["Odaberite", ...models] + } + + + const data = [Fuel, Type] + const data1 = [Transmission, Drive, Condition, Doors] + const data2 = [Price, Year, Cubes, HorsePower, Kilowats] + + + return( +
+ + + + {data.map(item => { + index += 1; + return( + + ) + })} + + {data2.map(item => { + index += 1; + return( + + ) + })} + + {data1.map(item => { + index += 1; + return( + + ) + })} +
+ ) +} + +export default StandardFilters \ No newline at end of file diff --git a/kivi-cars/src/components/Searchfilters/FiltersNav.css b/kivi-cars/src/components/Searchfilters/FiltersNav.css index ffb86af..3d3f50c 100644 --- a/kivi-cars/src/components/Searchfilters/FiltersNav.css +++ b/kivi-cars/src/components/Searchfilters/FiltersNav.css @@ -32,10 +32,10 @@ cursor: pointer; } -@media only screen and (max-width: 920px) and (min-width: 541px){ +@media only screen and (min-width: 541px){ .filters-link { line-height: 54px; - font-size: 22px; + font-size: 26px; } } diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js index 370f47d..3662950 100644 --- a/kivi-cars/src/containers/App.js +++ b/kivi-cars/src/containers/App.js @@ -1,9 +1,19 @@ import './css/App.css'; - +import React from 'react'; +import Header from '../components/Header/Header'; +import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar'; +import StandardBtn from '../components/Button/StandardBtn'; +import FiltersPage from './FiltersPage'; + function App() { + + const info = 'Dobrodosli na stranicu kivi!' + return (
+ +
); } diff --git a/kivi-cars/src/containers/FiltersPage.js b/kivi-cars/src/containers/FiltersPage.js new file mode 100644 index 0000000..9470bce --- /dev/null +++ b/kivi-cars/src/containers/FiltersPage.js @@ -0,0 +1,22 @@ +import React from "react"; +import './css/FiltersPage.css'; +import Header from "../components/Header/Header"; +import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar"; +import FiltersNav from '../components/Searchfilters/FiltersNav' +import StandardFilters from "../components/Filters/Standard-filters"; + +const FiltersPage = () => { + + const naslov = "Filteri za pretrazivanje" + + return( +
+
+ + + +
+ ) +} + +export default FiltersPage; \ No newline at end of file diff --git a/kivi-cars/src/containers/css/FiltersPage.css b/kivi-cars/src/containers/css/FiltersPage.css new file mode 100644 index 0000000..f70ac1d --- /dev/null +++ b/kivi-cars/src/containers/css/FiltersPage.css @@ -0,0 +1,8 @@ +*{ + margin: 0; + padding: 0; +} + +h1 { + color: black; +} \ No newline at end of file diff --git a/kivi-cars/src/data/cars.js b/kivi-cars/src/data/cars.js index f132063..d66f609 100644 --- a/kivi-cars/src/data/cars.js +++ b/kivi-cars/src/data/cars.js @@ -1365,7 +1365,7 @@ const Cars = [ ] }, { - "brand": "smart", + "brand": "Smart", "models": [ "fortwo" ] diff --git a/kivi-cars/src/data/color.js b/kivi-cars/src/data/color.js index a1be6bd..4102440 100644 --- a/kivi-cars/src/data/color.js +++ b/kivi-cars/src/data/color.js @@ -1,6 +1,7 @@ const Color = { "ime": "Boja", "tipovi": [ + "Odaberite", "Bež", "Bijela", "Bordo", diff --git a/kivi-cars/src/data/condition.js b/kivi-cars/src/data/condition.js index dbb5c1f..ac8f13a 100644 --- a/kivi-cars/src/data/condition.js +++ b/kivi-cars/src/data/condition.js @@ -1,6 +1,7 @@ const Condition = { "ime": "Stanje", "tipovi": [ + "Odaberite", "Novo", "Polovno", "Udareno" diff --git a/kivi-cars/src/data/cubes.js b/kivi-cars/src/data/cubes.js new file mode 100644 index 0000000..7dc8579 --- /dev/null +++ b/kivi-cars/src/data/cubes.js @@ -0,0 +1,10 @@ +const Cubes = { + "title": "Kubikaza", + "fields": { + "min": 0.8, + "max": 6.2, + "step": 0.1 + } +} + +export default Cubes \ No newline at end of file diff --git a/kivi-cars/src/data/doors.js b/kivi-cars/src/data/doors.js index 9df7e08..036aae2 100644 --- a/kivi-cars/src/data/doors.js +++ b/kivi-cars/src/data/doors.js @@ -1,6 +1,7 @@ const Doors = { "ime": "Broj vrata", "tipovi" : [ + "Odaberite", "2/3", "4/5" ] diff --git a/kivi-cars/src/data/drive.js b/kivi-cars/src/data/drive.js index 60dd4d1..653429f 100644 --- a/kivi-cars/src/data/drive.js +++ b/kivi-cars/src/data/drive.js @@ -1,6 +1,7 @@ const Drive = { "ime" : "Pogon", "tipovi": [ + "Odaberite", "Prednji", "Zadnji", "Sva četiri" diff --git a/kivi-cars/src/data/fuel.js b/kivi-cars/src/data/fuel.js index adba705..add6283 100644 --- a/kivi-cars/src/data/fuel.js +++ b/kivi-cars/src/data/fuel.js @@ -1,6 +1,7 @@ const Fuel = { "ime": "Gorivo", "tipovi": [ + "Odaberite", "Dizel", "Benzin", "Plin", diff --git a/kivi-cars/src/data/gearbox.js b/kivi-cars/src/data/gearbox.js index 052464d..51a9739 100644 --- a/kivi-cars/src/data/gearbox.js +++ b/kivi-cars/src/data/gearbox.js @@ -1,6 +1,7 @@ const Gearbox = { "ime": "Broj brzina", "tipovi": [ + "Odaberite", "3+R", "4+R", "5+R", diff --git a/kivi-cars/src/data/horsepower.js b/kivi-cars/src/data/horsepower.js new file mode 100644 index 0000000..cc13cd1 --- /dev/null +++ b/kivi-cars/src/data/horsepower.js @@ -0,0 +1,10 @@ +const HorsePower = { + "title": "Konjskih snaga", + "fields": { + "min": 0, + "max": 2000, + "step": 10 + } +} + +export default HorsePower \ No newline at end of file diff --git a/kivi-cars/src/data/kilowats.js b/kivi-cars/src/data/kilowats.js new file mode 100644 index 0000000..07e601d --- /dev/null +++ b/kivi-cars/src/data/kilowats.js @@ -0,0 +1,10 @@ +const Kilowats = { + "title": "Kilovata", + "fields": { + "min": 0, + "max": 1000, + "step": 10 + } +} + +export default Kilowats \ No newline at end of file diff --git a/kivi-cars/src/data/lights.js b/kivi-cars/src/data/lights.js index 754bfa7..52fec0b 100644 --- a/kivi-cars/src/data/lights.js +++ b/kivi-cars/src/data/lights.js @@ -1,6 +1,7 @@ const Lights = { "ime": "Svjetla", "tipovi": [ + "Odaberite", "Halogena", "Xenon", "Led", diff --git a/kivi-cars/src/data/price.js b/kivi-cars/src/data/price.js new file mode 100644 index 0000000..6527a66 --- /dev/null +++ b/kivi-cars/src/data/price.js @@ -0,0 +1,10 @@ +const Price = { + "title": "Cijena", + "fields": { + "min": 0, + "max": 1000000, + "step": 500 + } +} + +export default Price; \ No newline at end of file diff --git a/kivi-cars/src/data/seats.js b/kivi-cars/src/data/seats.js index 7c7bc7a..41912d4 100644 --- a/kivi-cars/src/data/seats.js +++ b/kivi-cars/src/data/seats.js @@ -1,6 +1,7 @@ const Seats = { "ime": "Sjedišta", "tipovi": [ + "Odaberite", "1", "2", "3", diff --git a/kivi-cars/src/data/sensors.js b/kivi-cars/src/data/sensors.js index c5019d5..88f466f 100644 --- a/kivi-cars/src/data/sensors.js +++ b/kivi-cars/src/data/sensors.js @@ -1,6 +1,7 @@ const Sensors = { "ime": "Senzori", "tipovi": [ + "Odaberite", "naprijed", "nazad", "naprijed i nazad", diff --git a/kivi-cars/src/data/transmission.js b/kivi-cars/src/data/transmission.js index 41ca16f..16c7c19 100644 --- a/kivi-cars/src/data/transmission.js +++ b/kivi-cars/src/data/transmission.js @@ -1,9 +1,10 @@ const Transmission = { "ime": "Transmisija", "tipovi": [ - "automatski mjenjač", - "manuelni mjenjač", - "polu-automatski mjenjač" + "Odaberite", + "Automatski mjenjač", + "Manuelni mjenjač", + "Polu-automatski mjenjač" ] } diff --git a/kivi-cars/src/data/type.js b/kivi-cars/src/data/type.js index 826d101..3fa115e 100644 --- a/kivi-cars/src/data/type.js +++ b/kivi-cars/src/data/type.js @@ -1,6 +1,7 @@ const Type = { "ime": "Vrsta vozila", "tipovi": [ + "Odaberite", "Karavan", "Limuzina", "Monovolumen", diff --git a/kivi-cars/src/data/year.js b/kivi-cars/src/data/year.js new file mode 100644 index 0000000..a1dec49 --- /dev/null +++ b/kivi-cars/src/data/year.js @@ -0,0 +1,10 @@ +const Year = { + "title": "Godiste", + "fields": { + "min": 1960, + "max": new Date().getFullYear(), + "step": 1 + } +} + +export default Year; \ No newline at end of file diff --git a/kivi-cars/src/index.css b/kivi-cars/src/index.css index ec2585e..71098fe 100644 --- a/kivi-cars/src/index.css +++ b/kivi-cars/src/index.css @@ -1,3 +1,7 @@ +html{ + scroll-behavior: smooth; +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',