Commit 11f43ac1 authored by Matija Obreza's avatar Matija Obreza

Merge branch '242-entry-page' into 'master'

Entry page

Closes #242

See merge request genesys-pgr/genesys-ui!295
parents 076a804b c5d0e25c
......@@ -22,7 +22,13 @@
"suggestion3": "'IRGC 1000' maybe",
"suggestion4": "Try 'leaf shape'",
"suggestion5": "Anything on 'cassava'?",
"suggestion6": "Maybe 'drought'"
"suggestion6": "Maybe 'drought'",
"scope": {
"accessions": "Accessions",
"datasets": "Datasets",
"subsets": "Subsets",
"descriptors": "Descriptors"
}
}
}
},
......@@ -884,6 +890,9 @@
"shareArticle": "Share this article",
"tweet": "Tweet!",
"shareLinkedin": "Share on LinkedIn"
},
"activityPostCard": {
"labelBy": "By {{who}}"
}
}
},
......
......@@ -73,6 +73,9 @@
"shareArticle": "Share this article",
"tweet": "Tweet!",
"shareLinkedin": "Share on LinkedIn"
},
"activityPostCard": {
"labelBy": "By {{who}}"
}
}
},
......
......@@ -16,37 +16,54 @@ import IGridSizes from 'ui/common/GridSizes';
const style = (theme) => ({
header: {
borderBottom: '0 !important',
paddingTop: '0.714rem !important',
paddingBottom: '0.714rem !important',
},
headerWithContent: {
paddingBottom: '0 !important',
compactHeader: {
borderBottom: '0 !important',
},
/*tslint:disable*/
headerWrapper: {
display: 'flex' as 'flex',
flexDirection: 'row' as 'row',
},
titleText: {
fontSize: '16px',
fontWeight: 500,
'& > p': {
marginBottom: 0,
},
},
compactText: {
fontSize: '16px',
},
text: {
color: 'black',
fontSize: '20px',
},
title: {
fontSize: '1.286rem',
fontWeight: 'bold' as 'bold',
color: 'black',
marginBottom: '1rem',
},
avatar: {
margin: '1.143rem 0 0 1.429rem',
backgroundColor: '#2B2924',
fontSize: '1rem',
fontWeight: 'bold' as 'bold',
},
avatarRtl: {
'html[dir="rtl"] &' : {
margin: '1.143rem 1.429rem 0 0',
marginRight: 0,
marginLeft: '16px',
},
},
ltr: {
modified: {
color: '#9C9C9C',
},
postBody: {
direction: 'ltr' as 'ltr',
fontSize: '0.93rem',
lineHeight: 1.54,
'& a': {
color: '##0B6EB5',
'&:hover': {
textDecoration: 'underline' as 'underline',
}
}
}
/*tslint:enable*/
});
......@@ -57,24 +74,21 @@ const ActivityPostCard = ({classes, className, post, compact, edit, t, ...gridSi
return (
<Grid item { ...gridSizes }>
<Card className={ className }>
<div className={ classes.headerWrapper }>
{ !compact &&
<Avatar className={ classes.avatar }>{ post.lastModifiedBy[0].toUpperCase() }</Avatar>
}
{ compact ? (
<CardHeader
className={ `${classes.header} ${!compact && classes.headerWithContent}` }
className={ classes.compactHeader }
title={
edit ? (
<ActivityPostLink to={ post } edit>
<div
className={ `${classes.titleText} ${compact ? classes.compactText : classes.text}` }
className={ classes.titleText }
dangerouslySetInnerHTML={ {__html: post.title} }
/>
</ActivityPostLink>
) : (
<Link to={ `/content/news/${post.id}/${urlTitle}` }>
<div
className={ `${classes.titleText} ${compact ? classes.compactText : classes.text}` }
className={ classes.titleText }
dangerouslySetInnerHTML={ {__html: post.title} }
/>
</Link>
......@@ -87,11 +101,32 @@ const ActivityPostCard = ({classes, className, post, compact, edit, t, ...gridSi
</span>
}
/>
</div>
) : (
<CardHeader
className={ `${classes.header}` }
avatar={
<Avatar className={ classes.avatar }>{ post.lastModifiedBy[0].toUpperCase() }</Avatar>
}
subheader={
<div className={ classes.modified }>
{ `${t('cms.public.c.activityPostCard.labelBy', {who: post.lastModifiedBy})} ` }
<br/>
<PrettyDate value={ new Date(post.lastModifiedDate) }/>
</div>
}
classes={ { avatar: classes.avatarRtl } }
/>
) }
{ !compact &&
<CardContent className="pb-10">
<div dangerouslySetInnerHTML={ {__html: post.body} } className={ classes.ltr }/>
</CardContent>
<CardContent className="pb-10">
<Link to={ `/content/news/${post.id}/${urlTitle}` }>
<div
className={ classes.title }
dangerouslySetInnerHTML={ {__html: post.title} }
/>
</Link>
<div dangerouslySetInnerHTML={ {__html: post.body} } className={ classes.postBody }/>
</CardContent>
}
</Card>
</Grid>
......@@ -99,5 +134,3 @@ const ActivityPostCard = ({classes, className, post, compact, edit, t, ...gridSi
};
export default translate()(withStyles(style)(ActivityPostCard));
......@@ -48,6 +48,9 @@ const style = (theme) => ({
right: 0,
margin: 'auto' as 'auto',
},
title: {
fontSize: '1.286rem !important',
},
});
const CropImage_ = ({classes, crop, repositoryThumbnailUrl}: { classes: any, crop: CropDetails, repositoryThumbnailUrl: any}) => {
......@@ -108,7 +111,9 @@ const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: {
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
<Card className={ classes.root }>
<CropImage classes={ classes } crop={ crop } />
<CardHeader title={ crop.name } />
<CardHeader
classes={ { title: classes.title } }
title={ crop.name } />
</Card>
</Link>
</Grid>
......
......@@ -90,6 +90,7 @@ export const updateRoute = (paged: FilteredPage<DescriptorList>) => (dispatch) =
export const applyFilters = (filters: string | DescriptorListFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
console.log('Applying new filter', filters, page);
dispatch(navigateTo('/descriptorlists'));
dispatch(showSnackbar('Applying filters...'));
return dispatch(apiListDescriptorLists(filters, page))
.then((paged) => {
......
......@@ -50,8 +50,8 @@ const styles = (theme) => ({
/* tslint:enable */
},
descriptorCard: {
paddingTop: '83px',
marginTop: '-83px',
paddingTop: '80px',
marginTop: '-80px',
},
cardsContainer: {
'html[dir="ltr"] &': {
......
......@@ -22,7 +22,13 @@
"suggestion3": "'IRGC 1000' maybe",
"suggestion4": "Try 'leaf shape'",
"suggestion5": "Anything on 'cassava'?",
"suggestion6": "Maybe 'drought'"
"suggestion6": "Maybe 'drought'",
"scope": {
"accessions": "Accessions",
"datasets": "Datasets",
"subsets": "Subsets",
"descriptors": "Descriptors"
}
}
}
},
......
......@@ -17,8 +17,8 @@ const styles = (theme) => ({
});
/*tslint:enable*/
const SectionHeader = ({ title, subTitle = null, classes }: { title: any, subTitle?: any, classes: any }) => (
<div className={ classes.root }>
const SectionHeader = ({ title, subTitle = null, classes, className = null }: { title: any, subTitle?: any, classes: any, className?: string }) => (
<div className={ `${classes.root} ${className}` }>
<h2>{ title }</h2>
{ subTitle && <p>{ subTitle }</p> }
</div>
......
......@@ -7,7 +7,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
const styles = (theme) => ({
/*tslint:disable*/
root: {
backgroundColor: 'grey',
backgroundColor: '#6B6A66',
borderRadius: '50%',
marginLeft: '10px',
display: 'inline-flex',
......
......@@ -35,7 +35,7 @@ const styles = {
},
},
linkLogin: {
fontSize: '16px',
fontSize: '1.14rem',
color: '#ffffff',
cursor: 'pointer',
'&:hover': {
......
......@@ -19,7 +19,7 @@ const styles = (theme) => ({
content: {
flexGrow: 1,
display: 'flex' as 'flex',
minHeight: 'calc(100vh - 83px)',
minHeight: 'calc(100vh - 80px)',
flexDirection: 'column' as 'column',
maxWidth: '100%',
[theme.breakpoints.down('md')]: {
......
......@@ -12,13 +12,13 @@ const style = (theme) => ({
position: 'relative' as 'relative',
overflowX: 'visible' as 'visible',
boxSizing: 'border-box' as 'border-box',
borderTop: 'solid 4px transparent',
borderBottom: 'solid 4px transparent',
borderTop: 'solid 6px transparent',
borderBottom: 'solid 6px transparent',
transition: 'all 0.1s',
},
hover: {
backgroundColor: 'rgba(0, 0, 0, 0.07)', // '#eeede7',
borderBottom: 'solid 4px #929292',
borderBottom: 'solid 6px #86b842',
},
menuLink: {
width: 'auto' as 'auto',
......@@ -36,7 +36,7 @@ const style = (theme) => ({
color: 'black',
},
linkLabel: {
fontSize: '1.25rem',
fontSize: '1.14rem',
fontWeight: 'bold' as 'bold',
},
action: {
......@@ -72,11 +72,11 @@ const style = (theme) => ({
},
collapsed: {
minWidth: '100%',
marginTop: '4px',
marginTop: '6px',
position: 'absolute' as 'absolute'
},
active: {
borderBottom: 'solid 4px #5a9d32',
borderBottom: 'solid 6px #86b842',
},
activeSub: {
backgroundColor: 'rgba(0, 0, 0, 0.245)!important', // '#c3c0b0',
......
......@@ -39,7 +39,7 @@ const styleSheet = (theme) => ({
},
blockHeader: {
padding: '0',
height: '83px',
height: '80px',
[theme.breakpoints.down('md')]: {
alignItems: 'normal' as 'normal',
height: '3.5rem',
......@@ -51,7 +51,6 @@ const styleSheet = (theme) => ({
flexDirection: 'row' as 'row',
alignItems: 'center' as 'center',
justifyContent: 'space-between' as 'space-between',
borderBottom: 'solid #999488 3px',
boxSizing: 'border-box' as 'border-box',
[theme.breakpoints.down('md')]: {
height: '3.5rem',
......@@ -109,7 +108,6 @@ const styleSheet = (theme) => ({
}
},
menuWrapper: {
borderBottom: 'solid #999488 3px',
backgroundColor: '#88B941',
width: '3.6rem',
height: '3.5rem',
......@@ -126,7 +124,6 @@ const styleSheet = (theme) => ({
justifyContent: 'space-between' as 'space-between',
alignItems: 'center' as 'center',
height: '100%',
borderBottom: 'solid #999488 3px',
boxSizing: 'border-box' as 'border-box',
'html[dir="ltr"] &' : {
paddingLeft: '120px',
......@@ -160,7 +157,7 @@ const styleSheet = (theme) => ({
},
},
headerMargin: {
marginBottom: '83px',
marginBottom: '80px',
[theme.breakpoints.down('md')]: {
marginBottom: '49px',
},
......
......@@ -13,7 +13,7 @@ export const white = {
};
export const black = {
appBar: 'rgb(43, 41, 36)',
appBar: '#2B2924',
appIcon: 'white',
appText: 'white',
iconButton: 'secondary',
......
......@@ -58,8 +58,8 @@ const styles = (theme) => ({
zIndex: 1250,
},
drawerHeightV2: {
top: '83px',
height: 'calc(100vh - 83px)',
top: '80px',
height: 'calc(100vh - 80px)',
[theme.breakpoints.down('md')]: {
height: 'calc(100vh - 3.5rem)',
top: '3.5rem',
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment