Merge branch 'dev' of gitlab.inria.fr:vidjil/vidjil into feature-sc/gitlab-ci-artifacts

.gitlab-ci.yml

@@ -434,7 +434,7 @@ deploy_review_server:
     - sed -i -r "s/WEB2PY_ADMIN_PASSWORD=/WEB2PY_ADMIN_PASSWORD=$REVIEW_SERVER_ADMIN_PASSWORD/" docker-compose.yml
     - cd ..
     - rsync -av --exclude .git . $REVIEW_SERVER:$REVIEW_SERVER_PATH_SERVER$CI_BUILD_REF_SLUG || $(case "$?" in 0|23) exit 0 ;; *) exit $?; esac)
-    - ssh $REVIEW_SERVER "cd $REVIEW_SERVER_PATH_SERVER; ./install_certs.sh ${CI_BUILD_REF_SLUG}; cd ${CI_BUILD_REF_SLUG}/docker_${CI_BUILD_REF_SLUG}; mkdir -p postfix/ssl; docker-compose up -d mysql fuse uwsgi nginx workers"
+    - ssh $REVIEW_SERVER "cd $REVIEW_SERVER_PATH_SERVER; ./install_certs.sh ${CI_BUILD_REF_SLUG}; cd ${CI_BUILD_REF_SLUG}/docker_${CI_BUILD_REF_SLUG}; mkdir -p postfix/ssl; docker-compose up -d mysql fuse uwsgi nginx workers; sleep 20s; docker-compose exec -T uwsgi bash -c 'cd /usr/share/vidjil/server/web2py/applications/vidjil/scripts; /usr/local/bin/gosu 1005 bash launch_python_script.sh load-sql.py -n /usr/share/vidjil/docker/ci/ci.sql'"
   environment:
     name: review_server/$CI_BUILD_REF_NAME
     url: http://$CI_BUILD_REF_SLUG.server.ci.vidjil.org/browser/

browser/css/dark.css

@@ -4,9 +4,15 @@
 /* default tag color */
 /* #dcffed also available */
 #vmi-menu {
-  position: unset;
-  bottom: unset;
+  top: 32px;
+  right: 0;
   width: unset;
+  background-color: #000000;
+  margin: 6px 0 0 0;
+}
+#vmi-menu div {
+  padding: 5px;
+  border: 1px solid;
 }
 html {
   height: 100%;
@@ -52,14 +58,15 @@ ul {
 }
 #visu-container {
   position: relative;
+  display: flex;
   flex: 1 1 auto;
+  flex-flow: column;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   user-select: none;
-  height: 100%;
-  margin: auto;
+  width: 100%;
   overflow: hidden;
   background: #000000;
 }
@@ -107,28 +114,38 @@ ul {
   user-select: none;
   overflow: hidden;
 }
-#mid-container {
+#vidjil-panels {
   position: fixed;
-  display: flex;
-  flex: 1 1 auto;
   top: 32px;
+  left: 0;
   bottom: 125px ;
-  width: calc(100% - 6px + 6px);
-  overflow: hidden;
   background: #000000;
   margin: 6px;
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+}
+.vidjil-panels-left {
+  width: calc(100% - 6px - 70px);
+}
+.vidjil-panels-full {
+  width: calc(100% - 6px);
+}
+#mid-container {
+  display: flex;
+  flex: auto;
+  overflow: hidden;
 }
 #right-container {
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: column;
   float: right;
-  width: 0px;
+  width: 475px;
 }
 #left-container {
   display: flex;
+  flex: 1 0 auto;
   flex-flow: column;
   position: relative;
   width: 475px;
@@ -142,11 +159,16 @@ ul {
 #visu,
 #visu2 {
   height: 50%;
+  display: flex;
+  flex: auto;
   width: 100%;
 }
 #visu2 {
   max-height: calc(100% - 6px);
 }
