Improved adding container interface.

services/webapp/code/rosetta/core_app/templates/add_container.html

@@ -8,19 +8,17 @@
 <div class="container">
   <div class="dashboard">
     <div class="span8 offset2">
-      <h1>Add container</h1> 
+      <h1>Add software container</h1> 
       <hr>
 
       {% if not data.added %}
 
-          <h3>Set up the new container.</h3> 
-          
-          <br/>
-          
+          <h4>Container basics</h4> 
+                    
           <form action="#" method="POST">
           {% csrf_token %}
 
-          <table class="dashboard" style="width:360px">
+          <table class="dashboard" style="width:360px; margin-bottom:25px">
 
            <tr>
             <td><b>Name</b></td>
@@ -61,7 +59,10 @@
 
            </table>
 
-          <table class="dashboard" style="width:360px">
+
+
+          <h4>Container interface </h4> 
+          <table class="dashboard" style="width:360px; margin-bottom:25px">
 
            <tr>
             <td><b>Interface port</b></td>
@@ -75,11 +76,15 @@
             </td>
            </tr>
            </table>
-   
-            <table class="dashboard" style="width:360px">
 
-           <tr><td colspan=2><hr style="margin:5px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Advanced</td></tr>
+           
+           <a href="javascript:void(0);" id="show_button" onclick="toggle_visibility('advanced_div')">Show advanced...</a>
+           
 
+           <div id="advanced_div" style="display:none; width:360px;">
+           <h4>Container advanced settings <font size=-1>| <a href="javascript:void(0);" id="hide_button" onclick="toggle_visibility('advanced_div')" style="display:none">hide</a></font></h4>
+  
+           <table class="dashboard" style="width:360px; margin-bottom:25px">
 
            <tr>
             <td><b>Architecture</b></td><td>
@@ -90,7 +95,7 @@
            </tr>
 
            <tr>
-            <td><b>OS</b></td><td>
+            <td><b>Operating System</b></td><td>
               <select name="container_os" >
               <option value="linux" selected>linux</option>
               </select>
@@ -98,7 +103,7 @@
            </tr>
 
            <tr>
-            <td><b>interface transport</b></td><td>
+            <td><b>Interface transport</b></td><td>
               <select name="container_interface_transport" >
               <option value="tcp/ip" selected>tcp/ip</option>
               </select>
@@ -119,13 +124,15 @@
             </td>
            </tr>
 
-
-           <tr>
-           <td colspan=2 align=center style="padding:20px">
-           <input type="submit" value="Add">
-           </td>
-           </tr>
           </table>
+          </div>
+          
+          <table style="width:360px; border:0; background:#ffffff; margin-top:20px">
+          <tr><td align="center">
+          <input type="submit" value="Add">
+          </td></tr>
+          </table>
+                    
           </form>
 
           <br/>          
@@ -138,9 +145,6 @@
           <br/>
           <br/>
           
-
-
-
  
       {% else %}
         Ok, Container added. Go back to your <a href="/containers">container list</a>.
@@ -161,6 +165,23 @@
 
 {% include "footer.html" %}
 
+<script>
+function toggle_visibility(id) {
+      var x = document.getElementById(id);
+      var y = document.getElementById('show_button');
+      var z = document.getElementById('hide_button');
+      if (x.style.display === "none") {
+        x.style.display = "block";
+        y.style.display = "none"
+        z.style.display= "inline"
+        
+      } else {
+        x.style.display = "none";
+        y.style.display= "inline"
+        z.style.display = "none"
+      }
+    }
+</script>