Commit 0c6cc2b1 authored by Matija Obreza's avatar Matija Obreza
Browse files

Small UI fixes

parent 712ecd1d
......@@ -58,7 +58,7 @@ class DescriptorFilterForm extends React.Component<IDescriptorFilterFormProps, a
</form>
<div className="pt-20 pb-20 pl-20">
<Button raised onClick={ handleSubmit } className={ classes.btnGreen }>Submit</Button>
<Button raised onClick={ handleSubmit } className={ classes.btnGreen }>Apply</Button>
<Button onClick={ reset } className={ classes.btnReset }>Reset</Button>
</div>
</div>
......
......@@ -170,6 +170,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
{ currentDescriptors.length > 0 && currentDescriptors.map((descriptor: Descriptor) => (
<DescriptorCard
key={ descriptor.uuid }
className="m-20"
descriptor={ descriptor }
compact
textLength={ 100 }
......
......@@ -31,10 +31,10 @@ const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem }) =
{ fields && fields.map((member, index, fields) => (
<div key={ index } className="items-editor-item">
<Grid container justify="space-between" alignItems="flex-end">
<Grid item xs={ 10 } md={ 11 }>
<Grid item xs={ 10 } lg={ 11 }>
{ itemEditor(member, index, fields, itemLabel) }
</Grid>
<Grid item xs={ 2 } md={ 1 }>
<Grid item xs={ 2 } lg={ 1 }>
<Button type="button" onClick={ onRemoveMember(member, index) }>Remove</Button>
</Grid>
</Grid>
......
......@@ -28,7 +28,7 @@ const FiltersBlock = ({ title, children, handleSubmit, initialize, classes }) =>
<form onSubmit={ handleSubmit }>
{ children }
<div className="pt-20 pb-20 pl-20">
<Button raised onClick={ handleSubmit } type="submit" className={ classes.btnGreen }>Submit</Button>
<Button raised onClick={ handleSubmit } type="submit" className={ classes.btnGreen }>Apply filters</Button>
<Button onClick={ onReset } type="button" className={ classes.btnReset }>Reset</Button>
</div>
</form>
......
......@@ -25,6 +25,7 @@ import Hidden from 'material-ui/Hidden';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemText } from 'material-ui/List';
import AccessionIdentifiersList from 'ui/common/dataset/AccessionIdentifiersList';
......@@ -199,10 +200,9 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className="p-20">
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ (
<span><Markdown basic source={ dataset.title } /> <small>{ dataset.version }</small></span>
) } />
<Divider />
<CardHeader className={ classes.cardHeader }
title={ <Markdown basic source={ dataset.title } /> }
subheader={ <small>{ dataset.versionTag }</small> } />
<CardContent className={ classes.cardContent }>
{ dataset.description && <Markdown source={ dataset.description } /> }
</CardContent>
......@@ -227,22 +227,77 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className="p-20">
<Section title="Dataset metadata">
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">License</h4>
<h4 className="font-bold m-0">Creators</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Properties>
<PropertiesItem title="Type:">
<div className="blue">
{ license && <a href={ license.url } target="_blank">{ license.title }</a> }
</div>
</PropertiesItem>
</Properties>
<Grid item xs={ 12 }>
{ dataset.creators && dataset.creators.map((e: Creator, i) => (
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<h3 className={ `font-bold ${classes.margin1} ${classes.gray} ${classes.grayTitleSmall}` }>
{ `${e.fullName}` }
</h3>
</Grid>
<Grid item xs={ 12 } md={ 4 } className={ `${classes.margin1} ${classes.gray}` }>
<a href={ `mailto:${e.email}` }
className={ `${classes.grayTitleA}` }>
{ e.email }
</a>
</Grid>
<Grid item xs={ 12 } md={ 5 } className={ `${classes.margin1} ${classes.gray}` }>
<p className={ `${classes.grayTitleSmall} ${classes.pdTop0}` }>
{ e.institutionalAffiliation }
</p>
</Grid>
</Grid>
))
}
</Grid>
</Grid>
<Divider/>
{ dataset.locations &&
<div>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Locations
</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
<Grid container spacing={ 0 } className={ classes.dataContainer }>
<Grid item xs={ 12 }>
<h3 className={ `${classes.gray} ${classes.grayTitleSmall}` }>
{ dataset.locations.map((location: Location) => <LocationMap location={ location } key={ location.id }/>) }
</h3>
</Grid>
</Grid>
</Grid>
</Grid>
<Divider/>
</div>
}
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Dataset use and licensing</h4>
</div>
<Divider/>
{ license &&
<Grid container spacing={ 0 } className="p-20">
<Properties>
<PropertiesItem title="Licensed under:"><b>{ license.code }</b> { license.title }</PropertiesItem>
{ license.url &&
<PropertiesItem title="More information:">
<a href={ license.url } target="_blank">{ license.url }</a>
</PropertiesItem>
}
</Properties>
</Grid>
}
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Data and Resources
Data and resources
</h4>
</div>
<Divider/>
......@@ -253,7 +308,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsEven}` }>
<Grid item xs={ 3 } className={ `${classes.dataName}` }>
<h3 className={ `${classes.gray} ${classes.grayTitleBig}` }>
{ e.title || e.originalFilename }
{ e.title || 'Dataset file' }
</h3>
</Grid>
<Grid item xs={ 12 } md={ 12 } lg={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.centerAlign}` }>
......@@ -298,54 +353,6 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Creators</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
{ dataset.creators && dataset.creators.map((e: Creator, i) => (
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<h3 className={ `font-bold ${classes.margin1} ${classes.gray} ${classes.grayTitleSmall}` }>
{ `${e.fullName}` }
</h3>
</Grid>
<Grid item xs={ 12 } md={ 4 } className={ `${classes.margin1} ${classes.gray}` }>
<a href={ `mailto:${e.email}` }
className={ `${classes.grayTitleA}` }>
{ e.email }
</a>
</Grid>
<Grid item xs={ 12 } md={ 5 } className={ `${classes.margin1} ${classes.gray}` }>
<p className={ `${classes.grayTitleSmall} ${classes.pdTop0}` }>
{ e.institutionalAffiliation }
</p>
</Grid>
</Grid>
))
}
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Location
</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
<Grid container spacing={ 0 } className={ classes.dataContainer }>
<Grid item xs={ 12 }>
<h3 className={ `${classes.gray} ${classes.grayTitleSmall}` }>
{ dataset.locations && dataset.locations.map((location: Location) => <LocationMap location={ location } key={ location.id }/>) }
</h3>
</Grid>
</Grid>
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Other Metadata
......@@ -375,12 +382,14 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
{ dataset.descriptors && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-20">
<Section title="Traits observed">
<List>
{ dataset.descriptors.map((descriptor: Descriptor) => (
<div key={ descriptor.uuid } className="p-20">
<DescriptorLink to={ descriptor } />
{ descriptor.description && <Markdown source={ descriptor.description }/> }
</div>
<ListItem key={ descriptor.uuid } className="">
<ListItemText primary={ <DescriptorLink to={ descriptor } /> }
secondary={ descriptor.description && <Markdown source={ descriptor.description } /> } />
</ListItem>
)) }
</List>
</Section>
</Grid>
) }
......
......@@ -6,6 +6,7 @@ import Divider from 'material-ui/Divider';
import { Dataset } from 'model/dataset.model';
import { Creator, CreatorRole } from 'model/creator.model';
import { Partner } from 'model/partner.model';
import { PartnerLink } from 'ui/catalog/Links';
interface ISummaryProps extends React.ClassAttributes<any> {
classes: any;
......@@ -46,9 +47,9 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
No. of accessions assessed
Number of accessions assessed in the dataset
</h4>
<h1 className="blue font-bold m-0">
<h1 className="font-bold m-0">
{ dataset.accessionCount }
</h1>
</div>
......@@ -56,9 +57,9 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
No. of traits assessed
Number of traits observed in the dataset
</h4>
<h1 className="blue font-bold m-0">
<h1 className="font-bold m-0">
{ dataset.descriptorCount }
</h1>
</div>
......@@ -68,8 +69,8 @@ class Summary extends React.Component<ISummaryProps, any> {
<h4 className="font-bold">
Data provider
</h4>
<h5 className="blue font-bold m-0">
{ owner && owner.name }
<h5 className="font-bold m-0">
<PartnerLink to={ owner } />
</h5>
</div>
</Grid>
......@@ -78,7 +79,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<h4 className="font-bold">
Contact
</h4>
<p className="blue">
<p className="">
{ this.renderName(creators) }
</p>
</div>
......
......@@ -23,13 +23,13 @@ const steps = [
},
{
id: 2,
name: 'Files',
name: 'Dataset attachments',
link: 'edit/files',
active: false,
},
{
id: 3,
name: 'Dataset creator',
name: 'Dataset creators',
link: 'edit/dataset-creator',
active: false,
},
......
......@@ -74,12 +74,12 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
name="created"
component={ TextField }
label="Date of creation of the document"
onChange={ this.save }
onBlur={ this.save }
/>
<Field
name="rights"
component={ BasicInfoRadioGroup }
onChange={ this.save }
onBlur={ this.save }
/>
<Field
name="language"
......
......@@ -5,10 +5,7 @@ import {withStyles} from 'material-ui/styles';
import {AVAILABLE_LICENSES} from 'model/license.model';
const styles = {
tooltip: {
fontSize: '1.1rem',
marginLeft: '1em',
},
// None
};
const BasicInfoRadioGroup = ({input, meta, classes, ...rest}) => (
......@@ -28,9 +25,11 @@ const BasicInfoRadioGroup = ({input, meta, classes, ...rest}) => (
key={ license.code }
value={ license.code }
label={ (
<div>{ license.title } <a href={ license.url } target="_blank" className={ classes.tooltip }>
{ license.url }
</a></div>
<div><b>{ license.code }</b> { license.title }
{ license.url &&
<div><a href={ license.url } target="_blank">{ license.url }</a></div>
}
</div>
) }
control={ <Radio /> }
/>
......
......@@ -150,7 +150,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
<div className="end-xs">
<div className="box">
<Button raised type="button" onClick={ this.createCreator } className={ classes.addButton }>
+Add other publisher
Add dataset creator
</Button>
</div>
</div>
......
......@@ -60,55 +60,54 @@ class FilesForm extends React.Component<IFilesFormProps, any> {
}
}
private FilesEditor = (member, index, fields) => (
<Grid container key={ index } justify="space-between" alignItems="flex-end">
<Grid item xs={ 2 } md={ 2 } lg={ 1 }>
<Field
name={ `${member}.title` }
type="text"
component={ TextField }
label="Title"
onBlur={ this.update(fields, index) }
disabled={ !fields.get(`[${index}].uuid`) }
/>
</Grid>
<Grid item xs={ 10 } md={ 10 } lg={ 5 }>
<Field
name={ `${member}.description` }
type="text"
component={ TextField }
label="Description"
onBlur={ this.update(fields, index) }
disabled={ !fields.get(`[${index}].uuid`) }
/>
</Grid>
<Grid item xs={ 12 } lg={ 6 }>
{
fields.get(`[${index}].uuid`) ?
<Field
name={ `${member}.originalFilename` }
type="text"
component={ TextField }
disabled label="File Name"
/>
: <div>
<input
id="file"
type="file"
accept=".csv, .xls, .xlsx"
style={ { display: 'none' } }
onChange={ this.upload }
/>
<label htmlFor="file">
<Button raised component="span">
Upload file
</Button>
</label>
</div>
}
</Grid>
</Grid>
)
private FilesEditor = (member, index, fields) => fields.get(`[${index}].uuid`) ?
(
<Grid container key={ index } justify="space-between" alignItems="flex-end">
<Grid item xs={ 12 } lg={ 4 }>
<Field
name={ `${member}.originalFilename` }
type="text"
component={ TextField }
disabled label="File name"
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 } lg={ 2 }>
<Field
name={ `${member}.title` }
type="text"
component={ TextField }
label="File label"
onBlur={ this.update(fields, index) }
disabled={ !fields.get(`[${index}].uuid`) }
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 } lg={ 6 }>
<Field
name={ `${member}.description` }
type="text"
component={ TextField }
label="Description of file content"
onBlur={ this.update(fields, index) }
disabled={ !fields.get(`[${index}].uuid`) }
/>
</Grid>
</Grid>
) : (
<div>
<input
id="file"
type="file"
accept=".csv, .xls, .xlsx"
style={ { display: 'none' } }
onChange={ this.upload }
/>
<label htmlFor="file">
<Button raised component="span">
Upload file
</Button>
</label>
</div>
)
public render() {
const { classes } = this.props;
......@@ -117,7 +116,7 @@ class FilesForm extends React.Component<IFilesFormProps, any> {
<form className={ classes.root }>
<ItemsEditor
name="repositoryFiles"
itemLabel="Repository file"
itemLabel="Dataset file"
addItem={ this.onAddMember }
removeItem={ this.onRemoveMember }
component={ this.FilesEditor }
......
......@@ -183,7 +183,7 @@ class TimingAndLocationForm extends React.Component<ILocationFormProps, any> {
raised
type="button"
onClick={ this.createLocation }
>Add Location</Button>
>Add another location</Button>
</div>
</div>
)
......
......@@ -29,7 +29,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
No. of data publishers
Number of data publishers
</h4>
<h1 className="blue font-bold m-0">
{ paged.totalElements }
......@@ -39,7 +39,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
No. of countries
Number of countries
</h4>
<h1 className="blue font-bold m-0">
65
......@@ -49,7 +49,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
No. of institutes
Number of institutes
</h4>
<h1 className="blue font-bold m-0">
{ paged.totalElements }
......
......@@ -5,6 +5,9 @@
* Thanks and good luck,
* @mobreza
*/
$i-dont-know-what-im-doing: ' ¯\\_(ツ)_/¯ ';
html {
font-family: 'Roboto', sans-serif;
font-size: 14px;
......@@ -655,7 +658,11 @@ h1, h2, h3, h4, h5, h6 {
}
.blue {
color: #006db4 !important;
// We're keeping this!
color: Red;
&:before {
content: $i-dont-know-what-im-doing;
}
}
.white {
......
Supports Markdown
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