Commit 7a2f95a8 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Merge branch 'global-styles' into 'master'

Clean up and reorganise global styles

See merge request !415
parents c5f22835 d22482e9
Pipeline #31876 passed with stages
in 7 minutes and 36 seconds
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.App-top-margin {
margin-top: 95px;
}
......@@ -27,7 +27,6 @@ import { getRemainingSessionTime } from './helpers/auth';
import { doLogOut, doSilentRefreshFromSSO } from './actions/login';
import keycloak from './config/sso/keycloak';
import Menu from './components/Menu/Menu';
import './App.css';
import { fetchAllInvestigations } from './actions/investigations';
import { fetchDataCollections } from './actions/datacollections';
import { useQuery } from './helpers/hooks';
......
import React from 'react';
import { Breadcrumb, Glyphicon, Label, Navbar } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import styles from './BreadCrumbs.module.css';
function BreadCrumbs(props) {
const { breadcrumbs } = props;
......@@ -9,10 +10,7 @@ function BreadCrumbs(props) {
if (state && state.back) {
const { title, pathname, search, scrollPosition } = state.back;
return (
<Navbar
className="breadcrumbs-bar"
style={{ padding: '8px 0', fontSize: 15 }}
>
<Navbar className={styles.backBar} fluid>
<Link to={{ pathname, search, state: { scrollPosition } }}>
<Glyphicon glyph="arrow-left" style={{ marginRight: 10 }} />
{title}
......@@ -26,14 +24,14 @@ function BreadCrumbs(props) {
}
return (
<Navbar className="breadcrumbs-bar">
<Breadcrumb>
<Navbar className={styles.bar} fluid>
<Breadcrumb className={styles.list}>
{breadcrumbs.map((item, i) => {
if (i === breadcrumbs.length - 1) {
return (
<li key={i} className="active">
{item.badge && (
<Label className="breadcrumb__badge">{item.badge}</Label>
<Label className={styles.badge}>{item.badge}</Label>
)}
{item.name}
</li>
......
.navbar-brand {
display: flex;
align-items: center;
}
.breadcrumbs-bar {
.bar {
min-height: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
font-size: 15px;
}
.backBar {
composes: bar;
padding: 8px 0;
}
.breadcrumb {
.list {
margin-bottom: 0;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: 15px;
}
.breadcrumb .active {
font-weight: 700;
}
.breadcrumb a[aria-disabled] {
color: #777;
.list :global(.active) {
font-weight: bold;
}
.breadcrumb__badge {
.badge {
margin-right: 5px;
font-size: 15px;
}
span.navbar-brand {
color: #9d9d9d !important;
}
......@@ -5,7 +5,6 @@ import {
getDatasetStatus,
getDownloadURLByDatasetId,
} from '../../api/icat/icatPlus';
import './DatasetTable.css';
export default class DatasetDownloadButton extends React.Component {
constructor(props) {
......
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import DatasetDownloadButton from './DatasetDownloadButton';
function DatasetFooter(props) {
const { location, sessionId, dataset } = props;
return (
<div className="container-fluid">
<div className="pull-left">
<span>
{' '}
<Glyphicon glyph="folder-open" /> {location}
</span>
</div>
<div className="pull-right">
<DatasetDownloadButton sessionId={sessionId} id={dataset.id} />
</div>
</div>
);
}
export default DatasetFooter;
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import DatasetDownloadButton from '../DatasetDownloadButton';
import './DatasetFooter.css';
class DatasetFooter extends React.Component {
render() {
return (
<div className="container-fluid">
<div className="pull-left">
<span>
{' '}
<Glyphicon glyph="folder-open" /> {this.props.location}
</span>
</div>
<div className="pull-right">
<DatasetDownloadButton
sessionId={this.props.sessionId}
id={this.props.dataset.id}
/>
</div>
</div>
);
}
}
export default DatasetFooter;
import React from 'react';
import ResponsiveTable from '../../Table/ResponsiveTable';
import './DatasetMetadataTab.css';
import ResponsiveTable from '../Table/ResponsiveTable';
class DatasetMetadataTab extends React.Component {
fieldFormatter(cell, row) {
......
.column_parameter_value {
font-size: 12px;
font-weight: bold;
}
.table > tr {
border-top: 1px rgb(221, 221, 221) solid;
font-size: 11px;
}
......@@ -4,12 +4,11 @@ import moment from 'moment';
import {
getDatasetParameterByPrefixName,
getDatasetParameterValueByName,
} from '../../../helpers';
import ParameterTableWidget from '../../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from '../GalleryDatasetThumbnail';
} from '../../helpers';
import ParameterTableWidget from '../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from './GalleryDatasetThumbnail';
import EMDatasetSummary from './EMDatasetSummary';
import MXDatasetSummary from './MXDatasetSummary';
import './DatasetSummary.css';
class DatasetSummary extends React.Component {
getParameters() {
......
.column_parameter_value {
font-size: 12px;
font-weight: bold;
}
.table > tr {
border-top: 1px rgb(221, 221, 221) solid;
font-size: 11px;
}
.dataset-table-container {
margin-top: 20px;
margin-bottom: 100px;
margin-right: 10px;
margin-left: 10px;
}
.dataset-table-row {
margin-top: 5px;
}
.selection-row {
background-color: powderblue;
}
......@@ -8,7 +8,6 @@ import { getDatasetParameterByName, stringifyBytesSize } from '../../helpers';
import ResponsiveTable from '../Table/ResponsiveTable';
import DatasetDownloadButton from './DatasetDownloadButton';
import DatasetWidget from './DatasetWidget';
import './DatasetTable.css';
class DatasetTable extends React.Component {
constructor(props) {
......
import React from 'react';
import './DatasetTechniqueTab.css';
import ResponsiveTable from '../../Table/ResponsiveTable';
import ResponsiveTable from '../Table/ResponsiveTable';
function DatasetTechniqueTab(props) {
const { params } = props;
......
.column_parameter_value {
font-size: 12px;
font-weight: bold;
}
.table > tr {
border-top: 1px rgb(221, 221, 221) solid;
font-size: 11px;
}
......@@ -5,12 +5,11 @@ import { FILE_COUNT } from '../../constants/parameterTypes';
import { getDatasetParameterByPrefixName } from '../../helpers';
import DatasetFileTree from '../File/DatasetFileTree';
import InstrumentWidget from '../Instrument/InstrumentWidget';
import DatasetFooter from './DatasetFooter/DatasetFooter';
import DatasetMetadataTab from './DatasetMetadataTab/DatasetMetadataTab';
import DatasetSummary from './DatasetSummary/DatasetSummary';
import DatasetTechniqueTab from './DatasetTechniqueTab/DatasetTechniqueTab';
import PublicationSummary from './PublicationSummary/PublicationSummary';
import './DatasetTable.css';
import DatasetFooter from './DatasetFooter';
import DatasetMetadataTab from './DatasetMetadataTab';
import DatasetSummary from './DatasetSummary';
import DatasetTechniqueTab from './DatasetTechniqueTab';
import PublicationSummary from './PublicationSummary';
class DatasetWidget extends React.Component {
getDefinition(dataset) {
......
import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import moment from 'moment';
import { getDatasetParameterValueByName } from '../../../helpers';
import ParameterTableWidget from '../../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from '../GalleryDatasetThumbnail';
import './DatasetSummary.css';
import { getDatasetParameterValueByName } from '../../helpers';
import ParameterTableWidget from '../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from './GalleryDatasetThumbnail';
class EMDatasetSummary extends React.Component {
getParameters() {
......
import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import moment from 'moment';
import { getDatasetParameterValueByName } from '../../../helpers';
import ParameterTableWidget from '../../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from '../GalleryDatasetThumbnail';
import './DatasetSummary.css';
import { getDatasetParameterValueByName } from '../../helpers';
import ParameterTableWidget from '../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from './GalleryDatasetThumbnail';
class MXDatasetSummary extends React.Component {
getParameters() {
......
import React from 'react';
import { Col, Grid, Image, Row } from 'react-bootstrap';
import { getFileByEventId } from '../../../api/icat/icatPlus';
import './PublicationSummary.css';
import { getFileByEventId } from '../../api/icat/icatPlus';
class PublicationSummary extends React.Component {
getImageFromGalleyByIndex(index) {
......
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