Skip to content

Commit

Permalink
working on browse page
Browse files Browse the repository at this point in the history
  • Loading branch information
andreiggr committed Apr 22, 2020
1 parent 1218f46 commit 8138cc6
Show file tree
Hide file tree
Showing 6 changed files with 251 additions and 36 deletions.
63 changes: 63 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{
"extends": "./node_modules/@plone/volto/.eslintrc",
"settings": {
"import/resolver": {
"alias": {
"map": [
[
"@plone/volto",
"@plone/volto/src"
],
[
"@package",
"./src"
],
[
"~",
"./src"
],
[
"volto-mosaic",
"./src/develop/volto-mosaic/src"
],
[
"volto-datablocks",
"./src/develop/volto-datablocks/src"
],
[
"volto-addons",
"./src/develop/volto-addons/src"
],
[
"volto-ckeditor",
"./src/develop/volto-ckeditor/src"
],
[
"volto-blocks",
"./src/develop/volto-blocks/src"
],
[
"volto-drafteditor",
"./src/develop/volto-drafteditor/src"
],
[
"volto-base",
"./src/develop/volto-base/src"
],
[
"volto-plotlycharts",
"./src/develop/volto-plotlycharts/src"
],
[
"volto-embed",
"./src/develop/volto-embed/src"
],
[
"volto-sidebar",
"./src/develop/volto-sidebar/src"
]
]
}
}
}
}
58 changes: 29 additions & 29 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
{
"addons": [
"volto-addons",
"volto-blocks",
"volto-ckeditor",
"volto-corsproxy",
"volto-datablocks",
"volto-drafteditor",
"volto-mosaic",
"volto-plotlycharts",
"volto-addons",
"volto-blocks",
"volto-ckeditor",
"volto-corsproxy",
"volto-datablocks",
"volto-drafteditor",
"volto-mosaic",
"volto-plotlycharts",
"volto-sidebar"
],
],
"compilerOptions": {
"baseUrl": "src",
"baseUrl": "src",
"paths": {
"volto-mosaic": [
"develop/volto-mosaic/src"
],
"volto-datablocks": [
"develop/volto-datablocks/src"
],
"volto-blocks": [
"develop/volto-blocks/src"
],
"volto-addons": [
"develop/volto-addons/src"
],
],
"volto-base": [
"develop/volto-base/src"
],
"volto-blocks": [
"develop/volto-blocks/src"
],
"volto-ckeditor": [
"develop/volto-ckeditor/src"
],
],
"volto-datablocks": [
"develop/volto-datablocks/src"
],
"volto-drafteditor": [
"develop/volto-drafteditor/src"
],
],
"volto-embed": [
"develop/volto-embed/src"
],
"volto-mosaic": [
"develop/volto-mosaic/src"
],
"volto-plotlycharts": [
"develop/volto-plotlycharts/src"
],
],
"volto-sidebar": [
"develop/volto-sidebar/src"
],
"volto-base": [
"develop/volto-base/src"
],
"volto-embed": [
"develop/volto-embed/src"
]
}
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"mr-developer": "^1.4.0",
"mrs-developer": "^1.1.4",
"mrs-developer": "^1.1.6",
"postcss-overrides": "3.1.4",
"prettier": "1.17.0",
"prettier-eslint": "^9.0.0",
Expand Down
79 changes: 79 additions & 0 deletions src/components/theme/View/BrowseView.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/**
* 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 } from 'semantic-ui-react';

class BrowseView extends Component {
constructor(props) {
super(props);
this.state = {
tabs: null,
};
}

render() {
return (
<div className="browse-area">
<Grid>
<Grid.Row centered verticalAlign="middle">
<button className="view-button">
VIEW YOUR AREA
</button>
<p className="browse-text">or</p>
<Input className="browse-input" icon='search' iconPosition='left' placeholder='Try searching for a facility name, country, city, region or ZIP code' />
</Grid.Row>
<Grid.Row centered>
<div>
<button className="browse-button red-selected">MAP</button>
<button className="browse-button red">TABLE</button>
</div>
<div>
<button className="browse-button red-selected">ADVANCED FILTERING OPTIONS</button>
<button className="browse-button blue">SEARCH</button>
</div>
</Grid.Row>
<Grid.Row>
<div style={{ padding: "10px", width: "100%", position: 'relative' }}>
<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 style={{
position: "absolute",
top: "10px",
background: "white",
left: "10%",
height: "100%",
width: "250px",
padding: "10px 40px",
}}>
<Grid.Column>
<p>Dynamic filter
</p>
<p>Reporting year</p>
</Grid.Column>
</div>
</div>
</Grid.Row>
</Grid>
</div>
)
}
}

export default compose(
injectIntl,
connect((state, props) => ({
pathname: props.location.pathname,
})),
)(BrowseView);
7 changes: 7 additions & 0 deletions src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +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';

/**
* Routes array.
Expand All @@ -19,6 +20,12 @@ const routes = [
component: App, // Change this if you want a different component
routes: [
// Add your routes here
{
path: '/browse',
component: BrowseView,
},


// {
// path: '/',
// component: HomepageView,
Expand Down
78 changes: 72 additions & 6 deletions theme/themes/pastanaga/globals/site.overrides
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,85 @@


.footerWrapper {
background-color: @primaryColor !important;
color : white;
background-color: @primaryColor !important;
color: white;

.unlist {
margin : 0;
margin: 0;
list-style-type: none;
text-decoration: underline;
font-weight : bold;
font-weight: bold;
}

a {
color : white;
color: white;
text-decoration: underline;
font-weight : bold;
font-weight: bold;
}
}

.browse-area {

.browse-input {
width: 35%;
margin-left: 20px;

input {
background: #EDEDED !important;
border-radius: 20px !important;
border: none !important;
padding: 13.5px;
font-size: 16px;
}

i {
font-size: 30px;
color: #33536B;
left: -15px !important;
}
}

.view-button {
background: white;
border: 1px solid #333333;
border-radius: 30px;
margin-right: 20px;
padding: 10px 30px;
font-size: 13px;
color: #989898;
cursor: pointer;
}

.browse-text {
margin: 0;
align-self: center;
color: #B2B2B2
}

.browse-button {
border-radius: 30px;
padding: 10px 30px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
border: none;

}

.red-selected {
background-color: #D63D28;
color: white;
}

.red {
background-color: white;
color: #D63D28;
font-weight: normal;
}

.blue {
background-color: #33536B;
color: white;
}

}

0 comments on commit 8138cc6

Please sign in to comment.