From 8138cc6a666d2c2b276efe3877cc6e3acdb6f156 Mon Sep 17 00:00:00 2001
From: Your Name <andrei.ggr@gmail.com>
Date: Wed, 22 Apr 2020 21:32:02 +0300
Subject: [PATCH] working on browse page

---
 .eslintrc                                     | 63 +++++++++++++++
 jsconfig.json                                 | 58 +++++++-------
 package.json                                  |  2 +-
 src/components/theme/View/BrowseView.jsx      | 79 +++++++++++++++++++
 src/routes.js                                 |  7 ++
 theme/themes/pastanaga/globals/site.overrides | 78 ++++++++++++++++--
 6 files changed, 251 insertions(+), 36 deletions(-)
 create mode 100644 .eslintrc
 create mode 100644 src/components/theme/View/BrowseView.jsx

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..f5c858df
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,63 @@
+{
+    "extends": "./node_modules/@plone/volto/.eslintrc", 
+    "settings": {
+        "import/resolver": {
+            "alias": {
+                "map": [
+                    [
+                        "@plone/volto", 
+                        "@plone/volto/src"
+                    ], 
+                    [
+                        "@package", 
+                        "./src"
+                    ], 
+                    [
+                        "~", 
+                        "./src"
+                    ], 
+                    [
+                        "volto-mosaic", 
+                        "./src/develop/volto-mosaic/src"
+                    ], 
+                    [
+                        "volto-datablocks", 
+                        "./src/develop/volto-datablocks/src"
+                    ], 
+                    [
+                        "volto-addons", 
+                        "./src/develop/volto-addons/src"
+                    ], 
+                    [
+                        "volto-ckeditor", 
+                        "./src/develop/volto-ckeditor/src"
+                    ], 
+                    [
+                        "volto-blocks", 
+                        "./src/develop/volto-blocks/src"
+                    ], 
+                    [
+                        "volto-drafteditor", 
+                        "./src/develop/volto-drafteditor/src"
+                    ], 
+                    [
+                        "volto-base", 
+                        "./src/develop/volto-base/src"
+                    ], 
+                    [
+                        "volto-plotlycharts", 
+                        "./src/develop/volto-plotlycharts/src"
+                    ], 
+                    [
+                        "volto-embed", 
+                        "./src/develop/volto-embed/src"
+                    ], 
+                    [
+                        "volto-sidebar", 
+                        "./src/develop/volto-sidebar/src"
+                    ]
+                ]
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
index 231dd654..be3f3abe 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,47 +1,47 @@
 {
     "addons": [
-        "volto-addons",
-        "volto-blocks",
-        "volto-ckeditor",
-        "volto-corsproxy",
-        "volto-datablocks",
-        "volto-drafteditor",
-        "volto-mosaic",
-        "volto-plotlycharts",
+        "volto-addons", 
+        "volto-blocks", 
+        "volto-ckeditor", 
+        "volto-corsproxy", 
+        "volto-datablocks", 
+        "volto-drafteditor", 
+        "volto-mosaic", 
+        "volto-plotlycharts", 
         "volto-sidebar"
-    ],
+    ], 
     "compilerOptions": {
-        "baseUrl": "src",
+        "baseUrl": "src", 
         "paths": {
-            "volto-mosaic": [
-                "develop/volto-mosaic/src"
-            ],
-            "volto-datablocks": [
-                "develop/volto-datablocks/src"
-            ],
-            "volto-blocks": [
-                "develop/volto-blocks/src"
-            ],
             "volto-addons": [
                 "develop/volto-addons/src"
-            ],
+            ], 
+            "volto-base": [
+                "develop/volto-base/src"
+            ], 
+            "volto-blocks": [
+                "develop/volto-blocks/src"
+            ], 
             "volto-ckeditor": [
                 "develop/volto-ckeditor/src"
-            ],
+            ], 
+            "volto-datablocks": [
+                "develop/volto-datablocks/src"
+            ], 
             "volto-drafteditor": [
                 "develop/volto-drafteditor/src"
-            ],
+            ], 
+            "volto-embed": [
+                "develop/volto-embed/src"
+            ], 
+            "volto-mosaic": [
+                "develop/volto-mosaic/src"
+            ], 
             "volto-plotlycharts": [
                 "develop/volto-plotlycharts/src"
-            ],
+            ], 
             "volto-sidebar": [
                 "develop/volto-sidebar/src"
-            ],
-            "volto-base": [
-                "develop/volto-base/src"
-            ],
-            "volto-embed": [
-                "develop/volto-embed/src"
             ]
         }
     }
diff --git a/package.json b/package.json
index 078ee8e4..da8585c9 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
     "mr-developer": "^1.4.0",
-    "mrs-developer": "^1.1.4",
+    "mrs-developer": "^1.1.6",
     "postcss-overrides": "3.1.4",
     "prettier": "1.17.0",
     "prettier-eslint": "^9.0.0",
