diff --git a/kivi-cars/package.json b/kivi-cars/package.json index 41156a5..1e76ff2 100644 --- a/kivi-cars/package.json +++ b/kivi-cars/package.json @@ -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", diff --git a/kivi-cars/src/components/Filters.css b/kivi-cars/src/components/Filters.css index 6e02fe6..b28b04f 100644 --- a/kivi-cars/src/components/Filters.css +++ b/kivi-cars/src/components/Filters.css @@ -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%; - } - -} + diff --git a/kivi-cars/src/components/Filters.js b/kivi-cars/src/components/Filters.js index 7c4dd6b..ed9c829 100644 --- a/kivi-cars/src/components/Filters.js +++ b/kivi-cars/src/components/Filters.js @@ -11,16 +11,7 @@ const Filters = () => { return(
-
- -
+
@@ -32,8 +23,6 @@ const Filters = () => {
- -
) } diff --git a/kivi-cars/src/components/Info/Info.css b/kivi-cars/src/components/Info/Info.css index 1cef691..290f48b 100644 --- a/kivi-cars/src/components/Info/Info.css +++ b/kivi-cars/src/components/Info/Info.css @@ -3,8 +3,16 @@ nav { min-width: 280px; background-color: #02adba; color: #fff; - height: 54px; - line-height: 54px; + 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; + } +} diff --git a/kivi-cars/src/components/Searchfilters/FiltersNav.css b/kivi-cars/src/components/Searchfilters/FiltersNav.css new file mode 100644 index 0000000..0690c31 --- /dev/null +++ b/kivi-cars/src/components/Searchfilters/FiltersNav.css @@ -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; + } +} \ No newline at end of file diff --git a/kivi-cars/src/components/Searchfilters/FiltersNav.js b/kivi-cars/src/components/Searchfilters/FiltersNav.js new file mode 100644 index 0000000..58e1ba1 --- /dev/null +++ b/kivi-cars/src/components/Searchfilters/FiltersNav.js @@ -0,0 +1,20 @@ +import './FiltersNav.css'; + +const FiltersNav = () => { + + + return( +
+ +
+ ) +} + +export default FiltersNav; \ No newline at end of file diff --git a/kivi-cars/src/containers/App.css b/kivi-cars/src/containers/App.css index 9b46f2c..4732e07 100644 --- a/kivi-cars/src/containers/App.css +++ b/kivi-cars/src/containers/App.css @@ -7,4 +7,8 @@ .App{ display: flex; flex-direction: column; +} + +p, h1, h2, h3 ,h4 { + font-family: Arial, Helvetica, sans-serif; } \ No newline at end of file diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js index db4ad40..4d7a595 100644 --- a/kivi-cars/src/containers/App.js +++ b/kivi-cars/src/containers/App.js @@ -1,16 +1,17 @@ import './App.css'; import React from 'react'; -import Filters from '../components/Filters'; +import FiltersNav from '../components/Searchfilters/FiltersNav'; import Info from '../components/Info/Info'; function App() { - const info = 'Dobrodosli' + let info = 'Filteri za pretrazivanje' return (
+
);