Start implementing list view in segmenter page WIP

browser/css/segmenter_page.less

 @import "light.less";
 
+// Reset
+
 body {
     line-height: 20px;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
     font-weight: bold;
     line-height: 40px;
 }
 
-h1, h2, div, p {
+h1,
+h2,
+div,
+p {
     margin: 0;
     padding: 0;
 }
@@ -35,17 +42,36 @@ textarea {
     transition-delay: 0s, 0s;
 }
 
-.flexbox {
+// Mixins
+
+.mixFlex(@order, @value) {
+    -webkit-flex: @order @value;
+    -moz-flex: @order @value;
+    -ms-flex: @order @value;
+    flex: @order @value;
+}
+
+.mixDisplayFlex {
     display: -ms-Flexbox;
     -ms-box-orient: horizontal;
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flex;
     display: flex;
-    -webkit-flex-flow: row wrap;
-    -moz-flex-flow: row wrap;
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
+}
+
+.mixFlexFlow(@direction, @wrap) {
+    -webkit-flex-flow: @direction @wrap;
+    -moz-flex-flow: @direction @wrap;
+    -ms-flex-flow: @direction @wrap;
+    flex-flow: @direction @wrap;
+}
+
+// Actual CSS
+
+.flexbox {
+    .mixDisplayFlex();
+    .mixFlexFlow(row, wrap);
 }
 
 .panel {
@@ -87,7 +113,8 @@ textarea {
     margin-left: 0.2%;
 }
 
-#form_submit, #form_sequences_file {
+#form_submit,
+#form_sequences_file {
     display: inline;
 }
 
@@ -96,10 +123,7 @@ textarea {
 }
 
 #form_panel {
-    -webkit-flex: 1 60%;
-    -moz-flex: 1 60%;
-    -ms-flex: 1 60%;
-    flex: 1 60%;
+    .mixFlex(1, 60%);
     height: 95%;
     padding: 2%;
     position: relative;
@@ -113,23 +137,28 @@ textarea {
 }
 
 #scatter_panel {
-  -webkit-flex: 2 32%;
-  -moz-flex: 2 32%;
-  -ms-flex: 2 32%;
-  flex: 2 32%;
+    .mixFlex(2, 32%);
 }
 
-#segmenter_panel {
-  bottom: 0;
-  height: 144px;
-  position: fixed;
-  width: 97.2%;
+#footer_panel {
+    bottom: 0;
+    height: 172px;
+    position: fixed;
+    width: 100%;
 }
 
-#footer_panel {
-    display: inline-block;
-    float: right;
-    padding: 0.4% 1.4%;
+#segmenter_panel,
+#list_panel {
+  height: 100%;
+}
+
+#list_panel {
+    .mixFlex(1, 300px);
+    width: 300px;
+}
+
+#segmenter_panel {
+    .mixFlex(2, 62%);
 }
 
 #copyright {
@@ -142,7 +171,6 @@ textarea {
 
 .vidjil_view {
     border-radius: 0.1em;
-    /*border: 1px solid silver;*/
     position: relative;
     height: 100%;
     width: 100%;

browser/segmenter_page.html

@@ -43,10 +43,20 @@
             </div>
         </div>
 
-        <div id="segmenter_panel" class="panel">
-            <div id="segmenter_container" class="vidjil_view visible">
+        <div id="footer_panel" class="flexbox">
+          <div id="list_panel" class="panel twopanels_left">
+              <div id="list_container" class="vidjil_view visible">
 
-            </div>
+              </div>
+              <div id="data_container" class="vidjil_view visible">
+
+              </div>
+          </div>
+          <div id="segmenter_panel" class="panel twopanels_right">
+              <div id="segmenter_container" class="vidjil_view visible">
+
+              </div>
+          </div>
         </div>
         <script data-main="js/app.js" src="js/lib/require.js"></script>
         <script src="js/eventListenerComp.js"></script>

browser/segmenter_page.js

@@ -2,7 +2,7 @@ var model;
 var segmenter;
 var scatter;
 var console;
-
+var list;
 /**
  * Validates the form, and returns the data if it was successfully validated.
  * Display errors if the form is invalid.
@@ -174,6 +174,7 @@ function main() {
     model = new Model();
     segmenter = new Segment('segmenter_container', model);
     scatter = new ScatterPlot('scatter_container', model);
+    list = new List('list_container', 'data_container', model);
     console = new Com(window.console);
     setCrossDomainModel(model);