-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
install grid layout, company header block
- Loading branch information
1 parent
915e8ae
commit 5fbf979
Showing
9 changed files
with
1,372 additions
and
971 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import _uniqueId from 'lodash/uniqueId'; | ||
| import DefaultEdit from '../DefaultEdit'; | ||
| import View from './View'; | ||
| import { connect } from 'react-redux'; | ||
| import { compose } from 'redux'; | ||
| import { settings } from '~/config'; | ||
|
|
||
| const schema = { | ||
| provider_url: { | ||
| title: 'Provider url', | ||
| type: 'text', | ||
| default: '', | ||
| }, | ||
| sql_select: { | ||
| type: 'sql', | ||
| }, | ||
| data_query: { | ||
| iTitle: 'Where column', | ||
| vTitle: 'Is equal to', | ||
| type: 'data-query', | ||
| }, | ||
| }; | ||
|
|
||
| const Edit = props => { | ||
| const [state] = useState({ | ||
| id: _uniqueId('block_'), | ||
| }); | ||
| useEffect(() => { | ||
| schema.provider_url.default = settings.providerUrl; | ||
| }, []); | ||
| return ( | ||
| <div> | ||
| <DefaultEdit schema={schema} {...props} title="Facility block" /> | ||
| <View {...props} id={state.id} /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default compose( | ||
| connect((state, props) => ({ | ||
| connected_data_parameters: state.connected_data_parameters, | ||
| pathname: state.router.location.pathname, | ||
| })), | ||
| )(Edit); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React, { useState } from 'react'; | ||
| import DB from '~/components/manage/DataBase/DB'; | ||
|
|
||
| import DefaultView from '../DefaultView'; | ||
|
|
||
| import moment from 'moment'; | ||
| import './style.css'; | ||
|
|
||
| // STATIC DATA | ||
| // ================== | ||
| const facility = { | ||
| companyName: 'Test company', | ||
| Address: 'Nord-Ovest, Lombardia, Brescia', | ||
| countryCode: 'IT', | ||
| 'Site Inspire ID': '2', | ||
| Country: "Austria", | ||
| Regulation: 'regulatoryType', | ||
| Website: 'test-website.com', | ||
| riverBasin: 'RBD PADANO', | ||
| 'Facility Main Activity': | ||
| 'Thermal power stations and other combustion installations', | ||
| nationalId: '250452007.SITE', | ||
| OrganizationName: 'ISPRA', | ||
| ContactMail: 'protocollo.ispra@ispra.legalmail.it', | ||
| 'Auth Address': 'ISPRA Via Vitaliano Brancati 48 Roma 00144', | ||
| ContactPerson: 'ISPRA', | ||
| authLastUpdated: '2018-05-15T06:37:00', | ||
| eprtrReportingDate: '2020-05-15T06:37:00', | ||
| eprtrReportingYear: 2020, | ||
| 'Facility inspire ID': '2007000854', | ||
| }; | ||
| const metadata = [ | ||
| { label: 'Name', id: 'companyName' }, | ||
| { label: 'Address', id: 'Address' }, | ||
| { label: 'Country', id: 'Country' }, | ||
| { label: 'Regulation', id: 'Regulation' }, | ||
| { label: 'Website', id: 'Website' }, | ||
| ]; | ||
| // ================== | ||
|
|
||
| const View = props => { | ||
| const [state, setState] = useState({ | ||
| onChange: newState => { | ||
| setState({ ...state, ...newState }); | ||
| }, | ||
| }); | ||
| const view = ( | ||
| <div className="facility-block-wrapper"> | ||
| <div className="flex flex-row align-center space-between responsive"> | ||
| <div className="flex flex-column"> | ||
| <h1 className="mb-0 bold light-blue">{facility.companyName}</h1> | ||
| <p>{facility.mainActivity}</p> | ||
| </div> | ||
| </div> | ||
| <div className="mt-2 flex flex-row space-between responsive metadata"> | ||
| {metadata.map(meta => | ||
| facility[meta.id] ? ( | ||
| <div> | ||
| <p className="bold mb-0">{meta.label}</p> | ||
| <p className="info dark">{facility[meta.id]}</p> | ||
| </div> | ||
| ) : meta.default ? ( | ||
| <div> | ||
| <p className="bold mb-0">{meta.label}</p> | ||
| <p className="info dark">{meta.default}</p> | ||
| </div> | ||
| ) : ( | ||
| '' | ||
| ), | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| return view; | ||
| // return ( | ||
| // <DefaultView | ||
| // {...props} | ||
| // schema={schema} | ||
| // view={view} | ||
| // onChange={state.onChange} | ||
| // /> | ||
| // ); | ||
| }; | ||
|
|
||
| export default View; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| /* DISPLAY */ | ||
| .flex { | ||
| display: flex; | ||
| } | ||
| .grid { | ||
| display: grid; | ||
| grid-gap: 20px; | ||
| } | ||
| .display-block { | ||
| display: block; | ||
| } | ||
| /* GRID LAYOUT */ | ||
| div.grid-cl-3 { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| } | ||
| div.grid-cl-2 { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| /* FLEX FLOW */ | ||
| div.flex-row { | ||
| flex-flow: row; | ||
| } | ||
| div.flex-column { | ||
| flex-flow: column; | ||
| } | ||
| /* ALIGN ITEMS */ | ||
| div.align-center { | ||
| align-items: center; | ||
| } | ||
| /* JUSTIFY CONTENT */ | ||
| div.space-between { | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| div.banner { | ||
| background: #4296B2; | ||
| color: #fff; | ||
| padding: 0 1rem; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| div.banner p { | ||
| color: #fff; | ||
| } | ||
|
|
||
| .light-blue { | ||
| color: #4296B2; | ||
| } | ||
|
|
||
| div.flex-item { | ||
| margin: 1rem; | ||
| } | ||
| /* PARAGRAPH */ | ||
| p.bold { | ||
| font-weight: bold; | ||
| } | ||
| p.lighter { | ||
| font-weight: 300; | ||
| } | ||
| p.info { | ||
| color: #989898; | ||
| font-weight: 300; | ||
| font-size: 14px; | ||
| } | ||
| p.dark { | ||
| color: #333333; | ||
| } | ||
| /* MARGINS */ | ||
| .mt-0 { | ||
| margin-top: 0; | ||
| } | ||
| .mt-1 { | ||
| margin-top: 1rem; | ||
| } | ||
| .mt-2 { | ||
| margin-top: 2rem; | ||
| } | ||
| .mb-0 { | ||
| margin-bottom: 0; | ||
| } | ||
| .mb-1 { | ||
| margin-bottom: 1rem; | ||
| } | ||
| .mb-2 { | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| .bat-container { | ||
| border: 1px solid #606060; | ||
| padding: 16px; | ||
| border-radius: 10px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .bat-container div.hr { | ||
| height: 1px; | ||
| background-color: #606060; | ||
| } | ||
|
|
||
| .bat-container a, | ||
| .bat-container a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| @media(max-width: 768px) { | ||
| div.responsive.flex { | ||
| flex-flow: column; | ||
| } | ||
| div.responsive.flex > * { | ||
| width: 100%; | ||
| margin-bottom: 26px; | ||
| } | ||
| div.responsive.grid.grid-cl-3 { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.