Skip to content

Commit

Permalink
Merge pull request #1 from eea/article_list
Browse files Browse the repository at this point in the history
Added ArticleList
  • Loading branch information
mihai-macaneata authored Apr 15, 2020
2 parents 4c6173b + 9dde6f9 commit 5a192b1
Show file tree
Hide file tree
Showing 7 changed files with 289 additions and 12 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"
]
]
}
}
}
}
75 changes: 75 additions & 0 deletions src/components/manage/Blocks/ArticlesList/Edit.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import React, { Component } from 'react';
import { injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import articles from './articles.json'
import { Grid} from 'semantic-ui-react';

const items = articles.items

class Edit extends Component {
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
static propTypes = {
selected: PropTypes.bool.isRequired,
block: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
data: PropTypes.objectOf(PropTypes.any).isRequired,
pathname: PropTypes.string.isRequired,
onChangeBlock: PropTypes.func.isRequired,
onSelectBlock: PropTypes.func.isRequired,
onDeleteBlock: PropTypes.func.isRequired,
onFocusPreviousBlock: PropTypes.func.isRequired,
onFocusNextBlock: PropTypes.func.isRequired,
};

constructor(props) {
super(props);
this.state = {
list: items
};
}


componentDidMount() {
this.onChangeData()
}

onChangeData() {
this.props.onChangeBlock(this.props.block, {
...this.props.data,
list: this.state.list,
});
}




render() {
return (
<Grid columns={1}>
<Grid.Column>
{items &&
items.map(item =>
<div className="article-list-row">
<img className="article-img" src={item.imgUrl} />
<Grid.Column>
<p className="article-title">
{item.title}</p>
<p class="article-date">{item.date}</p>
<p className="article-description">{item.description}</p>
<a className="read-article" target="_blank" href={item.url}>
READ ARTICLE
</a>
</Grid.Column>
</div>)
}
</Grid.Column>
</Grid>
);
}
}

export default injectIntl(Edit);
47 changes: 47 additions & 0 deletions src/components/manage/Blocks/ArticlesList/View.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/**
* Edit map block.
* @module components/manage/Blocks/Maps/Edit
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-intl';
import { Grid } from 'semantic-ui-react';

class View extends Component {
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
static propTypes = {
data: PropTypes.objectOf(PropTypes.any).isRequired,
// pathname: PropTypes.string.isRequired,
};

render() {
return (
<Grid columns={1}>
<Grid.Column>
{this.props.data.list &&
this.props.data.list.map(item =>
<div className="article-list-row">
<img className="article-img" src={item.imgUrl} />
<Grid.Column>
<p className="article-title">
{item.title}</p>
<p class="article-date">{item.date}</p>
<p className="article-description">{item.description}</p>
<a className="read-article" target="_blank" href={item.url}>
READ ARTICLE
</a>
</Grid.Column>
</div>)
}
</Grid.Column>
</Grid>
);
}
}

export default injectIntl(View);
20 changes: 20 additions & 0 deletions src/components/manage/Blocks/ArticlesList/articles.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"items": [
{
"id": 0,
"title": "title no 1",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"date": "3.9.2019",
"imgUrl": "https://readreidread.files.wordpress.com/2011/09/yellow_tree1.jpg?w=998&h=624",
"url": "http://google.com"
},
{
"id": 1,
"title": "title no 2",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"date": "5.10.2019",
"imgUrl": "https://www.mountainphotographer.com/wp-content/uploads/2010/11/201011_freiburgYellowTree.jpg",
"url": "http://google.com"
}
]
}
Binary file added src/components/manage/Blocks/ArticlesList/tux.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/localconfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import DetailedLinkEdit from '~/components/manage/Blocks/DetailedLink/Edit';
import FolderContentsBlockView from '~/components/manage/Blocks/FolderContentsBlock/View';
import FolderContentsBlockEdit from '~/components/manage/Blocks/FolderContentsBlock/Edit';

import ArticlesListView from '~/components/manage/Blocks/ArticlesList/View';
import ArticlesListEdit from '~/components/manage/Blocks/ArticlesList/Edit';

const applyConfig = config => {
console.log('config', config)
config.views = {
Expand Down Expand Up @@ -43,6 +46,15 @@ console.log('config', config)
edit: FolderContentsBlockEdit,
icon: config.blocks.blocksConfig.text.icon,
};

config.blocks.blocksConfig.articles_list = {
id: 'articles_list',
group: 'custom_addons',
title: 'Articles List',
view: ArticlesListView,
edit: ArticlesListEdit,
icon: config.blocks.blocksConfig.text.icon,
};
return config;
}

Expand Down
84 changes: 72 additions & 12 deletions theme/themes/pastanaga/globals/site.overrides
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@


.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;
}
}

Expand All @@ -30,18 +30,21 @@
background-color: #f6f6f6;
padding: 3rem;
}

.page-document-sidebar {
width: 30%;
background-color: #7c7c7c;
display: flex;
min-height: 100vh;

.tabs {
flex-direction: column;
margin-left: auto;
display: inline-flex;
position: relative;
margin-right: 1rem;
margin-top: 2rem;

a {
color: white;
font-size: 1.2rem;
Expand All @@ -53,6 +56,7 @@
.tabs.section-tabs {
display: flex;
justify-content: center;

a {
color: #3f3f3f;
font-size: 1.2rem;
Expand All @@ -68,9 +72,10 @@

h1.documentFirstHeading {
font-size: 36px;
border-bottom: none!important;
border-bottom: none !important;

&:before {
display: none!important;
display: none !important;
}
}

Expand All @@ -87,7 +92,7 @@ h1.documentFirstHeading {
max-width: 800px;
margin: 0 auto;
flex-direction: column;
}
}


.detailed-link-block-item-title {
Expand All @@ -107,15 +112,70 @@ h1.documentFirstHeading {
.detailed-link-block {
button {
max-width: 200px;
border-radius: 30px!important;
line-height: 2!important;
text-align: center!important;
border-radius: 30px !important;
line-height: 2 !important;
text-align: center !important;
border-width: 1px;
font-weight: 100;
}

p {
color: #444;
font-size: 16px;
position: relative;
}
}

.article-list-row {
display: flex;
margin-bottom: 20px;

@media only screen and (max-width: 500px) {
flex-wrap: wrap;
margin-bottom: 40px
}


.article-img {
width: 200px;
border-radius: 20px;
margin-right: 25px;

@media only screen and (max-width: 500px) {
width: 90%;
}
}



.article-title {
color: #ED776A;
font-weight: 500;
font-size: 20px;
margin-top: 10px;
margin-bottom: 0;
}

.article-date {
font-size: 12px;
color: grey;
margin-bottom: 5px;
margin-top: 5px;
}

.read-article {
border: 1px solid #33536B;
padding: 5px 30px;
border-radius: 20px;
}

.article-description {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* number of lines to show */
-webkit-box-orient: vertical;
margin-bottom: 20px;
}
}

0 comments on commit 5a192b1

Please sign in to comment.