gridftp: fixed height file list

[qcg-portal.git] / qcg / static / qcg / main.css

diff --git a/qcg/static/qcg/main.css b/qcg/static/qcg/main.css
index c2d0aaf..147ed19 100644 (file)
--- a/qcg/static/qcg/main.css
+++ b/qcg/static/qcg/main.css
@@ -29,7 +29,7 @@ footer.navbar-fixed-bottom {
 }
 
 
-/* new job view */
+/* submit job view */
 
 textarea {
     resize: vertical;
@@ -84,22 +84,16 @@ textarea {
 #filex {
     /* needed for positioning spinner */
     position: relative;
+    height: 100%;
 }
 
-#filex input[type=checkbox] {
-    margin: 0;
-}
-
-#host-controls .change {
-    display: none;
-}
-
-#host-controls.editing .view {
-    display: none;
+#list {
+    height: calc(100% - 55px);
+    overflow: auto;
 }
 
-#host-controls.editing .change {
-    display: initial;
+#filex input[type=checkbox] {
+    margin: 0;
 }
 
 .path.breadcrumb > li + li::before {
@@ -107,7 +101,7 @@ textarea {
 }
 
 #spinner-overlay {
-    background: url('/static/filex/spinner.gif') white center 100px no-repeat;
+    background: url('/static/filex/spinner.gif') white  center center no-repeat fixed;
     opacity: 0.5;
     position: absolute;
     top: 0;
@@ -120,3 +114,82 @@ textarea {
 .busy #spinner-overlay {
     display: initial;
 }
+
+#filex nav {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+#host {
+    flex: 1 auto;
+    margin-right: 10px;
+    white-space: nowrap;
+}
+
+#controls {
+    flex: 0 auto;
+    margin-bottom: 5px;
+    white-space: nowrap;
+}
+
+#path {
+    flex: 1 100%;
+}
+
+@media (min-width: 768px) {
+    #host {
+        order: 1;
+        flex: 0 auto;
+        margin-right: 10px;
+    }
+
+    #path {
+        order: 2;
+        flex: 10 auto;
+        margin-top: -1px;
+        margin-right: 10px;
+    }
+
+    #controls {
+        order: 3;
+        flex: 0 auto;
+    }
+}
+
+#host .list {
+    display: none;
+}
+
+#host.edit .list {
+    display: initial;
+}
+
+#host.edit #btn-host {
+    display: none;
+}
+
+#host .selectize-control {
+    min-width: 200px;
+}
+
+#host .selectize-input {
+    padding-right: 32px;
+}
+
+
+
+/* task details view */
+
+.working-dir {
+    margin-top: 10px;
+}
+
+@media (min-width: 768px) {
+    .working-dir {
+        position: absolute;
+        right: 15px;
+        top: 50%;
+        margin-top: -17px;
+        z-index: 1;
+    }
+}