Merge pull request #46 from hardforkio/feature/fix-33-top-bar-responsiveness

Make top bar responsive.

Author: levino

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;
+  }
 }

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 (
-    <Root>
-      <ReactSelect
-        name="dataset-selector"
-        value={error ? -1 : selected}
-        //@ts-ignore
-
-        onChange={value =>
-          !isEmpty(value)
-            ? selectDataset(value.value, selectedDatasetId)
-            : selectDataset(null, selectedDatasetId)
-        }
-        placeholder={
-          error
-            ? T.translate("datasetSelector.error")
-            : T.translate("reactSelect.placeholder")
-        }
-        isDisabled={!!error}
-        options={options}
-      />
+    <Root className="d-flex flex-grow-1 align-items-center">
+      {/*TODO: translate and style me. Without this the dropdown makes little sense to the user.*/}
+      <div className={"px-2"}>Dataset:</div>
+      <div className="flex-grow-1">
+        <ReactSelect
+          name="dataset-selector"
+          value={error ? -1 : selected}
+          //@ts-ignore
+
+          onChange={value =>
+            !isEmpty(value)
+              ? selectDataset(value.value, selectedDatasetId)
+              : selectDataset(null, selectedDatasetId)
+          }
+          placeholder={
+            error
+              ? T.translate("datasetSelector.error")
+              : T.translate("reactSelect.placeholder")
+          }
+          isDisabled={!!error}
+          options={options}
+        />
+      </div>
     </Root>
   );
 };

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<PropsType> {
   render() {
     return (
-      <Root>
-        <OverflowHidden>
+      <Root className="align-items-center d-flex w-100 justify-content-between p-2">
+        <div className="d-none d-sm-flex align-items-center">
           <Logo title={this.props.version} />
-          <Spacer />
-          <Headline>{T.translate("headline")}</Headline>
-        </OverflowHidden>
+          <div className="d-none d-md-block">
+            <Headline className="px-2 my-0">{T.translate("headline")}</Headline>
+          </div>
+        </div>
         <DatasetSelector />
       </Root>
     );
@@ -68,7 +49,7 @@ class Header extends React.Component<PropsType> {
 
 //@ts-ignore
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = state => {
   return {
     version: state.startup.config.version,
     isDevelopment: !state.startup.config.production || false