Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
vidjil
vidjil
Commits
995c5ed2
Commit
995c5ed2
authored
Jan 12, 2017
by
Armand Bour
Browse files
Start implementing list view in segmenter page WIP
parent
39298066
Changes
3
Hide whitespace changes
Inline
Side-by-side
browser/css/segmenter_page.less
View file @
995c5ed2
@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%);
}
#
segmen
ter_panel {
bottom: 0;
height: 1
44
px;
position: fixed;
width:
97.2
%;
#
foo
ter_panel {
bottom: 0;
height: 1
72
px;
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
View file @
995c5ed2
...
...
@@ -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
View file @
995c5ed2
...
...
@@ -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
);
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment