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

@@ -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;

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;

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;

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;

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;

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;

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,40 +275,49 @@
                 </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 id="menu_right_part">
+            <div id='live-ajax'>
+                <div class="active-container">
+                    <img src="images/ajax-loader.gif" />
+                </div>
+            </div>
+
+            <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 style="float: right" class="menu" onmouseover="showSelector('paletteSelector');"> palette 
+            <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>
+            <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 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-->
         
         <!-- MID-CONTAINER -->