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