add filter_navigation

add info.js

See merge request saburly/marketalarm/kivi-za-auta-react!5

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",

kivi-cars/src/components/Filters.css

@@ -1,83 +1,3 @@
-*{
-    margin: 0;
-    padding: 0;
-}
-
-nav {
-    width: 100%;
-    background-color: #02adba;
-    color: #fff;
-    height: 54px;
-    line-height: 54px;
-    text-align: center;
-}
 
 
-@media only screen and (min-width: 601px) {
-    nav {
-        text-align: center;
-        width: 100%;
-        background-color: #02adba;
-        color: #fff;
-        height: 64px;
-        line-height: 64px;
-    }
-
-    .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%;
-    }
-
-}
-
 

kivi-cars/src/components/Filters.js

@@ -10,21 +10,8 @@ const Filters = () => {
 
 
     return(
-        <div>
-            <nav>
-                <h3 className="title">Filteri za pretrazivanje</h3>
-            </nav>
             <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>
@@ -36,9 +23,6 @@ const Filters = () => {
                 <div className="container-advanced">
                     
                 </div>
-            </div>
-
-
         </div>
     )
 }

kivi-cars/src/components/Info/Info.css

@@ -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;
+    }
+}

kivi-cars/src/components/Info/Info.js

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

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;
+    }
+}

kivi-cars/src/components/Searchfilters/FiltersNav.js

@@ -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;

kivi-cars/src/containers/App.css

@@ -1,4 +1,14 @@
+*{
+  padding: 0;
+  margin: 0;
+}
+
+
 .App{
   display: flex;
   flex-direction: column;
+}
+
+p, h1, h2, h3 ,h4 {
+  font-family: Arial, Helvetica, sans-serif;
 }

kivi-cars/src/containers/App.js

@@ -1,12 +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() {
+
+  let info = 'Filteri za pretrazivanje'
+
   return (
     <div className="App">
-      <Filters />
+      <Info info={info}/>
+      <FiltersNav />
     </div>
  
   );