fixed layout adjustments of fading elements

editor.css

@@ -94,7 +94,7 @@ body {
   display: none;
 }
 
-#sideheader {
+#sideheader, #fileheader {
   width: 100%;
 }
 
@@ -124,7 +124,6 @@ body {
   text-align: justify;
   hyphens: auto;
   word-wrap: break-word;
-  /* height: 80%; */
 }
 
 #sidebuttons, #filebuttons {
@@ -283,6 +282,32 @@ label {
   font-style: normal;
 }
 
+#filecontent {
+  font-family: 'OpenSans';
+  position: absolute;
+  top: 20px;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  padding-right: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#filecontent div {
+  background-color: red;
+  border-radius: 15px;
+  position: relative;
+  float: left;
+  width: 100px;
+  height: 100px;
+  margin: 10 10 10 10;
+  text-align: center;
+  padding: 10 10 10 10;
+  color: white;
+  align-items: baseline;
+}
+
 #curtain {
   z-index: 50;
   position: fixed;

editor.html

@@ -64,7 +64,9 @@
       </div>
     </div>
     <div id="filepanel"> <!--Pop-up panel covering the center of the screen for file interactions-->
-      <h2 id="fileheading">Hello</h2>
+      <div id="fileheader">
+        <h2 id="fileheading">Hello</h2>
+      </div>
       <div id="filecontent"></div>
       <div id="filebuttons">
         <button type="submit">Load</button>

editor.js

@@ -65,8 +65,24 @@ document.getElementById('filepanel').style.opacity = 0;
 
 function openFileDisplay() {
   var panel = document.getElementById('filepanel');
+  var heading = document.getElementById('fileheading');
   var curtain = document.getElementById('curtain');
-  fadeIn(null, {element: panel, max: 1, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
+  var content = document.getElementById('filecontent');
+  var buttons = document.getElementById('filebuttons');
+  function callback() {
+    heading.innerHTML = 'Open Workflow Definition';
+    for (var i = 0; i < 100; i++) {
+      var item = document.createElement('div');
+      item.innerHTML = i;
+      content.appendChild(item);
+    }
+    var pStyle = window.getComputedStyle(panel);
+    var hStyle = window.getComputedStyle(heading);
+    content.style.top = heading.offsetHeight + parseFloat(pStyle.paddingTop) + parseFloat(hStyle.marginTop) + parseFloat(hStyle.marginBottom);
+    var bStyle = window.getComputedStyle(buttons);
+    content.style.bottom = buttons.offsetHeight + parseFloat(pStyle.paddingBottom) + parseFloat(bStyle.marginTop) + parseFloat(bStyle.marginBottom);
+  }
+  fadeIn(callback, {element: panel, max: 0.95, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
   closeMenuItem();
 }
 

workflows/index.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "Diploma",
+    "description": "",
+    "url": "/test.json"
+  },
+  {
+    "name": "Theses",
+    "description": "",
+    "url": "/test.json"
+  },
+  {
+    "name": "Recognitions",
+    "description": "",
+    "url": "/test.json"
+  }
+]