Commit 5b747542 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

material ui and react router fixes

parent 8321c1aa
......@@ -42,7 +42,7 @@ class PastingDescriptorsStep extends StepperTemplate<IPastingDescriptorsStepProp
/>
</Grid>
<Grid item xs={ 6 }>
<Grid container spacing={ 10 }>
<Grid container spacing={ 3 }>
{ !(this.state.matchingDescriptors && this.state.matchingDescriptors.get(pasted.id)) ?
<Grid item xs={ 12 }>
<Loading />
......
......@@ -85,11 +85,11 @@ const SuggestionsForm = ({ classes, t, suggestions, onReset, handleSubmit, initi
return (
<form onSubmit={ processSubmit } className={ classes.SuggestionsForm }>
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
{ Object.keys(suggestions).filter((key) => key.startsWith('search.group')).sort().map((key) => <SuggestionsGroup classes={ classes } t={ t } key={ key } groupTitle={ key } group={ suggestions[key] }/>) }
</Grid>
{ suggestions['search.matches'] && suggestions['search.matches'].hits.length > 0 &&
<Grid container spacing={ 8 } className={ classes.suggestions }>
<Grid container spacing={ 2 } className={ classes.suggestions }>
<Grid item xs={ 12 } style={ { padding: '1em' } }>
<div className={ classes.suggestedMatchesTitle }>
<h3 className="m-0">{ t('datasets.public.c.suggestionsForm.matches') }</h3>
......
......@@ -40,7 +40,7 @@ class ImportDescriptorsStep extends StepperTemplate<IDescriptorListProps> {
<div style={ { marginTop: '23px' } }>
<h3>{ `Uploaded ${this.state.uploadedDescriptors.length} descriptor definitions` }</h3>
<h3>{ this.props.t('descriptorlists.dashboard.p.stepper.import.uploaded', { count: this.state.uploadedDescriptors.length }) }</h3>
<Grid container spacing={ 10 }>
<Grid container spacing={ 2 }>
{ this.state.uploadedDescriptors.map((d, index) => (
<Grid item key={ index } xs={ 12 } md={ 6 } xl={ 4 }>
<DescriptorCard descriptor={ d }/>
......@@ -60,7 +60,7 @@ class ImportDescriptorsStep extends StepperTemplate<IDescriptorListProps> {
{ ` ${this.props.t('descriptorlists.dashboard.p.stepper.import.uploading')}` }
</h3>
<Grid container spacing={ 10 }>
<Grid container spacing={ 2 }>
{ this.state.nonSavedDescriptors.map((d, index) => (
<Grid item key={ index } xs={ 12 } md={ 6 } xl={ 4 }>
<DescriptorCard
......
......@@ -145,7 +145,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
</ButtonBar>
}/>
<PageContents className="pt-1rem">
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
<Grid item sm={ 12 }>
<PageSection title={ t(`kpi.admin.p.executionDisplay.title`) }>
<Properties>
......
......@@ -90,7 +90,7 @@ class ChangesSection extends React.Component<IChangesSectionProps> {
const {changes, classes, executionType, availableDimensions, t} = this.props;
return (
<Grid container spacing={ 8 } justify="space-between">
<Grid container spacing={ 2 } justify="space-between">
<Grid xs={ 12 } md={ 3 } item>
<ChangesSearchForm onSubmit={ this.loadExecutionChanges } availableDimensions={ availableDimensions }/>
</Grid>
......
......@@ -175,7 +175,7 @@ class RunsSection extends React.Component<IRunsSectionProps> {
const observations = currentRun ? currentRun.observations : lastRun ? lastRun.observations : null;
return (
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
<Grid item sm={ 12 } md={ 6 }>
<div>
<span className={ classes.sectionHeader }>
......
......@@ -231,7 +231,7 @@ class RepositoryBrowser extends React.Component<IRepositoryBrowserProps, any> {
<PagedLoader paged={ folder.subFolders } itemRenderer={ this.renderSubfolder } loadMore={ this.loadMoreFolders }/>
</div>
<Grid item>
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
<PagedLoader paged={ folder.files } itemRenderer={ this.renderFile } loadMore={ this.loadMoreFiles }/>
</Grid>
</Grid>
......
......@@ -70,7 +70,7 @@ const ImageGalleryView = (
:
(
<Grid item xs={ 12 } className={ className }>
<Grid container spacing={ 8 }>
<Grid container spacing={ 1 }>
{ imageGallery.images && imageGallery.images.map((image, index) => (
<Grid key={ image.uuid } item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
<Card className={ classes.root }>
......
......@@ -165,7 +165,7 @@ class ImageViewerDialog extends React.Component<IImageViewerDialogProps> {
</CardActions>
}
<CardContent className={ classes.gridContainer }>
<Grid container spacing={ 8 } className={ classes.imageContainer }>
<Grid container spacing={ 2 } className={ classes.imageContainer }>
<Grid item xs={ 12 } md={ 9 } className={ classes.imageContainer }>
<div className={ classes.imageContainer }>
<img alt={ currentImage.title || currentImage.originalFilename } className={ classes.image } style={ imageStyle } src={ repositoryThumbnailUrl(currentImage, undefined, undefined, true) }/>
......
......@@ -314,7 +314,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Section>
</Grid>
</Grid>
<Grid container spacing={ 8 } className="mt-5" justify={ 'space-between' }>
<Grid container spacing={ 2 } className="mt-5" justify={ 'space-between' }>
{ ! accessions ? <Loading /> :
<Grid item xs={ 12 } className="p-10">
{ accessions && accessions.content && accessions.content.length !== 0 &&
......
......@@ -31,7 +31,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
<Grid>
{ topSection }
</Grid>
<Grid container justify={ 'center' } spacing={ 8 }>
<Grid container justify={ 'center' } spacing={ 2 }>
<Grid item md={ children ? 7 : 12 } xs={ 12 }>
<Properties>
{
......
......@@ -58,6 +58,9 @@ const styles = (theme) => ({
}
},
},
tab: {
minWidth: 'initial',
},
tabsArea: {
alignSelf: 'flex-end' as 'flex-end',
'& a': {
......@@ -123,6 +126,7 @@ class Tabs extends React.Component<any> {
key={ tab.to }
label={ typeof tab.label === 'string' ? t(tab.label) : tab.label }
component={ Link as any }
className={ classes.tab }
disabled={ tab.disabled }
{ ...tab }
/>
......
......@@ -87,6 +87,7 @@ const styles = (theme) => ({
},
icon: {
minWidth: 'initial',
margin: '5px',
[theme.breakpoints.down('xs')]: {
margin: '10px',
......
......@@ -21,7 +21,7 @@ class ValuesList extends React.Component<any> {
const {input, removeByIndex} = this.props;
return (
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
{ input && input.value && input.value.map((renderItem, index) => (
<Grid item xs={ 12 } sm={ 6 } key={ `${renderItem.value}${Math.random()}` }>
<div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } }>
......
......@@ -6,7 +6,7 @@ const matchRoutes = (routes, pathname, parentPath = '', branch = []) => {
routes.some((route) => {
let match = null;
const absolutePath = (route.path) ? (parentPath !== '/' ? (parentPath + route.path) : route.path) : route.path;
// console.log(`Matching route ${pathname} for abs=${absolutePath} parentPath=${parentPath} route.path=${route.path}`);
console.log(`Matching route ${pathname} for abs=${absolutePath} parentPath=${parentPath} route.path=${route.path}`);
const options = {
path: absolutePath,
exact: route.exact,
......@@ -20,7 +20,7 @@ const matchRoutes = (routes, pathname, parentPath = '', branch = []) => {
if (branch.length) {
match = branch[branch.length - 1].match;
} else {
match = Router.prototype.computeMatch(pathname);
match = Router.computeRootMatch(pathname);
}
}
if (match) {
......
......@@ -111,7 +111,7 @@ class AdministrationDashboard extends React.Component<IAdminDashProps> {
<ContentHeaderWithButton title="You're root, have fun!"/>
<PageContents className="pt-1rem">
<SectionHeader title="Accessions" subTitle="Metrics related to accessions over the last 20 days" />
<Grid container spacing={ 8 }>
<Grid container spacing={ 3 }>
{ this.state.kpiCharts.filter((kpiChart) => kpiChart.name.match(/accession/)).map((kpiChart) => (
<Grid key={ kpiChart.name } item xs={ 12 } md={ 6 }>
<PageSection title={ <div style={ { cursor: 'pointer' } } onClick={ this.openKpi(kpiChart.name) }>{ kpiChart.title }</div> }>
......@@ -123,7 +123,7 @@ class AdministrationDashboard extends React.Component<IAdminDashProps> {
)) }
</Grid>
<SectionHeader title="Datasets and Subsets" subTitle="Metrics related to the Catalog over the last 20 days" />
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
{ this.state.kpiCharts.filter((kpiChart) => kpiChart.name.match(/subset|dataset|descriptor/)).map((kpiChart) => (
<Grid key={ kpiChart.name } item xs={ 12 } md={ 6 }>
<PageSection title={ <div style={ { cursor: 'pointer' } } onClick={ this.openKpi(kpiChart.name) }>{ kpiChart.title }</div> }>
......@@ -135,7 +135,7 @@ class AdministrationDashboard extends React.Component<IAdminDashProps> {
)) }
</Grid>
<SectionHeader title="Other" subTitle="Other metrics" />
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
{ this.state.kpiCharts.filter((kpiChart) => ! kpiChart.name.match(/accession|subset|dataset|descriptor/)).map((kpiChart) => (
<Grid key={ kpiChart.name } item xs={ 12 } md={ 6 }>
<PageSection title={ <div style={ { cursor: 'pointer' } } onClick={ this.openKpi(kpiChart.name) }>{ kpiChart.title }</div> }>
......
......@@ -620,7 +620,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
</div>
</Grid>
<Grid item xs={ 12 } className={ classes.statsWrapper }>
<Grid container spacing={ 8 }>
<Grid container spacing={ 2 }>
<Hidden smDown>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
......
......@@ -38,9 +38,6 @@ const theme = (dir) => createMuiTheme({
fontWeight: 600,
fontSize: '24px',
},
a: {
color: '#006db4',
},
},
MuiCheckbox: {
colorSecondary: {
......@@ -97,6 +94,11 @@ const theme = (dir) => createMuiTheme({
},
},
},
MuiPaper: {
root: {
color: 'inherit',
}
}
},
palette: {
primary: {
......
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