diff --git a/frontend/src/js/ContentLayout/layout.module.scss b/frontend/src/js/ContentLayout/layout.module.scss index e0c16bd2..910f2b5a 100644 --- a/frontend/src/js/ContentLayout/layout.module.scss +++ b/frontend/src/js/ContentLayout/layout.module.scss @@ -1,58 +1,56 @@ .outer { - display: flex; - flex-direction: column; - justify-content: stretch; - height:100%; + display: flex; + flex-direction: column; + justify-content: stretch; + height: 100%; } .content { - overflow: auto; - display: flex; - flex-direction: column; - flex-grow: 1; - height: 0; //This is a dirty hack to enable flex behaviour for Safari on iOS. + overflow: auto; + display: flex; + flex-direction: column; + flex-grow: 1; + height: 0; //This is a dirty hack to enable flex behaviour for Safari on iOS. } .menu { - overflow: auto; - flex-grow: 0; + flex-grow: 0; } .editor { - flex-basis: 70%; - overflow: auto; + flex-basis: 70%; + overflow: auto; } .toolSection { - flex-direction: row; - display: flex; - overflow: auto; - flex-basis: 30%; + flex-direction: row; + display: flex; + overflow: auto; + flex-basis: 30%; } .info { - flex-basis: 30%; - overflow: auto; + flex-basis: 30%; + overflow: auto; } .tools { - flex-basis: 70%; - overflow: auto; + flex-basis: 70%; + overflow: auto; } - @media screen and (orientation: landscape) { - .content { - flex-direction: row; - } - .toolSection { - flex-direction: column; - flex-basis: 30%; - overflow: initial; - } - .info { - flex-basis: auto; - } + .content { + flex-direction: row; + } + .toolSection { + flex-direction: column; + flex-basis: 30%; + overflow: initial; + } + .info { + flex-basis: auto; + } } diff --git a/frontend/src/js/dataset/DatasetSelector.tsx b/frontend/src/js/dataset/DatasetSelector.tsx index 0da1af09..64e865c3 100644 --- a/frontend/src/js/dataset/DatasetSelector.tsx +++ b/frontend/src/js/dataset/DatasetSelector.tsx @@ -15,7 +15,7 @@ import type { DatasetType } from "./reducer"; import { selectDataset } from "./actions"; const Root = styled("div")` - min-width: 300px; + flex-grow: 1; padding: 0px 0 0 20px; color: ${({ theme }) => theme.col.black}; `; @@ -36,25 +36,29 @@ const DatasetSelector = (props: PropsType) => { const selected = options.filter(set => selectedDatasetId === set.value); return ( - - - !isEmpty(value) - ? selectDataset(value.value, selectedDatasetId) - : selectDataset(null, selectedDatasetId) - } - placeholder={ - error - ? T.translate("datasetSelector.error") - : T.translate("reactSelect.placeholder") - } - isDisabled={!!error} - options={options} - /> + + {/*TODO: translate and style me. Without this the dropdown makes little sense to the user.*/} +
Dataset:
+
+ + !isEmpty(value) + ? selectDataset(value.value, selectedDatasetId) + : selectDataset(null, selectedDatasetId) + } + placeholder={ + error + ? T.translate("datasetSelector.error") + : T.translate("reactSelect.placeholder") + } + isDisabled={!!error} + options={options} + /> +
); }; diff --git a/frontend/src/js/header/Header.tsx b/frontend/src/js/header/Header.tsx index 0ef55e65..c7908627 100644 --- a/frontend/src/js/header/Header.tsx +++ b/frontend/src/js/header/Header.tsx @@ -9,24 +9,6 @@ const Root = styled("header")` color: ${({ theme }) => theme.col.blueGrayDark}; border-bottom: 1px solid ${({ theme }) => theme.col.grayMediumLight}; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); - padding: 0 20px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; -`; - -const OverflowHidden = styled("div")` - overflow: hidden; - flex-shrink: 0; - display: flex; - flex-direction: row; - align-items: center; -`; - -const Spacer = styled("span")` - margin: 0 10px; - height: 20px; `; const Logo = styled("div")` @@ -39,8 +21,6 @@ const Logo = styled("div")` `; const Headline = styled("h1")` - margin: 0 auto 0 0; - line-height: 2; font-size: ${({ theme }) => theme.font.md}; font-weight: 300; `; @@ -54,12 +34,13 @@ type PropsType = { class Header extends React.Component { render() { return ( - - + +
- - {T.translate("headline")} - +
+ {T.translate("headline")} +
+
); @@ -68,7 +49,7 @@ class Header extends React.Component { //@ts-ignore -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = state => { return { version: state.startup.config.version, isDevelopment: !state.startup.config.production || false