Commit 995c5ed2 authored by Armand Bour's avatar Armand Bour

Start implementing list view in segmenter page WIP

parent 39298066
@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%;
......
......@@ -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>
......
......@@ -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);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment