styles cleanup & fixes

eea · May 12, 2020 · 507f2af · 507f2af
1 parent 2c22e28
commit 507f2af
Show file tree

Hide file tree

Showing 7 changed files with 653 additions and 531 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/theme/View/BrowseView/BrowseTable.jsx b/src/components/theme/View/BrowseView/BrowseTable.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Grid } from 'semantic-ui-react';
 import downSVG from '@plone/volto/icons/down-key.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
 import { Icon } from '@plone/volto/components';
 import { tableItems } from './browseConstants';
 
@@ -9,6 +10,7 @@ const BrowseTable = () => {
     const [selectedItem, setSelectedItem] = useState()
 
     return (
+        <div className="browse-table">
             <Grid centered>
                 <Grid.Row>
                     <div className="table-head">
@@ -32,13 +34,13 @@ const BrowseTable = () => {
                                 <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" />
+                                        <Icon color="red" name={selectedItem && selectedItem.id === item.id ? downSVG : rightSVG} size="3em" />
                                     </a>
                                 </div>
                             </div>
                         </Grid.Row>
                         {selectedItem && selectedItem.id === item.id &&
-                            <Grid.Row style={{paddingBottom: "50px"}} stretched width={8}>
+                            <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 &&
@@ -54,12 +56,14 @@ const BrowseTable = () => {
                                             <p className="details-content">{pollutants}</p>
                                         )
                                     }
+                                    <a className="details-link" href={'google.com'}>15 more...</a>
                                 </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>
+                                    <a className="details-link" href={'google.com'}>Find out more</a>
                                 </Grid.Column>
                                 <Grid.Column stretched={false} computer={2} mobile={8} tablet={8} >
                                     <button className="details-button"> VIEW FACILITY DETAIL </button>
@@ -70,6 +74,7 @@ const BrowseTable = () => {
                     </React.Fragment>
                 )}
             </Grid>
+        </div>
     );
 }
 

diff --git a/src/components/theme/View/BrowseView/BrowseView.jsx b/src/components/theme/View/BrowseView/BrowseView.jsx
@@ -7,7 +7,7 @@ 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 { Grid, Input } from 'semantic-ui-react';
 import BrowseTable from './BrowseTable';
 import BrowseMap from './BrowseMap';
 
@@ -31,6 +31,12 @@ class BrowseView extends Component {
 
         return (
             <div className="browse-area">
+                <div className="header-bar">
+                    <div className="header-wrapper">
+                        <p className="bar-item selected">Industrial emissions</p>
+                        <p className="bar-item">Diffuse emissions</p>
+                    </div>
+                </div>
                 <Grid>
                     <Grid.Row centered verticalAlign="middle">
                         <button className="view-button">

diff --git a/src/components/theme/View/BrowseView/MapModal.jsx b/src/components/theme/View/BrowseView/MapModal.jsx
@@ -16,13 +16,14 @@ const MapModal = ({onClose, mapModal}) => {
             <Grid.Column stretched>
 
                 <Grid.Row>
-                    <p className="modal-label">Facility Contents</p>
+                    <p className="modal-label">Site Contents</p>
                     <div style={{ display: 'flex', flexDirection: "column" }}>
                         {mapModal.facilityContents &&
                             mapModal.facilityContents.map(content =>
                                 <a className="details-link" href={content.url}>{content.title}</a>
                             )
                         }
+
                     </div>
                 </Grid.Row>
                 <Grid.Row>
@@ -32,12 +33,14 @@ const MapModal = ({onClose, mapModal}) => {
                             <p className="details-content">{pollutants}</p>
                         )
                     }
+                    <a className="details-link" href={'google.com'}>15 more...</a>
                 </Grid.Row>
                 <Grid.Row>
                     <p className="modal-label">Regulatory information</p>
                     <p className="details-content">Operating since: {mapModal.regulatoryInformation.operatingSince}</p>
                     <p className="details-content">Last operating permit issued: {mapModal.regulatoryInformation.lastPermit}</p>
                     <p className="details-content">Last inspection: {mapModal.regulatoryInformation.lastInspection}</p>
+                    <a className="details-link" href={'google.com'}>Find out more</a>
                 </Grid.Row>
                 <div style={{ display: "flex", justifyContent: "center" }}>
                     <button className="details-button"> VIEW SITE DETAIL </button>