diff --git a/src/components/theme/View/BrowseView.jsx b/src/components/theme/View/BrowseView.jsx
deleted file mode 100644
index de2f33ff..00000000
--- a/src/components/theme/View/BrowseView.jsx
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * 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, Dropdown, Radio } from 'semantic-ui-react';
-import downSVG from '@plone/volto/icons/down-key.svg';
-import { Icon } from '@plone/volto/components';
-import { options, sites, quickFacts, tableItems } from './browseConstants';
-
-class BrowseView extends Component {
- constructor(props) {
- super(props);
- this.state = {
- selectedTab: 'map',
- checkedSite: {
- label: "Show All",
- value: "all"
- },
- selectedTableItem: undefined
- };
- }
-
- handleSelector(selectedTab) {
- if (selectedTab === 'map') { this.setState({ selectedTab }) }
- if (selectedTab === 'table') { this.setState({ selectedTab }) }
- }
-
- handleSelectSite(site) {
- this.setState({ checkedSite: site })
- }
-
- handleContentDetail(item) {
- console.log(item)
- this.setState({ selectedTableItem: item })
- }
-
- render() {
- const isMap = this.state.selectedTab === 'map';
-
-
- return (
-
-
-
-
- or
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {isMap &&
-
-
-
-
- Dynamic filter
-
- Reporting year
-
- Industrial sites in this area
- {sites.map((item, index) =>
-
- this.handleSelectSite(item)}
- />
-
- )}
- Quick facts
- {
- quickFacts.map(fact =>
-
-
{fact.title}
-
{fact.reportingSites} reporting sites
-
Most common industry: {fact.commonIndustry} industry
-
Most common pollutant: {fact.commonPollutant}
-
- )
- }
-
-
-
-
- }
- {!isMap &&
-
-
-
-
Facility
-
Postal Code
-
Address
-
Town/Village
-
Activity
-
Country
-
-
- {tableItems.map(item =>
-
-
-
-
{item.facility}
-
{item.postal}
-
{item.adress}
-
{item.city}
-
{item.activity}
-
-
-
- {this.state.selectedTableItem && this.state.selectedTableItem.id === item.id &&
-
-
-
- Facility Contents
- {item.facilityContents &&
- item.facilityContents.map(content =>
- {content.title}
- )
- }
-
-
- Pollutant emissions
- {item.pollutantEmissions &&
- item.pollutantEmissions.map(pollutants =>
- {pollutants}
- )
- }
-
-
- Regulatory information
- Operating since: {item.regulatoryInformation.operatingSince}
- Last operating permit issued: {item.regulatoryInformation.lastPermit}
- Last inspection: {item.regulatoryInformation.lastInspection}
-
-
-
-
-
-
- }
-
- )}
-
- }
-
-
-
-
- )
- }
-}
-
-export default compose(
- injectIntl,
- connect((state, props) => ({
- pathname: props.location.pathname,
- })),
-)(BrowseView);
\ No newline at end of file
diff --git a/src/components/theme/View/BrowseView/BrowseMap.jsx b/src/components/theme/View/BrowseView/BrowseMap.jsx
new file mode 100644
index 00000000..fefc3997
--- /dev/null
+++ b/src/components/theme/View/BrowseView/BrowseMap.jsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Grid, Dropdown, Radio } from 'semantic-ui-react';
+import { options, sites, quickFacts, tableItems } from './browseConstants';
+import MapModal from './MapModal';
+
+const BrowseMap = () => {
+
+ const [mapModal, setMapModal] = useState(undefined);
+ const [checkedSite, setCheckedSite] = useState({label: "Show All",value: "all"})
+
+ return (
+
+
+
+
+ Dynamic filter
+
+ Reporting year
+
+ Industrial sites in this area
+ {sites.map((item, index) =>
+
+ setCheckedSite(item)}
+ />
+
+ )}
+ Quick facts
+ {
+ quickFacts.map(fact =>
+
+
{fact.title}
+
{fact.reportingSites} reporting sites
+
Most common industry: {fact.commonIndustry} industry
+
Most common pollutant: {fact.commonPollutant}
+
+ )
+ }
+
+
+
+
+ {
+ mapModal &&
+ setMapModal(undefined)} />
+ }
+
+ );
+}
+
+export default BrowseMap;
\ No newline at end of file
diff --git a/src/components/theme/View/BrowseView/BrowseTable.jsx b/src/components/theme/View/BrowseView/BrowseTable.jsx
new file mode 100644
index 00000000..9d118036
--- /dev/null
+++ b/src/components/theme/View/BrowseView/BrowseTable.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Grid } from 'semantic-ui-react';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import { Icon } from '@plone/volto/components';
+import { tableItems } from './browseConstants';
+
+const BrowseTable = () => {
+
+ const [selectedItem, setSelectedItem] = useState()
+
+ return (
+
+
+
+
Facility
+
Postal Code
+
Address
+
Town/Village
+
Activity
+
Country
+
+
+ {tableItems.map(item =>
+
+
+
+
{item.facility}
+
{item.postal}
+
{item.adress}
+
{item.city}
+
{item.activity}
+
+
+
+ {selectedItem && selectedItem.id === item.id &&
+
+
+ Facility Contents
+ {item.facilityContents &&
+ item.facilityContents.map(content =>
+ {content.title}
+ )
+ }
+
+
+ Pollutant emissions
+ {item.pollutantEmissions &&
+ item.pollutantEmissions.map(pollutants =>
+ {pollutants}
+ )
+ }
+
+
+ Regulatory information
+ Operating since: {item.regulatoryInformation.operatingSince}
+ Last operating permit issued: {item.regulatoryInformation.lastPermit}
+ Last inspection: {item.regulatoryInformation.lastInspection}
+
+
+
+
+
+
+ }
+
+ )}
+
+ );
+}
+
+export default BrowseTable;
\ No newline at end of file
diff --git a/src/components/theme/View/BrowseView/BrowseView.jsx b/src/components/theme/View/BrowseView/BrowseView.jsx
new file mode 100644
index 00000000..96c823bf
--- /dev/null
+++ b/src/components/theme/View/BrowseView/BrowseView.jsx
@@ -0,0 +1,73 @@
+/**
+ * Document view component.
+ * @module components/theme/View/DefaultView
+ */
+
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { Grid, Input} from 'semantic-ui-react';
+import BrowseTable from './BrowseTable';
+import BrowseMap from './BrowseMap';
+
+class BrowseView extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ selectedTab: 'map',
+ };
+ }
+
+ handleSelector(selectedTab) {
+ if (selectedTab === 'map') { this.setState({ selectedTab }) }
+ if (selectedTab === 'table') { this.setState({ selectedTab }) }
+ }
+
+ render() {
+ const { selectedTab } = this.state;
+
+ const isMap = selectedTab === 'map';
+
+ return (
+
+
+
+
+ or
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isMap &&
+
+ }
+ {!isMap &&
+
+ }
+
+
+
+
+ )
+ }
+}
+
+export default compose(
+ injectIntl,
+ connect((state, props) => ({
+ pathname: props.location.pathname,
+ })),
+)(BrowseView);
\ No newline at end of file
diff --git a/src/components/theme/View/BrowseView/MapModal.jsx b/src/components/theme/View/BrowseView/MapModal.jsx
new file mode 100644
index 00000000..b8a5c0ac
--- /dev/null
+++ b/src/components/theme/View/BrowseView/MapModal.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import { Icon } from '@plone/volto/components';
+import { Grid } from 'semantic-ui-react';
+
+const MapModal = ({onClose, mapModal}) => {
+ return (
+
+
+
Parent company name
+
onClose()} color="red" name={clearSVG} size="2em" />
+
+
Chemical industry
+
Address 1, Address 2
+
+
+
+
+ Facility Contents
+
+ {mapModal.facilityContents &&
+ mapModal.facilityContents.map(content =>
+
{content.title}
+ )
+ }
+
+
+
+ Pollutant emissions
+ {mapModal.pollutantEmissions &&
+ mapModal.pollutantEmissions.map(pollutants =>
+ {pollutants}
+ )
+ }
+
+
+ Regulatory information
+ Operating since: {mapModal.regulatoryInformation.operatingSince}
+ Last operating permit issued: {mapModal.regulatoryInformation.lastPermit}
+ Last inspection: {mapModal.regulatoryInformation.lastInspection}
+
+
+
+
+
+
+
+ );
+}
+
+export default MapModal;
\ No newline at end of file
diff --git a/src/components/theme/View/browseConstants.js b/src/components/theme/View/BrowseView/browseConstants.js
similarity index 100%
rename from src/components/theme/View/browseConstants.js
rename to src/components/theme/View/BrowseView/browseConstants.js
diff --git a/src/routes.js b/src/routes.js
index 1e9903f1..8010f116 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -7,7 +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';
+import BrowseView from '~/components/theme/View/BrowseView/BrowseView';
/**
* Routes array.
diff --git a/theme/themes/pastanaga/globals/site.overrides b/theme/themes/pastanaga/globals/site.overrides
index 769a60ab..645ce8a9 100644
--- a/theme/themes/pastanaga/globals/site.overrides
+++ b/theme/themes/pastanaga/globals/site.overrides
@@ -28,6 +28,12 @@
margin-left: 20px;
height: 50px;
+ @media only screen and (max-width: 460px) {
+ width: 80%;
+ margin-left: 0;
+ margin-top: 20px;
+ }
+
input {
background: #EDEDED !important;
border-radius: 30px !important;
@@ -95,12 +101,25 @@
background-color: #33536B;
color: white;
padding: 10px 30px;
+
+ @media only screen and (max-width: 540px) {
+ width: 300px;
+ margin-top: 10px;
+ height: 50px;
+ }
}
.spaced-row {
width: 50%;
display: flex;
justify-content: space-between;
+
+ @media only screen and (max-width: 680px) {
+ width: 80%;
+ flex-wrap: wrap;
+ margin-top: 30px;
+ justify-content: center;
+ }
}
.centered-selector-row {
@@ -109,15 +128,78 @@
align-items: center;
margin-left: 15px;
margin-right: 80px;
+
+ @media only screen and (max-width: 460px) {
+ justify-content: space-between;
+ margin-bottom: 20px;
+ margin-left: 0;
+ margin-right: 0;
+ }
}
+ .browse-content-area {
+ width: 100%;
+ position: relative;
+ margin-bottom: -33px;
+ }
+
+ .map-modal-button {
+ position: absolute;
+ top: 30px;
+ right: 30px;
+ padding: 10px;
+ background: white;
+ border: none;
+ color: dodgerblue;
+ }
+
+ .map-modal {
+ padding: 15px 45px;
+ background-color: white;
+ position: absolute;
+ top: 20%;
+ left: 50%;
+ border: 2px solid #33536B;
+
+ @media only screen and (max-width: 1000px) {
+ left: 5%;
+ }
+
+ .modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 400px;
+
+ @media only screen and (max-width: 540px) {
+ width: 100%;
+ }
+ }
+
+ .modal-title {
+ font-size: 20px;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ color: #4296B2;
+ font-weight: 600;
+ }
+
+ .modal-label {
+ font-size: 15px;
+ font-weight: 600;
+ margin-top: 15px;
+ margin-bottom: 5px;
+ color: #4296B2;
+ }
+ }
.search-map-menu {
position: absolute;
- top: 10px;
+ margin-bottom: 33px;
background: white;
+ top: 0;
left: 15%;
- height: 100%;
+ height: 99.5%;
width: 300px;
padding: 10px 40px;
@@ -166,12 +248,20 @@
border-bottom: 1px solid grey;
width: 65%;
justify-content: space-between;
+
+ @media only screen and (max-width: 700px) {
+ width: 85%;
+ }
}
.table-row {
display: flex;
width: 65%;
justify-content: space-between;
+
+ @media only screen and (max-width: 700px) {
+ width: 85%;
+ }
}
.table-title {
@@ -196,14 +286,29 @@
font-size: 14px;
margin: 0;
padding: 0;
+
+ }
+
+ .details-link {
+ font-size: 14px;
+ margin: 0;
+ padding: 0;
+ color: #ED7669;
+ text-decoration: underline #ED7669;
}
.details-title {
font-size: 14px;
font-weight: bold;
+
+ @media only screen and (max-width: 1000px) {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
}
.details-button {
+ margin-top: 35px;
border-radius: 30px;
font-size: 15px;
font-weight: bold;
@@ -212,7 +317,7 @@
outline: none;
background-color: #33536B;
color: white;
- padding: 10px 50px;
- flex-grow: unset!important;
+ padding: 15px 50px;
+ flex-grow: unset !important;
}
}
\ No newline at end of file