Merge pull request #317 from EpistasisLab/DataUploadUiTweaksNew

Data upload UI tweaks new
EpistasisLab · Apr 7, 2021 · 4f76b40 · 4f76b40
2 parents 6ebea52 + 6a1683b
commit 4f76b40
Show file tree

Hide file tree

Showing 3 changed files with 570 additions and 351 deletions.
diff --git a/lab/webapp/dist/App.css b/lab/webapp/dist/App.css
@@ -38,6 +38,9 @@ body {
 /* file upload form styling */
 .pennai .file-upload-segment {
     max-width: 630px;
+    /* add 'overflow: auto' so the floated child 
+       buttons stay contained within the segment */
+    overflow: auto;
 }
 .pennai .file-upload-form-dataset-input {
     width: 40%;
@@ -63,21 +66,43 @@ body {
 .pennai .file-upload-help-icon {
     padding-left: 0;
 }
-.pennai .file-upload-ordinal-text-area {
-    width: 90%
+.pennai .file-upload-header {
+    margin-top: 1em;
 }
-.pennai .file-upload-sortable-list {
+.pennai .file-upload-pseudo-dialog-button {
+    size: "small";
+    float: right;
+}
+.pennai .file-upload-feature-text-info{
+    color:rgba(255, 255, 255, 0.9);
+    background-color:rgba(17, 17, 17, 0.9);
+}
+.pennai .file-upload-feature-text-input{
+    width: 100%;
+    color:rgba(255, 255, 255, 0.9);
+    background-color:rgba(17, 17, 17, 0.9);
+    resize: none;
+}
+.pennai .file-upload-centered-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+}
+.file-upload-sortable-list {
     list-style-type: none;
     margin: auto;
     width: 80%;
     padding: 10px 5px;
 }
-.pennai .file-upload-sortable-list-item {
+.file-upload-sortable-list-item {
     /*border-style: solid;*/
     border: 1px solid;
     text-align: center;
     padding: 2px;
     border-color: rgb(84,200,255);
+    color: rgba(255, 255, 255, 0.9);
     border-radius: 4px;
 }
 /* This class is for the list item that moves
@@ -89,20 +114,9 @@ the element isn't visible at all.
 See https://github.com/clauderic/react-sortable-hoc/issues/87
 */
 .file-upload-sortable-list-item-helper {
-    border: 2px solid;
-    text-align: center;
-    /* something happens to the padding compared to the regular item defined above,
-       and the text is aligned at bottom of border instead of middle.
-       But these settings aren't effecting things. Huh. 
-    */
-    padding-top: 0 !important;
-    padding-bottom: 5px !important;
-    border-color: yellow; /* rgb(84,200,255);*/
-    border-radius: 4px;
     z-index: 10; /*important*/
-    color: rgba(255,255,255,.9);
-    list-style-type: none; /*remove the bullet*/
- }
+    list-style-type: none;
+}
 .pennai .file-upload-table {
     line-height: 1;
 }
@@ -426,17 +440,23 @@ See https://github.com/clauderic/react-sortable-hoc/issues/87
  * The bug is in v1.3.1 and v2.0.0.
  * Note that there's no way to reference a color value from the .ui class
  * that defines the inverted color w/out adding a css preprocessor */
- .pennai .inverted-dropdown-search .ui.search.dropdown {
+.pennai .inverted-dropdown-search .ui.search.dropdown {
     color: rgba(255,255,255,0.9);
+    border: 2px solid rgb(84,200,255);
+    border-radius: 4px;
+    padding: 0.4em 1em;
 }
- .pennai .inverted-dropdown-search .ui.search.dropdown > input.search {
+.pennai .inverted-dropdown-search .ui.search.dropdown > input.search {
     color: rgba(255,255,255,0.9);
 }
 /* Manual fix for color of dropdown text in an inline form.field dropdown control
    within an inverted form.
 */
 .pennai .inverted-dropdown-inline .ui.dropdown {
     color: rgba(255,255,255,0.9);
+    border: 2px solid rgb(84,200,255);
+    border-radius: 4px;
+    padding: 0.4em 1em;
 }
 
 .gauge {