Compare commits
2 Commits
filters_da
...
addcategor
| Author | SHA1 | Date | |
|---|---|---|---|
|
a738f08905 | ||
|
|
992cb1756a |
@@ -6,6 +6,7 @@
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@testing-library/react": "^12.1.3",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"nouislider": "^15.5.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import './button.css'
|
||||
|
||||
var title = "DALJE";
|
||||
const StandardBtn = (props) => {
|
||||
return (
|
||||
<div className='standard-btn'>
|
||||
|
||||
<button className='standardBtn'>{title}</button>
|
||||
<button className='standardBtn'>{props.title}</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
.standard-btn {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.standardBtn {
|
||||
width: fit-content;
|
||||
width:300px;
|
||||
background-color: #02ADBA;
|
||||
font-size: 15px;
|
||||
padding: 7px 20px 7px 20px;
|
||||
@@ -20,13 +21,36 @@
|
||||
padding: 5px;
|
||||
}
|
||||
.left-button:hover {
|
||||
background-color:#9eedf3
|
||||
background-color:#9eedf3;
|
||||
}
|
||||
|
||||
.right-button {
|
||||
padding: 5px;
|
||||
}
|
||||
.right-button:hover {
|
||||
background-color:#9eedf3
|
||||
|
||||
}
|
||||
background-color:#9eedf3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.standardBtn {
|
||||
width: 200px;
|
||||
background-color: #02ADBA;
|
||||
font-size: 15px;
|
||||
padding: 7px 20px 7px 20px;
|
||||
color: white;
|
||||
border: #02ADBA;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.standardBtn {
|
||||
width: 150px;
|
||||
background-color: #02ADBA;
|
||||
font-size: 15px;
|
||||
padding: 7px 20px 7px 20px;
|
||||
color: white;
|
||||
border: #02ADBA;
|
||||
}
|
||||
}
|
||||
19
kivi-cars/src/components/CategoryBtns/categorybtns.js
Normal file
19
kivi-cars/src/components/CategoryBtns/categorybtns.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import './categorybtns.css'
|
||||
import StandardBtn from '../Button/StandardBtn'
|
||||
|
||||
var auto = 'AUTO';
|
||||
var motor = 'MOTOR';
|
||||
var kamion = 'KAMION';
|
||||
|
||||
const CategoryBtns = (props) => {
|
||||
return (
|
||||
<div className='category-btns'>
|
||||
<StandardBtn title={auto}/>
|
||||
<StandardBtn title={motor}/>
|
||||
<StandardBtn title={kamion}/>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default CategoryBtns
|
||||
59
kivi-cars/src/components/Filters.css
Normal file
59
kivi-cars/src/components/Filters.css
Normal file
@@ -0,0 +1,59 @@
|
||||
@media only screen and (min-width: 601px) {
|
||||
.container {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.filters-tab {
|
||||
width: 100%;
|
||||
height: 48;
|
||||
}
|
||||
|
||||
.filters-links{
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-evenly;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.filters-links li {
|
||||
text-align: center;
|
||||
width: 7rem;
|
||||
flex-grow: 1;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: inline-block;
|
||||
border-bottom: 2px solid #02adba;
|
||||
width: 5rem;
|
||||
padding: 1rem 10rem;
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.filters a{
|
||||
text-decoration: none;
|
||||
color: #02adba;
|
||||
}
|
||||
|
||||
.filters a:visited {
|
||||
color: #02adba;
|
||||
}
|
||||
|
||||
.cars-brands-models {
|
||||
border: 2px solid blue;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
41
kivi-cars/src/components/Filters.js
Normal file
41
kivi-cars/src/components/Filters.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import "./Filters.css";
|
||||
import Cars from "./cars";
|
||||
|
||||
const Filters = () => {
|
||||
|
||||
const unsortedCars = Cars
|
||||
const cars = unsortedCars.sort(unsortedCars.brand)
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<div className="container">
|
||||
<div className="filters-tabs">
|
||||
<ul className="filters-links">
|
||||
<li className="filters">
|
||||
<a id="standard-filters" href="#">Filteri</a>
|
||||
</li>
|
||||
<li className="filters">
|
||||
<a id="advanced-filters" href="#">Napredni filteri</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="container-standard">
|
||||
<div className="cars-brands-models">
|
||||
<label>Marka: </label>
|
||||
<select name="brands" id="brands">
|
||||
{cars.map(car => <option className="option-field" value={car.brand}>{car.brand}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-advanced">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Filters
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Filter = (props) => {
|
||||
return(
|
||||
<div >
|
||||
<select>
|
||||
<option>
|
||||
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Filter;
|
||||
@@ -1,3 +0,0 @@
|
||||
|
||||
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import "./Filters.css";
|
||||
import Cars from "../../data/cars";
|
||||
|
||||
const Filters = () => {
|
||||
|
||||
return(
|
||||
<div className="filters-container">
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Filters
|
||||
@@ -1 +0,0 @@
|
||||
import React from "react";
|
||||
@@ -13,7 +13,7 @@ header {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (max-width: 700px) {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* color:#02adba */
|
||||
|
||||
.links-container ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 3px solid #02adba;
|
||||
}
|
||||
|
||||
.links-container{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.filters-links{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filters-link{
|
||||
padding: 0.5em 2.5em;
|
||||
white-space: none;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 920px) and (min-width: 541px){
|
||||
.filters-link {
|
||||
line-height: 54px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 921px){
|
||||
.filters-link {
|
||||
line-height: 54px;
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
|
||||
.filters-links {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import './FiltersNav.css';
|
||||
|
||||
const FiltersNav = () => {
|
||||
|
||||
|
||||
return(
|
||||
<div className="links-container">
|
||||
<ul className="filters-links">
|
||||
<li className="filters-link active">
|
||||
<a id="standard-filters">Filteri</a>
|
||||
</li>
|
||||
<li className="filters-link">
|
||||
<a id="advanced-filters">Napredni filteri</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FiltersNav;
|
||||
@@ -7,8 +7,4 @@
|
||||
.App{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
p, h1, h2, h3 ,h4 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@@ -1,23 +1,22 @@
|
||||
import './App.css';
|
||||
import React from 'react';
|
||||
import FiltersNav from '../components/Searchfilters/FiltersNav';
|
||||
import Filters from '../components/Filters';
|
||||
import Header from '../components/Header/Header';
|
||||
import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
|
||||
import StandardBtn from '../components/Button/StandardBtn';
|
||||
import Filters from '../components/Filters/Filters';
|
||||
|
||||
|
||||
import CategoryBtns from '../components/CategoryBtns/categorybtns'
|
||||
function App() {
|
||||
|
||||
const info = 'Dobrodosli na stranicu kivi!'
|
||||
const naslov = 'Dobrodosli na stranicu kivi!'
|
||||
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Header header={info}/>
|
||||
<Header header={naslov}/>
|
||||
<ButtonsToolbar/>
|
||||
|
||||
<CategoryBtns/>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
const AirCondition = {
|
||||
"ime" : "Klima",
|
||||
"tipovi" : [
|
||||
"Jednozonska",
|
||||
"Dvozonska",
|
||||
"Trozonska",
|
||||
"Četverozonska",
|
||||
"Ostalo"
|
||||
]
|
||||
}
|
||||
|
||||
export default AirCondition;
|
||||
@@ -1,37 +0,0 @@
|
||||
const Checkbox = [
|
||||
"ABS",
|
||||
"ESP",
|
||||
"Tempomat",
|
||||
"Alarm",
|
||||
"Airbag",
|
||||
"Šiber",
|
||||
"Servo volan",
|
||||
"Koža",
|
||||
"Klima",
|
||||
"Centralna brava",
|
||||
"Daljinsko zaključavanje",
|
||||
"ISOFIX",
|
||||
"Registrovan",
|
||||
"Električni podizači stakala",
|
||||
"Električni retrovizor",
|
||||
"Turbo",
|
||||
"Naslon za ruke",
|
||||
"Start/Stop",
|
||||
"Pakring assistent",
|
||||
"Senzor mrtvog ugla",
|
||||
"Servisna knjiga",
|
||||
"Komande na volanu",
|
||||
"Navigacija",
|
||||
"Grijanje sjedišta",
|
||||
"Masažna sjedišta",
|
||||
"Memorija sjedišta",
|
||||
"Panorama",
|
||||
"Xenon",
|
||||
"LED",
|
||||
"Laser",
|
||||
"Ocarinjen",
|
||||
"Udaren",
|
||||
"Stranac"
|
||||
]
|
||||
|
||||
export default Checkbox;
|
||||
@@ -1,21 +0,0 @@
|
||||
const Color = {
|
||||
"ime": "Boja",
|
||||
"tipovi": [
|
||||
"Bež",
|
||||
"Bijela",
|
||||
"Bordo",
|
||||
"Crna",
|
||||
"Crvena",
|
||||
"Ljubičasta",
|
||||
"Narandžasta",
|
||||
"Plava",
|
||||
"Siva",
|
||||
"Smeđa",
|
||||
"Srebrena",
|
||||
"Zelena",
|
||||
"Zlatna",
|
||||
"Žuta"
|
||||
]
|
||||
}
|
||||
|
||||
export default Color;
|
||||
@@ -1,10 +0,0 @@
|
||||
const Condition = {
|
||||
"ime": "Stanje",
|
||||
"tipovi": [
|
||||
"Novo",
|
||||
"Polovno",
|
||||
"Udareno"
|
||||
]
|
||||
}
|
||||
|
||||
export default Condition;
|
||||
@@ -1,9 +0,0 @@
|
||||
const Doors = {
|
||||
"ime": "Broj vrata",
|
||||
"tipovi" : [
|
||||
"2/3",
|
||||
"4/5"
|
||||
]
|
||||
}
|
||||
|
||||
export default Doors;
|
||||
@@ -1,10 +0,0 @@
|
||||
const Drive = {
|
||||
"ime" : "Pogon",
|
||||
"tipovi": [
|
||||
"Prednji",
|
||||
"Zadnji",
|
||||
"Sva četiri"
|
||||
]
|
||||
}
|
||||
|
||||
export default Drive;
|
||||
@@ -1,13 +0,0 @@
|
||||
const Fuel = {
|
||||
"ime": "Gorivo",
|
||||
"tipovi": [
|
||||
"Dizel",
|
||||
"Benzin",
|
||||
"Plin",
|
||||
"Cng",
|
||||
"Hybrid",
|
||||
"Elektro"
|
||||
]
|
||||
}
|
||||
|
||||
export default Fuel;
|
||||
@@ -1,15 +0,0 @@
|
||||
const Gearbox = {
|
||||
"ime": "Broj brzina",
|
||||
"tipovi": [
|
||||
"3+R",
|
||||
"4+R",
|
||||
"5+R",
|
||||
"6+R",
|
||||
"7+R",
|
||||
"8+R",
|
||||
"9+R",
|
||||
"CVT"
|
||||
]
|
||||
}
|
||||
|
||||
export default Gearbox;
|
||||
@@ -1,12 +0,0 @@
|
||||
const Lights = {
|
||||
"ime": "Svjetla",
|
||||
"tipovi": [
|
||||
"Halogena",
|
||||
"Xenon",
|
||||
"Led",
|
||||
"Laser",
|
||||
"Ostalo"
|
||||
]
|
||||
}
|
||||
|
||||
export default Lights;
|
||||
@@ -1,16 +0,0 @@
|
||||
const Seats = {
|
||||
"ime": "Sjedišta",
|
||||
"tipovi": [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"Više"
|
||||
]
|
||||
}
|
||||
|
||||
export default Seats;
|
||||
@@ -1,11 +0,0 @@
|
||||
const Sensors = {
|
||||
"ime": "Senzori",
|
||||
"tipovi": [
|
||||
"naprijed",
|
||||
"nazad",
|
||||
"naprijed i nazad",
|
||||
"nema"
|
||||
]
|
||||
}
|
||||
|
||||
export default Sensors;
|
||||
@@ -1,10 +0,0 @@
|
||||
const Transmission = {
|
||||
"ime": "Transmisija",
|
||||
"tipovi": [
|
||||
"automatski mjenjač",
|
||||
"manuelni mjenjač",
|
||||
"polu-automatski mjenjač"
|
||||
]
|
||||
}
|
||||
|
||||
export default Transmission
|
||||
@@ -1,20 +0,0 @@
|
||||
const Type = {
|
||||
"ime": "Vrsta vozila",
|
||||
"tipovi": [
|
||||
"Karavan",
|
||||
"Limuzina",
|
||||
"Monovolumen",
|
||||
"Malo auto",
|
||||
"Sportback",
|
||||
"Kombi",
|
||||
"Kabriolet",
|
||||
"Coupe",
|
||||
"Terenac",
|
||||
"Off-Road",
|
||||
"Pickup",
|
||||
"Oldtimer",
|
||||
"Caddy"
|
||||
]
|
||||
}
|
||||
|
||||
export default Type;
|
||||
Reference in New Issue
Block a user