fix: Visual cleanup of the file upload dialog

Closes #275
IQTLabs · Apr 4, 2019 · 629da6f · 629da6f
1 parent 5713d2b
commit 629da6f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -123,9 +123,10 @@ input[name=hideControls]:checked ~ .canvas {
 .modalMain {
   position:fixed;
   background: white;
-  flex: 1 1 auto;
+  flex: 1;
   display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
   border: 1px solid black;
   padding: 1rem;
   margin: 1rem;
@@ -136,9 +137,10 @@ input[name=hideControls]:checked ~ .canvas {
   transform: translate(-50%,-50%);
 }
 
+
 .modalMain span {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row no-wrap;
   align-items: center;
 }
 
@@ -275,22 +277,31 @@ input[name=hideControls]:checked ~ .canvas {
 
 .uploadContainer {
   display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
   align-items: center;
-  flex-flow: row no-wrap;
+  align-self: flex-start;
+  padding-right: 0.5em;
 }
 
 .fileUpload {
   flex: 1;
   display: flex;
-  align-items: center
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .fileUpload label {
   flex: 0;
-  margin-right: 0;
+  margin-right: 2em;
 }
 
 .fileUpload span {
-  flex: 1 0 auto;
-  flex-direction: row no-wrap;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  background-color: #DCDCDC;
+  flex-wrap: nowrap !important;
+  padding: 0.25em 2em;
 }
diff --git a/src/features/dataset-controls/DatasetControls.module.css b/src/features/dataset-controls/DatasetControls.module.css
@@ -4,11 +4,21 @@
   margin: 0.5rem;
 }
 
-.selectorContainer, .uploadContainer {
+.selectorContainer{
   display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
   align-items: center;
 }
 
+.uploadContainer {
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  align-items: center;
+  align-self: flex-start;
+}
+
 .selector {
   flex: 1;
 }
@@ -21,16 +31,23 @@
 .fileUpload {
   flex: 1;
   display: flex;
-  align-items: center
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .fileUpload label {
   flex: 0;
-  margin-right: 0;
+  margin-right: 2em;
 }
 
 .fileUpload span {
-  flex: 1;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  background-color: #DCDCDC;
+  flex-wrap: nowrap;
+  padding: 0.25em 2em;
 }
 
 .label {
@@ -116,7 +133,7 @@
 .modalMain {
   position:fixed;
   background: white;
-  flex: 0;
+  flex: 1;
   display: flex;
   flex-direction: column;
   border: 1px solid black;
@@ -131,7 +148,7 @@
 
 .modalMain span {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
 }