diff --git a/src/components/theme/View/BrowseView.jsx b/src/components/theme/View/BrowseView.jsx
new file mode 100644
index 00000000..fb971667
--- /dev/null
+++ b/src/components/theme/View/BrowseView.jsx
@@ -0,0 +1,79 @@
+/**
+ * Document view component.
+ * @module components/theme/View/DefaultView
+ */
+
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { Grid, Button, Input } from 'semantic-ui-react';
+
+class BrowseView extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tabs: null,
+        };
+    }
+
+    render() {
+        return (
+            <div className="browse-area">
+            <Grid>
+                <Grid.Row centered verticalAlign="middle">
+                    <button className="view-button">
+                        VIEW YOUR AREA
+                        </button>
+                    <p className="browse-text">or</p>
+                    <Input className="browse-input" icon='search' iconPosition='left' placeholder='Try searching for a facility name, country, city, region or ZIP code' />
+                </Grid.Row>
+                <Grid.Row centered>
+                    <div>
+                        <button className="browse-button red-selected">MAP</button>
+                        <button className="browse-button red">TABLE</button>
+                    </div>
+                    <div>
+                        <button className="browse-button red-selected">ADVANCED FILTERING OPTIONS</button>
+                        <button className="browse-button blue">SEARCH</button>
+                    </div>
+                </Grid.Row>
+                <Grid.Row>
+                    <div style={{ padding: "10px", width: "100%", position: 'relative' }}>
+                        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d252073.50646166946!2d24.240267324149645!3d45.730190540367225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sro!4v1587553242878!5m2!1sen!2sro"
+                            width="100%"
+                            height="900"
+                            frameborder="0"
+                            //  style="border:0;" 
+                            allowfullscreen="false"
+                            aria-hidden="false"
+                            tabindex="0"></iframe>
+                        <div style={{
+                            position: "absolute",
+                            top: "10px",
+                            background: "white",
+                            left: "10%",
+                            height: "100%",
+                            width: "250px",
+                            padding: "10px 40px",
+                        }}>
+                            <Grid.Column>
+                                <p>Dynamic filter
+                                </p>
+                                <p>Reporting year</p>
+                            </Grid.Column>
+                        </div>
+                    </div>
+                </Grid.Row>
+            </Grid>
+            </div>
+        )
+    }
+}
+
+export default compose(
+    injectIntl,
+    connect((state, props) => ({
+        pathname: props.location.pathname,
+    })),
+)(BrowseView);
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
index 410d108f..1e9903f1 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -7,6 +7,7 @@ import { App } from '@plone/volto/components';
 import { defaultRoutes } from '@plone/volto/routes';
 
 import { addonRoutes } from '~/config';
+import BrowseView from '~/components/theme/View/BrowseView';
 
 /**
  * Routes array.
@@ -19,6 +20,12 @@ const routes = [
     component: App, // Change this if you want a different component
     routes: [
       // Add your routes here
+      {
+        path: '/browse',
+        component: BrowseView,
+      },
+
+
       // {
       //   path: '/',
       //   component: HomepageView,
diff --git a/theme/themes/pastanaga/globals/site.overrides b/theme/themes/pastanaga/globals/site.overrides
index 6d829879..666657fe 100644
--- a/theme/themes/pastanaga/globals/site.overrides
+++ b/theme/themes/pastanaga/globals/site.overrides
@@ -4,19 +4,85 @@
 
 
 .footerWrapper {
-  background-color: @primaryColor !important;
-  color           : white;
+  background-color: @primaryColor  !important;
+  color: white;
 
   .unlist {
-    margin         : 0;
+    margin: 0;
     list-style-type: none;
     text-decoration: underline;
-    font-weight    : bold;
+    font-weight: bold;
   }
 
   a {
-    color          : white;
+    color: white;
     text-decoration: underline;
-    font-weight    : bold;
+    font-weight: bold;
   }
+}
+
+.browse-area {
+
+  .browse-input {
+    width: 35%;
+    margin-left: 20px;
+
+    input {
+      background: #EDEDED !important;
+      border-radius: 20px !important;
+      border: none !important;
+      padding: 13.5px;
+      font-size: 16px;
+    }
+
+    i {
+      font-size: 30px;
+      color: #33536B;
+      left: -15px !important;
+    }
+  }
+
+  .view-button {
+    background: white;
+    border: 1px solid #333333;
+    border-radius: 30px;
+    margin-right: 20px;
+    padding: 10px 30px;
+    font-size: 13px;
+    color: #989898;
+    cursor: pointer;
+  }
+
+  .browse-text {
+    margin: 0;
+    align-self: center;
+    color: #B2B2B2
+  }
+
+  .browse-button {
+    border-radius: 30px;
+    padding: 10px 30px;
+    font-size: 15px;
+    font-weight: bold;
+    cursor: pointer;
+    border: none;
+
+  }
+
+  .red-selected {
+    background-color: #D63D28;
+    color: white;
+  }
+
+  .red {
+    background-color: white;
+    color: #D63D28;
+    font-weight: normal;
+  }
+
+  .blue {
+    background-color: #33536B;
+    color: white;
+  }
+
 }
\ No newline at end of file