From e235957af7d0c7482e336477aacc7ae1225e0a8c Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 24 Apr 2020 18:50:12 +0300 Subject: [PATCH] refactoring and mobile breakpoints --- src/components/theme/View/BrowseView.jsx | 195 ------------------ .../theme/View/BrowseView/BrowseMap.jsx | 68 ++++++ .../theme/View/BrowseView/BrowseTable.jsx | 76 +++++++ .../theme/View/BrowseView/BrowseView.jsx | 73 +++++++ .../theme/View/BrowseView/MapModal.jsx | 51 +++++ .../View/{ => BrowseView}/browseConstants.js | 0 src/routes.js | 2 +- theme/themes/pastanaga/globals/site.overrides | 113 +++++++++- 8 files changed, 378 insertions(+), 200 deletions(-) delete mode 100644 src/components/theme/View/BrowseView.jsx create mode 100644 src/components/theme/View/BrowseView/BrowseMap.jsx create mode 100644 src/components/theme/View/BrowseView/BrowseTable.jsx create mode 100644 src/components/theme/View/BrowseView/BrowseView.jsx create mode 100644 src/components/theme/View/BrowseView/MapModal.jsx rename src/components/theme/View/{ => BrowseView}/browseConstants.js (100%) 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}

+
+

{item.Country}

+ setSelectedItem(item)}> + + +
+
+ + {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