From 6b7a596928a300dc07bdd75d1c40b691225d8646 Mon Sep 17 00:00:00 2001
From: Mikael Salson <mikael.salson@univ-lille1.fr>
Date: Tue, 26 Mar 2019 18:38:08 +0100
Subject: [PATCH] index.html + css: display right part of the menu with flex

This requires to reorder elements in the HTML.
Thus they are now in a 'natural' order (ie. in the same order
as displayed). We use flex to make them appear contiguously the
ones after the other. Thus we don't need anymore float: right
apart from the #menu_right_part that was added.

Fix #3805
---
 browser/css/dark.css           |  9 ++++---
 browser/css/light.css          |  9 ++++---
 browser/css/segmenter_page.css |  9 ++++---
 browser/css/svg.css            |  9 ++++---
 browser/css/talk.css           |  9 ++++---
 browser/css/vidjil.less        | 10 +++++---
 browser/index.html             | 46 ++++++++++++++++++----------------
 7 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/browser/css/dark.css b/browser/css/dark.css
index b22ae7154..b21b5d85f 100644
--- a/browser/css/dark.css
+++ b/browser/css/dark.css
@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #000000;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid darkred;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #000000;
   cursor: pointer;
diff --git a/browser/css/light.css b/browser/css/light.css
index b8039f04f..944ba40e9 100644
--- a/browser/css/light.css
+++ b/browser/css/light.css
@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid #8b0000;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;
diff --git a/browser/css/segmenter_page.css b/browser/css/segmenter_page.css
index 232196f96..ce4b7c199 100644
--- a/browser/css/segmenter_page.css
+++ b/browser/css/segmenter_page.css
@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid #8b0000;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;
diff --git a/browser/css/svg.css b/browser/css/svg.css
index 09d7caf4b..e90ba23a3 100644
--- a/browser/css/svg.css
+++ b/browser/css/svg.css
@@ -83,11 +83,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -810,6 +806,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid darkred;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;
diff --git a/browser/css/talk.css b/browser/css/talk.css
index 0a3ae8143..9349a340b 100644
--- a/browser/css/talk.css
+++ b/browser/css/talk.css
@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid darkred;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;
diff --git a/browser/css/vidjil.less b/browser/css/vidjil.less
index b9eb69cca..29bf9fcba 100644
--- a/browser/css/vidjil.less
+++ b/browser/css/vidjil.less
@@ -123,11 +123,7 @@ ul{
 }
 
 #upload_summary {
-  float: right;
   display:none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: @background;
 }
@@ -983,6 +979,12 @@ span .end-codon-not-first {
   border: 1px solid @message_border_red;
 }
 
+#menu_right_part {
+   float:right;
+   display: flex;
+   justify-content: flex-end;
+}
+
 .buttonSelector {
   background : @background;
   cursor:pointer;
diff --git a/browser/index.html b/browser/index.html
index ca5fd458f..f7ffc8088 100644
--- a/browser/index.html
+++ b/browser/index.html
@@ -70,13 +70,6 @@
                                     m.loadAnalysis('upload_analysis');">start</button> 
         </div>
         
-        <div id="upload_summary" style="" class="menu" onmouseover="showSelector('upload_summary_selector');" onmouseout="hideSelector();">
-            <span id="upload_summary_label">upload</span>
-            <div id="upload_summary_selector" class="selector"><div>
-
-            </div></div>
-        </div>
-
         <div id="add_clone_menu">
             <span class="closeButton" onclick="cancel();">X</span>
             <h2>Add clones from sequences</h2>
@@ -282,39 +275,48 @@
                 </div>
             </div>
 
-            <div class="menu" id="alert" style="float: right;"></div>
-            <div id="logo" style="float: right;" onclick="console.log({'type': 'popup', 'default':'welcome'})">Vidjil <span class='logo'>(beta)</span></div>
 
-            <div class="menu" style="float: right" onmouseover="showSelector('helpSelector');"> help
-                <div id="helpSelector" class="selector"><div>
-                    <a class="buttonSelector getHelp" onclick="report.sendMail()">get support</a>
-                    <a class="buttonSelector" href="http://www.vidjil.org/doc/user" target="_blank">manual</a>
-                    <a class="buttonSelector" href="http://www.vidjil.org/doc/tutorial/mastering-vidjil.html" target="_blank">tutorial</a>
-                    <a class="buttonSelector devel-mode" onclick="my_tips.reset()">reset tips of the day</a>
-                </div></div>
+        <div id="menu_right_part">
+            <div id='live-ajax'>
+                <div class="active-container">
+                    <img src="images/ajax-loader.gif" />
                 </div>
+            </div>
 
-            <div style="float: right" class="menu" onmouseover="showSelector('paletteSelector');"> palette 
+            <div id="upload_summary" class="menu" onmouseover="showSelector('upload_summary_selector');" onmouseout="hideSelector();">
+              <span id="upload_summary_label">upload</span>
+              <div id="upload_summary_selector" class="selector"><div>
+
+              </div></div>
+            </div>
+
+            <div class="menu" onmouseover="showSelector('paletteSelector');"> palette
                 <div id="paletteSelector" class="selector"><div>
                     <a class="buttonSelector" onclick="changeStyle('solarizeL')">light</a>
                     <a class="buttonSelector" onclick="changeStyle('display')">light (presentation)</a>
                     <a class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a>
                 </div></div>
             </div>
-            <div style="float: right; margin: 5px;" id='live-ajax'>
-                <div class="active-container">
-                    <img src="images/ajax-loader.gif" />
+            <div class="menu" onmouseover="showSelector('helpSelector');"> help
+                <div id="helpSelector" class="selector"><div>
+                    <a class="buttonSelector getHelp" onclick="report.sendMail()">get support</a>
+                    <a class="buttonSelector" href="http://www.vidjil.org/doc/user" target="_blank">manual</a>
+                    <a class="buttonSelector" href="http://www.vidjil.org/doc/tutorial/mastering-vidjil.html" target="_blank">tutorial</a>
+                    <a class="buttonSelector devel-mode" onclick="my_tips.reset()">reset tips of the day</a>
+                </div></div>
                 </div>
-            </div>
 
-            <div id="fps" style="float: right; display: none"> </div>
+            <div id="fps" style="display: none"> </div>
             <div id="header_messages" class="message_container header"></div>
 
+            <div class="menu" id="alert"></div>
+            <div id="logo"  onclick="console.log({'type': 'popup', 'default':'welcome'})">Vidjil <span class='logo'>(beta)</span></div>
 <!--
 	    <div class="menu" style="float: right; margin-right:100px"><span style="padding: 4px 5px; background-color: #fef6e3; font-family: ubuntulight;">
 		<b>Maintenance:</b> Vidjil will be offline Tuesday 7, 11:00 → 13:00 CEST. Thank you for your understanding.
 	    </span></div>
 -->
+         </div>
         </div>  
         <!-- fin top-container-->
         
-- 
GitLab