Commit 9e1de6ac authored by Mathieu Giraud's avatar Mathieu Giraud

Merge branch 'feature-c/integrate-vmi-for-prod' into 'dev'

Integrate vmi.js, a new framework for a future responsive behavior

See merge request !351
parents cb474b9f 5e9a9b61
Pipeline #50391 canceled with stages
......@@ -2,6 +2,12 @@
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
/* default tag color */
/* #dcffed also available */
#vmi-menu {
position: unset;
bottom: unset;
width: unset;
}
html {
height: 100%;
padding: 0px;
......@@ -9,6 +15,11 @@ html {
min-width: 1160px;
min-height: 250px;
}
body {
display: flex;
flex-flow: column;
overflow-x: hidden;
}
body,
svg {
font-family: ubuntulight, Arial, Helvetica, Sans-serif;
......@@ -40,6 +51,8 @@ ul {
list-style-type: none;
}
#visu-container {
position: relative;
flex: 1 1 auto;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
......@@ -51,11 +64,10 @@ ul {
background: #000000;
}
#top-container {
flex: 0 1 auto;
height: 32px;
width: 100%;
background: #000000;
position: fixed;
z-index: 1;
}
#top-container.alert {
background: yellow;
......@@ -97,11 +109,11 @@ ul {
}
#mid-container {
position: fixed;
display: flex;
flex: 1 1 auto;
top: 32px;
bottom: 125px ;
width: -moz-calc(100% - 12px);
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
width: calc(100% - 6px + 6px);
overflow: hidden;
background: #000000;
margin: 6px;
......@@ -116,16 +128,16 @@ ul {
width: 0px;
}
#left-container {
height: 100%;
display: flex;
flex-flow: column;
position: relative;
width: 475px;
float: left;
overflow-y: none;
-khtml-user-select: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
display: table;
}
#visu,
#visu2 {
......@@ -140,15 +152,11 @@ line {
stroke-width: 0.5;
}
/* left-container - info */
#info-row {
height: 200px;
display: table-row;
}
#info {
flex: 0 0 auto;
font-size: 13px;
padding: 3px;
background: #000000;
display: table-cell;
}
.info_line {
border-bottom: solid;
......@@ -213,12 +221,12 @@ line {
}
.axis_m {
stroke: #839496;
opacity: 0.5 ;
opacity: 0.5;
stroke-width: 20px;
}
.axis_m_other {
stroke: #839496;
opacity: 0.25 ;
opacity: 0.25;
stroke-width: 10px;
display: none;
}
......@@ -297,7 +305,7 @@ line {
.circle {
cursor: pointer;
-webkit-transition: fill 0.2s;
-o-transition: fill 0.2s;
-o-transition: fill 0.2s;
-ms-transition: fill 0.2s;
transition: fill 0.2s;
fill: #839496;
......@@ -394,22 +402,22 @@ line {
border-width: 6px;
border-color: #333333;
}
#list-row,
#data-row {
display: table-row;
#list {
flex: 1 1 auto;
height: 0px;
max-height: 100%;
}
#list,
#data {
display: table-cell;
}
#data-row {
height: 0.1px;
flex: 0 1 auto;
}
#list_clones {
flex: 1 1 auto;
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 30px);
/*100% - list_menu height */
max-height: 100%;
width: 100%;
padding: 2px;
}
#list_data {
......@@ -437,7 +445,7 @@ line {
font-size: 13px;
cursor: pointer;
-webkit-transition: color 0.2s;
-o-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
padding: 1px 4px 4px 1px;
......@@ -646,13 +654,13 @@ line {
bottom: 1px;
}
.highlight_seq {
top: .9em;
top: 0.9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: .428em;
letter-spacing: 0.428em;
/* (1-.7) / .7 */
left: .214em;
left: 0.214em;
}
.highlight {
display: inline-block;
......@@ -874,11 +882,7 @@ a.tag-link {
.modal.info-container {
top: 50px;
left: 495px;
max-width: -moz-calc(100% - 535px);
max-width: -webkit-calc(100% - 535px);
max-width: calc(100% - 535px);
height: -moz-calc(100% - 215px);
height: -webkit-calc(100% - 215px);
max-width: calc(100% - 475px + 60px);
height: calc(100% - 215px);
}
.modal.jstree-container {
......@@ -976,7 +980,7 @@ span.logo {
font-size: 60% ;
font-weight: bold;
vertical-align: super;
opacity: .8;
opacity: 0.8;
color: #f88;
}
.bot-bar {
......@@ -1013,9 +1017,7 @@ span.logo {
position: relative;
text-align: center;
float: left;
width: -moz-calc(100% - 1175px);
width: -webkit-calc(100% - 1175px);
width: calc(100% - 1175px);
width: calc(100% - (475px + 350px + 300px + 50));
overflow: hidden;
height: 1.1em;
}
......@@ -1042,26 +1044,32 @@ span.logo {
min-width: 150px;
margin-left: -6px;
border-top: none;
margin-top: -moz-calc(8px);
margin-top: -webkit-calc(8px);
margin-top: calc(8px);
margin-top: calc(32px - 24px);
z-index: 5;
overflow: hidden;
}
#bot-placeholder {
flex: 0 0 135px;
}
#bot-container {
position: fixed;
bottom: 0px;
left: 0px;
left: 0;
bottom: 0;
width: 100%;
border-top: solid;
border-width: 6px;
min-height: 125px;
}
#segmenter {
display: flex;
flex-flow: column;
}
.tn {
width: 120px;
display: inline-table;
}
#list_menu {
flex: 0 1 auto;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
......@@ -1199,7 +1207,7 @@ text.alert {
fill: red;
}
span.warningReads {
margin-left: .5em;
margin-left: 0.5em;
display: inline-block;
width: 1em;
text-align: center;
......
......@@ -2,6 +2,12 @@
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
/* default tag color */
/* #dcffed also available */
#vmi-menu {
position: unset;
bottom: unset;
width: unset;
}
html {
height: 100%;
padding: 0px;
......@@ -9,6 +15,11 @@ html {
min-width: 1160px;
min-height: 250px;
}
body {
display: flex;
flex-flow: column;
overflow-x: hidden;
}
body,
svg {
font-family: ubuntulight, Arial, Helvetica, Sans-serif;
......@@ -40,6 +51,8 @@ ul {
list-style-type: none;
}
#visu-container {
position: relative;
flex: 1 1 auto;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
......@@ -51,11 +64,10 @@ ul {
background: #ffffff;
}
#top-container {
flex: 0 1 auto;
height: 32px;
width: 100%;
background: #ffffff;
position: fixed;
z-index: 1;
}
#top-container.alert {
background: yellow;
......@@ -97,11 +109,11 @@ ul {
}
#mid-container {
position: fixed;
display: flex;
flex: 1 1 auto;
top: 32px;
bottom: 125px ;
width: -moz-calc(100% - 12px);
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
width: calc(100% - 6px + 6px);
overflow: hidden;
background: #ffffff;
margin: 6px;
......@@ -116,16 +128,16 @@ ul {
width: 0px;
}
#left-container {
height: 100%;
display: flex;
flex-flow: column;
position: relative;
width: 475px;
float: left;
overflow-y: none;
-khtml-user-select: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
display: table;
}
#visu,
#visu2 {
......@@ -140,15 +152,11 @@ line {
stroke-width: 0.5;
}
/* left-container - info */
#info-row {
height: 200px;
display: table-row;
}
#info {
flex: 0 0 auto;
font-size: 13px;
padding: 3px;
background: #ffffff;
display: table-cell;
}
.info_line {
border-bottom: solid;
......@@ -213,12 +221,12 @@ line {
}
.axis_m {
stroke: #657b83;
opacity: 0.5 ;
opacity: 0.5;
stroke-width: 20px;
}
.axis_m_other {
stroke: #657b83;
opacity: 0.25 ;
opacity: 0.25;
stroke-width: 10px;
display: none;
}
......@@ -297,7 +305,7 @@ line {
.circle {
cursor: pointer;
-webkit-transition: fill 0.2s;
-o-transition: fill 0.2s;
-o-transition: fill 0.2s;
-ms-transition: fill 0.2s;
transition: fill 0.2s;
fill: #657b83;
......@@ -394,22 +402,22 @@ line {
border-width: 6px;
border-color: #cccccc;
}
#list-row,
#data-row {
display: table-row;
#list {
flex: 1 1 auto;
height: 0px;
max-height: 100%;
}
#list,
#data {
display: table-cell;
}
#data-row {
height: 0.1px;
flex: 0 1 auto;
}
#list_clones {
flex: 1 1 auto;
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 30px);
/*100% - list_menu height */
max-height: 100%;
width: 100%;
padding: 2px;
}
#list_data {
......@@ -437,7 +445,7 @@ line {
font-size: 13px;
cursor: pointer;
-webkit-transition: color 0.2s;
-o-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
padding: 1px 4px 4px 1px;
......@@ -646,13 +654,13 @@ line {
bottom: 1px;
}
.highlight_seq {
top: .9em;
top: 0.9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: .428em;
letter-spacing: 0.428em;
/* (1-.7) / .7 */
left: .214em;
left: 0.214em;
}
.highlight {
display: inline-block;
......@@ -874,11 +882,7 @@ a.tag-link {
.modal.info-container {
top: 50px;
left: 495px;
max-width: -moz-calc(100% - 535px);
max-width: -webkit-calc(100% - 535px);
max-width: calc(100% - 535px);
height: -moz-calc(100% - 215px);
height: -webkit-calc(100% - 215px);
max-width: calc(100% - 475px + 60px);
height: calc(100% - 215px);
}
.modal.jstree-container {
......@@ -976,7 +980,7 @@ span.logo {
font-size: 60% ;
font-weight: bold;
vertical-align: super;
opacity: .8;
opacity: 0.8;
color: #f88;
}
.bot-bar {
......@@ -1013,9 +1017,7 @@ span.logo {
position: relative;
text-align: center;
float: left;
width: -moz-calc(100% - 1175px);
width: -webkit-calc(100% - 1175px);
width: calc(100% - 1175px);
width: calc(100% - (475px + 350px + 300px + 50));
overflow: hidden;
height: 1.1em;
}
......@@ -1042,26 +1044,32 @@ span.logo {
min-width: 150px;
margin-left: -6px;
border-top: none;
margin-top: -moz-calc(8px);
margin-top: -webkit-calc(8px);
margin-top: calc(8px);
margin-top: calc(32px - 24px);
z-index: 5;
overflow: hidden;
}
#bot-placeholder {
flex: 0 0 135px;
}
#bot-container {
position: fixed;
bottom: 0px;
left: 0px;
left: 0;
bottom: 0;
width: 100%;
border-top: solid;
border-width: 6px;
min-height: 125px;
}
#segmenter {
display: flex;
flex-flow: column;
}
.tn {
width: 120px;
display: inline-table;
}
#list_menu {
flex: 0 1 auto;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
......@@ -1199,7 +1207,7 @@ text.alert {
fill: red;
}
span.warningReads {
margin-left: .5em;
margin-left: 0.5em;
display: inline-block;
width: 1em;
text-align: center;
......
......@@ -2,6 +2,12 @@
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
/* default tag color */
/* #dcffed also available */
#vmi-menu {
position: unset;
bottom: unset;
width: unset;
}
html {
height: 100%;
padding: 0px;
......@@ -9,6 +15,11 @@ html {
min-width: 1160px;
min-height: 250px;
}
body {
display: flex;
flex-flow: column;
overflow-x: hidden;
}
body,
svg {
font-family: ubuntulight, Arial, Helvetica, Sans-serif;
......@@ -40,6 +51,8 @@ ul {
list-style-type: none;
}
#visu-container {
position: relative;
flex: 1 1 auto;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
......@@ -51,11 +64,10 @@ ul {
background: #ffffff;
}
#top-container {
flex: 0 1 auto;
height: 32px;
width: 100%;
background: #ffffff;
position: fixed;
z-index: 1;
}
#top-container.alert {
background: yellow;
......@@ -97,11 +109,11 @@ ul {
}
#mid-container {
position: fixed;
display: flex;
flex: 1 1 auto;
top: 32px;
bottom: 125px ;
width: -moz-calc(100% - 12px);
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
width: calc(100% - 6px + 6px);
overflow: hidden;
background: #ffffff;
margin: 6px;
......@@ -116,16 +128,16 @@ ul {
width: 0px;
}
#left-container {
height: 100%;
display: flex;
flex-flow: column;
position: relative;
width: 475px;
float: left;
overflow-y: none;
-khtml-user-select: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
display: table;
}
#visu,
#visu2 {
......@@ -140,15 +152,11 @@ line {
stroke-width: 0.5;
}
/* left-container - info */
#info-row {
height: 200px;
display: table-row;
}
#info {
flex: 0 0 auto;
font-size: 13px;
padding: 3px;
background: #ffffff;
display: table-cell;
}
.info_line {
border-bottom: solid;
......@@ -213,12 +221,12 @@ line {
}
.axis_m {
stroke: #657b83;
opacity: 0.5 ;
opacity: 0.5;
stroke-width: 20px;
}
.axis_m_other {
stroke: #657b83;
opacity: 0.25 ;
opacity: 0.25;
stroke-width: 10px;
display: none;
}
......@@ -297,7 +305,7 @@ line {
.circle {
cursor: pointer;
-webkit-transition: fill 0.2s;
-o-transition: fill 0.2s;
-o-transition: fill 0.2s;
-ms-transition: fill 0.2s;
transition: fill 0.2s;
fill: #657b83;
......@@ -394,22 +402,22 @@ line {
border-width: 6px;
border-color: #cccccc;
}
#list-row,
#data-row {
display: table-row;
#list {
flex: 1 1 auto;
height: 0px;
max-height: 100%;
}
#list,
#data {
display: table-cell;
}
#data-row {
height: 0.1px;
flex: 0 1 auto;
}
#list_clones {
flex: 1 1 auto;
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 30px);
/*100% - list_menu height */
max-height: 100%;
width: 100%;
padding: 2px;
}
#list_data {
......@@ -437,7 +445,7 @@ line {
font-size: 13px;
cursor: pointer;
-webkit-transition: color 0.2s;
-o-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
padding: 1px 4px 4px 1px;
......@@ -646,13 +654,13 @@ line {
bottom: 1px;
}
.highlight_seq {
top: .9em;
top: 0.9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: .428em;
letter-spacing: 0.428em;
/* (1-.7) / .7 */
left: .214em;
left: 0.214em;
}
.highlight {
display: inline-block;
......@@ -874,11 +882,7 @@ a.tag-link {
.modal.info-container {
top: 50px;
left: 495px;
max-width: -moz-calc(100% - 535px);
max-width: -webkit-calc(100% - 535px);
max-width: calc(100% - 535px);
height: -moz-calc(100% - 215px);
height: -webkit-calc(100% - 215px);
max-width: calc(100% - 475px + 60px);
height: calc(100% - 215px);
}
.modal.jstree-container {
......@@ -976,7 +980,7 @@ span.logo {
font-size: 60% ;
font-weight: bold;
vertical-align: super;
opacity: .8;
opacity: 0.8;
color: #f88;
}
.bot-bar {
......@@ -1013,9 +1017,7 @@ span.logo {
position: relative;
text-align: center;
float: left;
width: -moz-calc(100% - 1175px);
width: -webkit-calc(100% - 1175px);
width: calc(100% - 1175px);
width: calc(100% - (475px + 350px + 300px + 50));
overflow: hidden;
height: 1.1em;
}
......@@ -1042,26 +1044,32 @@ span.logo {
min-width: 150px;
margin-left: -6px;
border-top: none;
margin-top: -moz-calc(8px);
margin-top: -webkit-calc(8px);
margin-top: calc(8px);
margin-top: calc(32px - 24px);
z-index: 5;
overflow: hidden;
}
#bot-placeholder {
flex: 0 0 135px;
}
#bot-container {
position: fixed;
bottom: 0px;
left: 0px;
left: 0;
bottom: 0;
width: 100%;
border-top: solid;
border-width: 6px;
min-height: 125px;
}
#segmenter {
display: flex;
flex-flow: column;
}
.tn {
width: 120px;
display: inline-table;
}
#list_menu {