senaduka/old-kivi-za-auta-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: senaduka:addcategorybtns
Branches Tags
senaduka:main senaduka:frontend senaduka:filters_data senaduka:addcategorybtns senaduka:search_filters senaduka:createheader
..
compare: senaduka:search_filters
Branches Tags
senaduka:frontend senaduka:main senaduka:filters_data senaduka:addcategorybtns senaduka:search_filters senaduka:createheader

1 Commits
addcategor ... search_fil

Author SHA1 Message Date
ismailsosic
a064e89ceb add filter_navigation 2022-03-14 12:03:26 +01:00
22 changed files with 161 additions and 16376 deletions
Expand all files Collapse all files

16139
kivi-cars/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
kivi-cars/package.json
View File

@@ -6,7 +6,6 @@
"@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",

4
kivi-cars/src/assets/arrow-left.svg
View File

@@ -1,4 +0,0 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>chevron-left</title>
<path d="M11 16l13-13v-3l-16 16 16 16v-3l-13-13z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 191 B

4
kivi-cars/src/assets/arrow-right.svg
View File

@@ -1,4 +0,0 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>chevron-right</title>
<path d="M21 16l-13 13v3l16-16-16-16v3l13 13z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 189 B

12
kivi-cars/src/components/Button/StandardBtn.js
View File

@@ -1,12 +0,0 @@
import './button.css'
const StandardBtn = (props) => {
return (
<div className='standard-btn'>
<button className='standardBtn'>{props.title}</button>
</div>
)
}
export default StandardBtn

56
kivi-cars/src/components/Button/button.css
View File

@@ -1,56 +0,0 @@
.standard-btn {
text-align: center;
margin-bottom: 20px;
}
.standardBtn {
width:300px;
background-color: #02ADBA;
font-size: 15px;
padding: 7px 20px 7px 20px;
color: white;
border: #02ADBA;
}
.standardBtn:hover {
background-color:#3eced8 ;
color: white;
}
.left-button {
padding: 5px;
}
.left-button:hover {
background-color:#9eedf3;
}
.right-button {
padding: 5px;
}
.right-button:hover {
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;
}
}

12
kivi-cars/src/components/Button/leftBtn.js
View File

@@ -1,12 +0,0 @@
import './button.css'
import { ReactComponent as ArrowLeft } from '../../assets/arrow-left.svg';
const leftBtn = (props) => {
return (
<div className='left-button'>
<ArrowLeft/>
</div>
);
}
export default leftBtn

13
kivi-cars/src/components/Button/rightBtn.js
View File

@@ -1,13 +0,0 @@
import './button.css'
import { ReactComponent as ArrowRight } from '../../assets/arrow-right.svg';
const rightBtn = (props) => {
return (
<div className='right-button'>
<ArrowRight/>
</div>
);
}
export default rightBtn

22
kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.css
View File

@@ -1,22 +0,0 @@
.buttons-toolbar {
display: flex;
justify-content: space-between;
}
.left-group {
padding-left: 10px;
display: flex;
flex: 1;
justify-content: flex-start;
}
.right-group {
padding-right: 10px;
display: flex;
flex: 1;
justify-content: flex-end;
}

22
kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js
View File

@@ -1,22 +0,0 @@
import './ButtonsToolbar.css';
import ArrowLeft from '../Button/leftBtn';
import ArrowRigh from '../Button/rightBtn';
const ButtonsToolbar = (props) => {
return (
<div className='buttons-toolbar'>
<div className='left-group'>
<ArrowLeft />
</div>
<div className='right-group'>
<ArrowRigh/>
</div>
</div>
)
}
export default ButtonsToolbar

0
kivi-cars/src/components/CategoryBtns/categorybtns.css
View File

19
kivi-cars/src/components/CategoryBtns/categorybtns.js
View File

@@ -1,19 +0,0 @@
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

58
kivi-cars/src/components/Filters.css
View File

@@ -1,59 +1,3 @@
@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%;
}
}

13
kivi-cars/src/components/Filters.js
View File

@@ -11,16 +11,7 @@ const Filters = () => {
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>
@@ -32,8 +23,6 @@ const Filters = () => {
<div className="container-advanced">
</div>
</div>
)
}

26
kivi-cars/src/components/Header/Header.css
View File

@@ -1,26 +0,0 @@
header {
width: 100%;
height: 70px;
background-color: #02adba;
color: #fff;
text-align: center;
margin-bottom: 10px;
}
.title {
resize: both;
padding: 20px;
font-size: 25px;
}
@media screen and (max-width: 700px) {
.title {
font-size: 20px;
}
}
@media screen and (max-width: 300px) {
.title {
font-size: 17px;
}
}

12
kivi-cars/src/components/Header/Header.js
View File

@@ -1,12 +0,0 @@
import './Header.css'
const Header = (props) => {
return (
<header>
<h3 className="title">{props.header}</h3>
</header>
)
}
export default Header

18
kivi-cars/src/components/Info/Info.css Normal file
View File

@@ -0,0 +1,18 @@
nav {
width: 100%;
min-width: 280px;
background-color: #02adba;
color: #fff;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 26px;
}
@media only screen and (max-width: 600px){
nav {
height: 54px;
line-height: 54px;
font-size: 22px;
}
}

12
kivi-cars/src/components/Info/Info.js Normal file
View File

@@ -0,0 +1,12 @@
import './Info.css'
const Info = (props) => {
return (
<nav>
<h3 className="title">{props.info}</h3>
</nav>
)
}
export default Info

53
kivi-cars/src/components/Searchfilters/FiltersNav.css Normal file
View File

@@ -0,0 +1,53 @@
*{
margin: 0;
padding: 0;
}
/* color:#02adba */
.filters-container ul li {
display: inline-block;
}
.active {
border-bottom: 3px solid #02adba;
}
.filters-container{
background-color: #fff;
}
.filters-links{
display: flex;
justify-content: space-around;
padding: 1em;
box-sizing: border-box;
text-align: center;
}
.filters{
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 {
line-height: 54px;
font-size: 22px;
}
}
@media only screen and (min-width: 921px){
.filters {
line-height: 54px;
font-size: 24px;
}
.filters-links {
width: 90%;
margin: auto;
}
}

20
kivi-cars/src/components/Searchfilters/FiltersNav.js Normal file
View File

@@ -0,0 +1,20 @@
import './FiltersNav.css';
const FiltersNav = () => {
return(
<div className="filters-container">
<ul className="filters-links">
<li className="filters active">
<a id="standard-filters">Filteri</a>
</li>
<li className="filters">
<a id="advanced-filters">Napredni filteri</a>
</li>
</ul>
</div>
)
}
export default FiltersNav;

4
kivi-cars/src/containers/App.css
View File

@@ -7,4 +7,8 @@
.App{
display: flex;
flex-direction: column;
}
p, h1, h2, h3 ,h4 {
font-family: Arial, Helvetica, sans-serif;
}

17
kivi-cars/src/containers/App.js
View File

@@ -1,20 +1,17 @@
import './App.css';
import React from 'react';
import Filters from '../components/Filters';
import Header from '../components/Header/Header';
import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
import CategoryBtns from '../components/CategoryBtns/categorybtns'
import FiltersNav from '../components/Searchfilters/FiltersNav';
import Info from '../components/Info/Info';
function App() {
const naslov = 'Dobrodosli na stranicu kivi!'
let info = 'Filteri za pretrazivanje'
return (
<div className="App">
<Header header={naslov}/>
<ButtonsToolbar/>
<CategoryBtns/>
<Info info={info}/>
<FiltersNav />
</div>
);