+#visu3 {
+  height: 100%;
+}
 line {
   stroke: #586e75;
   stroke-width: 0.5;
@@ -414,6 +436,7 @@ line {
 #list {
   flex: 1 1 auto;
   height: 0px;
+  min-height: 20%;
   max-height: 100%;
   display: flex;
   flex-direction: column;
@@ -445,12 +468,9 @@ line {
   padding-right: 30px;
 }
 .list {
-  width: 445px;
-  display: block;
   padding: 2px;
 }
 .listElem {
-  width: 445px;
   font-size: 13px;
   cursor: pointer;
   -webkit-transition: color 0.2s;
@@ -459,19 +479,20 @@ line {
   transition: color 0.2s;
   padding: 1px 4px 4px 1px;
   height: 14px;
+  display: flex;
 }
 .selected {
   color: #fdf6e3;
 }
 .nameBox {
-  width: 300px;
   margin-right: 10px;
   overflow: hidden;
   display: inline-block;
   height: 16px;
   position: relative;
-  float: left;
   white-space: nowrap;
+  display: flex;
+  flex: 1 1 auto;
 }
 .seq-fixed .nameBox {
   width: 250px;
@@ -479,7 +500,6 @@ line {
 .list .axisBox,
 .axisBox span {
   max-width: 52px;
-  float: right;
   overflow: hidden;
   display: inline-block;
   max-height: 16px;
@@ -500,9 +520,8 @@ line {
 }
 .starBox {
   width: 16px;
-  float: right;
   height: 16px;
-  display: inline-block;
+  display: inline-flex;
   user-select: none;
   overflow: hidden;
 }
@@ -517,9 +536,8 @@ line {
 .infoBox {
   font-size: 90%;
   width: 16px;
-  float: right;
   height: 15px;
-  display: inline-block;
+  display: inline-flex;
   user-select: none;
   text-align: center;
   border: solid;
@@ -588,8 +606,6 @@ line {
 }
 /*style segmenter element*/
 .list_select {
-  width: 445px;
-  display: block;
   border: solid;
   border-width: 2px;
   padding: 0px;
@@ -606,7 +622,7 @@ line {
 }
 .seq-fixed {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: auto;
   margin: -2px;
   padding: 2px;
@@ -1067,9 +1083,8 @@ span.logo {
 }
 #bot-container {
   position: fixed;
-  left: 0;
   bottom: 0;
-  width: 100%;
+  left: 6px;
   border-top: solid;
   border-width: 6px;
   min-height: 125px;
@@ -1343,11 +1358,9 @@ span.warningReads {
 .axis_select select[selected=selected] {
   color: #fdf6e3;
 }
-#visu-separator {
+.visu-separator {
   position: relative;
   height: 6px;
-  cursor: move;
-  cursor: -webkit-grab;
   background: #333333;
 }
 #bot-separator {
@@ -1358,15 +1371,17 @@ span.warningReads {
   position: relative;
   top: -6px;
 }
-#vertical-separator {
+#vertical-separator,
+#vertical-separator-right {
   position: relative;
   float: left;
-  height: 100%;
   width: 6px;
-  line-height: calc(100% - 1px);
   background: #333333;
   cursor: pointer;
 }
+#vertical-separator-right {
+  float: right;
+}
 #visu-separator:hover,
 #vertical-separator:hover,
 #bot-separator:hover {
@@ -1910,11 +1925,12 @@ table.log textarea {
   border: 1px solid #333333;
   overflow-wrap: break-word;
   overflow-y: hidden;
-  max-width: 457px;
   min-height: 32px;
   max-height: 32px;
-  width: 100%;
+  width: 99%;
   background-color: #000000;
+  margin-left: auto;
+  margin-right: auto;
 }
 .patient_info_text {
   margin-bottom: 5px;

browser/css/icons/Makefile

@@ -11,7 +11,7 @@ retrieve:
 
 ### Don't edit below ###
 
-FONTELLO_HOST ?= http://fontello.com
+FONTELLO_HOST ?= https://fontello.com
 
 fontopen:
 	@if test ! `which curl` ; then \

browser/css/light.css

@@ -4,9 +4,15 @@
 /* default tag color */
 /* #dcffed also available */
 #vmi-menu {
-  position: unset;
-  bottom: unset;
+  top: 32px;
+  right: 0;
   width: unset;
+  background-color: #ffffff;
+  margin: 6px 0 0 0;
+}
+#vmi-menu div {
+  padding: 5px;
+  border: 1px solid;
 }
 html {
   height: 100%;
@@ -52,14 +58,15 @@ ul {
 }
 #visu-container {
   position: relative;
+  display: flex;
   flex: 1 1 auto;
+  flex-flow: column;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   user-select: none;
-  height: 100%;
-  margin: auto;
+  width: 100%;
   overflow: hidden;
   background: #ffffff;
 }
@@ -107,28 +114,38 @@ ul {
   user-select: none;
   overflow: hidden;
 }
-#mid-container {
+#vidjil-panels {
   position: fixed;
-  display: flex;
-  flex: 1 1 auto;
   top: 32px;
+  left: 0;
   bottom: 125px ;
-  width: calc(100% - 6px + 6px);
-  overflow: hidden;
   background: #ffffff;
   margin: 6px;
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+}
+.vidjil-panels-left {
+  width: calc(100% - 6px - 70px);
+}
+.vidjil-panels-full {
+  width: calc(100% - 6px);
+}
+#mid-container {
+  display: flex;
+  flex: auto;
+  overflow: hidden;
 }
 #right-container {
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: column;
   float: right;
-  width: 0px;
+  width: 475px;
 }
 #left-container {
   display: flex;
+  flex: 1 0 auto;
   flex-flow: column;
   position: relative;
   width: 475px;
@@ -142,11 +159,16 @@ ul {
 #visu,
 #visu2 {
   height: 50%;
+  display: flex;
+  flex: auto;
   width: 100%;
 }
 #visu2 {
   max-height: calc(100% - 6px);
 }
+#visu3 {
+  height: 100%;
+}
 line {
   stroke: #93a1a1;
   stroke-width: 0.5;
@@ -414,6 +436,7 @@ line {
 #list {
   flex: 1 1 auto;
   height: 0px;
+  min-height: 20%;
   max-height: 100%;
   display: flex;
   flex-direction: column;
@@ -445,12 +468,9 @@ line {
   padding-right: 30px;
 }
 .list {
-  width: 445px;
-  display: block;
   padding: 2px;
 }
 .listElem {
-  width: 445px;
   font-size: 13px;
   cursor: pointer;
   -webkit-transition: color 0.2s;
@@ -459,19 +479,20 @@ line {
   transition: color 0.2s;
   padding: 1px 4px 4px 1px;
   height: 14px;
+  display: flex;
 }
 .selected {
   color: #002b36;
 }
 .nameBox {
-  width: 300px;
   margin-right: 10px;
   overflow: hidden;
   display: inline-block;
   height: 16px;
   position: relative;
-  float: left;
   white-space: nowrap;
+  display: flex;
+  flex: 1 1 auto;
 }
 .seq-fixed .nameBox {
   width: 250px;
@@ -479,7 +500,6 @@ line {
 .list .axisBox,
 .axisBox span {
   max-width: 52px;
-  float: right;
   overflow: hidden;
   display: inline-block;
   max-height: 16px;
@@ -500,9 +520,8 @@ line {
 }
 .starBox {
   width: 16px;
-  float: right;
   height: 16px;
-  display: inline-block;
+  display: inline-flex;
   user-select: none;
   overflow: hidden;
 }
@@ -517,9 +536,8 @@ line {
 .infoBox {
   font-size: 90%;
   width: 16px;
-  float: right;
   height: 15px;
-  display: inline-block;
+  display: inline-flex;
   user-select: none;
   text-align: center;
   border: solid;
@@ -588,8 +606,6 @@ line {
 }
 /*style segmenter element*/
 .list_select {
-  width: 445px;
-  display: block;
   border: solid;
   border-width: 2px;
   padding: 0px;
@@ -606,7 +622,7 @@ line {
 }
 .seq-fixed {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: auto;
   margin: -2px;
   padding: 2px;
@@ -1067,9 +1083,8 @@ span.logo {
 }
 #bot-container {
   position: fixed;
-  left: 0;
   bottom: 0;
-  width: 100%;
+  left: 6px;
   border-top: solid;
   border-width: 6px;
   min-height: 125px;
@@ -1343,11 +1358,9 @@ span.warningReads {
 .axis_select select[selected=selected] {
   color: #002b36;
 }
-#visu-separator {
+.visu-separator {
   position: relative;
   height: 6px;
-  cursor: move;
-  cursor: -webkit-grab;
   background: #cccccc;
 }
 #bot-separator {
@@ -1358,15 +1371,17 @@ span.warningReads {
   position: relative;
   top: -6px;
 }
-#vertical-separator {
+#vertical-separator,
+#vertical-separator-right {
   position: relative;
   float: left;
-  height: 100%;
   width: 6px;
-  line-height: calc(100% - 1px);
   background: #cccccc;
   cursor: pointer;
 }
+#vertical-separator-right {
+  float: right;
+}
 #visu-separator:hover,
 #vertical-separator:hover,
 #bot-separator:hover {
@@ -1910,11 +1925,12 @@ table.log textarea {
   border: 1px solid #cccccc;
   overflow-wrap: break-word;
   overflow-y: hidden;
-  max-width: 457px;
   min-height: 32px;
   max-height: 32px;
-  width: 100%;
+  width: 99%;
   background-color: #ffffff;
+  margin-left: auto;
+  margin-right: auto;
 }
 .patient_info_text {
   margin-bottom: 5px;

browser/css/segmenter_page.css

@@ -4,9 +4,15 @@
 /* default tag color */
 /* #dcffed also available */
 #vmi-menu {
-  position: unset;
-  bottom: unset;
+  top: 32px;
+  right: 0;
   width: unset;
+  background-color: #ffffff;
+  margin: 6px 0 0 0;
+}
+#vmi-menu div {
+  padding: 5px;
+  border: 1px solid;
 }
 html {
   height: 100%;
@@ -52,14 +58,15 @@ ul {
 }
 #visu-container {
   position: relative;
+  display: flex;
   flex: 1 1 auto;
+  flex-flow: column;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   user-select: none;
-  height: 100%;
-  margin: auto;
+  width: 100%;
   overflow: hidden;
   background: #ffffff;
 }
@@ -107,28 +114,38 @@ ul {
   user-select: none;
   overflow: hidden;
 }
-#mid-container {
+#vidjil-panels {
   position: fixed;
-  display: flex;
-  flex: 1 1 auto;
   top: 32px;
+  left: 0;
   bottom: 125px ;
-  width: calc(100% - 6px + 6px);
-  overflow: hidden;
   background: #ffffff;
   margin: 6px;
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+}
+.vidjil-panels-left {
+  width: calc(100% - -64px);
+}
+.vidjil-panels-full {
+  width: calc(100% - 6px);
+}
+#mid-container {
+  display: flex;
+  flex: auto;
+  overflow: hidden;
 }
 #right-container {
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: column;
   float: right;
-  width: 0px;
+  width: 475px;
 }
 #left-container {
   display: flex;
+  flex: 1 0 auto;
   flex-flow: column;
   position: relative;
   width: 475px;
@@ -142,11 +159,16 @@ ul {
 #visu,
 #visu2 {
   height: 50%;
+  display: flex;
+  flex: auto;
   width: 100%;
 }
 #visu2 {
   max-height: calc(100% - 6px);
 }
+#visu3 {
+  height: 100%;
+}
 line {
   stroke: #93a1a1;
   stroke-width: 0.5;
@@ -221,12 +243,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;