Skip to content

Commit

Permalink
refactoring and mobile breakpoints
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreiggr
andreiggr committed Apr 24, 2020
1 parent 03b3dd0 commit e235957
Show file tree
Hide file tree
Showing 8 changed files with 378 additions and 200 deletions.
195 changes: 0 additions & 195 deletions src/components/theme/View/BrowseView.jsx
View file

This file was deleted.

68 changes: 68 additions & 0 deletions src/components/theme/View/BrowseView/BrowseMap.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<React.Fragment>
<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 className="search-map-menu">
<Grid.Column>
<p className="menu-title">Dynamic filter
</p>
<p className="menu-label">Reporting year</p>
<Dropdown
fluid
selection
value="All reporting years"
options={options}
/>
<p className="menu-label">Industrial sites in this area</p>
{sites.map((item, index) =>
<Grid.Row>
<Radio
key={index}
label={item.label}
value={item.value}
className="menu-radio"
checked={checkedSite.value === item.value}
onChange={() => setCheckedSite(item)}
/>
</Grid.Row>
)}
<p className="menu-title">Quick facts</p>
{
quickFacts.map(fact =>
<div className="quick-fact-card">
<p className="menu-label">{fact.title}</p>
<p className="card-content">{fact.reportingSites} reporting sites</p>
<p className="card-content">Most common industry: {fact.commonIndustry} industry</p>
<p className="card-content">Most common pollutant: {fact.commonPollutant}</p>
</div>
)
}

</Grid.Column>
</div>
<button className="map-modal-button" onClick={() => setMapModal(tableItems[0])}>Map Detail</button>
{
mapModal &&
<MapModal mapModal={mapModal} onClose={() => setMapModal(undefined)} />
}
</React.Fragment>
);
}

export default BrowseMap;
76 changes: 76 additions & 0 deletions src/components/theme/View/BrowseView/BrowseTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Grid centered>
<Grid.Row>
<div className="table-head">
<p style={{ width: "25.5%" }} className="table-title"> Facility </p>
<p style={{ width: "15%" }} className="table-title"> Postal Code </p>
<p style={{ width: "15%" }} className="table-title"> Address </p>
<p style={{ width: "15%" }} className="table-title"> Town/Village </p>
<p style={{ width: "15%" }} className="table-title"> Activity </p>
<p style={{ width: "15%" }} className="table-title"> Country </p>
</div>
</Grid.Row>
{tableItems.map(item =>
<React.Fragment>
<Grid.Row>
<div className="table-row">
<p style={{ width: "25%" }} className="table-content"> {item.facility} </p>
<p style={{ width: "15%" }} className="table-content"> {item.postal} </p>
<p style={{ width: "15%" }} className="table-content"> {item.adress} </p>
<p style={{ width: "15%" }} className="table-content"> {item.city} </p>
<p style={{ width: "15%" }} className="table-content"> {item.activity} </p>
<div style={{ width: "15%", display: 'flex' }}>
<p className="table-content"> {item.Country} </p>
<a style={{ cursor: "pointer" }} onClick={() => setSelectedItem(item)}>
<Icon color="red" name={downSVG} size="3em" />
</a>
</div>
</div>
</Grid.Row>
{selectedItem && selectedItem.id === item.id &&
<Grid.Row style={{paddingBottom: "50px"}} stretched width={8}>
<Grid.Column stretched={false} computer={2} mobile={8} tablet={8}>
<p className="details-title">Facility Contents</p>
{item.facilityContents &&
item.facilityContents.map(content =>
<a className="details-link" href={content.url}>{content.title}</a>
)
}
</Grid.Column>
<Grid.Column stretched={false} computer={2} mobile={8} tablet={8}>
<p className="details-title">Pollutant emissions</p>
{item.pollutantEmissions &&
item.pollutantEmissions.map(pollutants =>
<p className="details-content">{pollutants}</p>
)
}
</Grid.Column>
<Grid.Column stretched={false} computer={2} mobile={8} tablet={8}>
<p className="details-title">Regulatory information</p>
<p className="details-content">Operating since: {item.regulatoryInformation.operatingSince}</p>
<p className="details-content">Last operating permit issued: {item.regulatoryInformation.lastPermit}</p>
<p className="details-content">Last inspection: {item.regulatoryInformation.lastInspection}</p>
</Grid.Column>
<Grid.Column stretched={false} computer={2} mobile={8} tablet={8} >
<button className="details-button"> VIEW FACILITY DETAIL </button>
</Grid.Column>

</Grid.Row>
}
</React.Fragment>
)}
</Grid>
);
}

export default BrowseTable;
Loading

0 comments on commit e235957

Please sign in to comment.