Commit 6b7a5969 authored by Mikaël Salson's avatar Mikaël Salson

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
parent d2500ac5
Pipeline #70835 passed with stages
in 12 minutes and 7 seconds
...@@ -84,11 +84,7 @@ ul { ...@@ -84,11 +84,7 @@ ul {
top: 32px; top: 32px;
} }
#upload_summary { #upload_summary {
float: right;
display: none; display: none;
margin-right: 200px;
position: relative;
right: 200px;
z-index: 10; z-index: 10;
background-color: #000000; background-color: #000000;
} }
...@@ -812,6 +808,11 @@ span .end-codon { ...@@ -812,6 +808,11 @@ span .end-codon {
#add_clone_menu > #addclone_input.error { #add_clone_menu > #addclone_input.error {
border: 1px solid darkred; border: 1px solid darkred;
} }
#menu_right_part {
float: right;
display: flex;
justify-content: flex-end;
}
.buttonSelector { .buttonSelector {
background: #000000; background: #000000;
cursor: pointer; cursor: pointer;
......
...@@ -84,11 +84,7 @@ ul { ...@@ -84,11 +84,7 @@ ul {
top: 32px; top: 32px;
} }
#upload_summary { #upload_summary {
float: right;
display: none; display: none;
margin-right: 200px;
position: relative;
right: 200px;
z-index: 10; z-index: 10;
background-color: #ffffff; background-color: #ffffff;
} }
...@@ -812,6 +808,11 @@ span .end-codon { ...@@ -812,6 +808,11 @@ span .end-codon {
#add_clone_menu > #addclone_input.error { #add_clone_menu > #addclone_input.error {
border: 1px solid #8b0000; border: 1px solid #8b0000;
} }
#menu_right_part {
float: right;
display: flex;
justify-content: flex-end;
}
.buttonSelector { .buttonSelector {
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
......
...@@ -84,11 +84,7 @@ ul { ...@@ -84,11 +84,7 @@ ul {
top: 32px; top: 32px;
} }
#upload_summary { #upload_summary {
float: right;
display: none; display: none;
margin-right: 200px;
position: relative;
right: 200px;
z-index: 10; z-index: 10;
background-color: #ffffff; background-color: #ffffff;
} }
...@@ -812,6 +808,11 @@ span .end-codon { ...@@ -812,6 +808,11 @@ span .end-codon {
#add_clone_menu > #addclone_input.error { #add_clone_menu > #addclone_input.error {
border: 1px solid #8b0000; border: 1px solid #8b0000;
} }
#menu_right_part {
float: right;
display: flex;
justify-content: flex-end;
}
.buttonSelector { .buttonSelector {
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
......
...@@ -83,11 +83,7 @@ ul { ...@@ -83,11 +83,7 @@ ul {
top: 32px; top: 32px;
} }
#upload_summary { #upload_summary {
float: right;
display: none; display: none;
margin-right: 200px;
position: relative;
right: 200px;
z-index: 10; z-index: 10;
background-color: #ffffff; background-color: #ffffff;
} }
...@@ -810,6 +806,11 @@ span .end-codon { ...@@ -810,6 +806,11 @@ span .end-codon {
#add_clone_menu > #addclone_input.error { #add_clone_menu > #addclone_input.error {
border: 1px solid darkred; border: 1px solid darkred;
} }
#menu_right_part {
float: right;
display: flex;
justify-content: flex-end;
}
.buttonSelector { .buttonSelector {
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
......
...@@ -84,11 +84,7 @@ ul { ...@@ -84,11 +84,7 @@ ul {
top: 32px; top: 32px;
} }
#upload_summary { #upload_summary {
float: right;
display: none; display: none;
margin-right: 200px;
position: relative;
right: 200px;
z-index: 10; z-index: 10;
background-color: #ffffff; background-color: #ffffff;
} }
...@@ -812,6 +808,11 @@ span .end-codon { ...@@ -812,6 +808,11 @@ span .end-codon {
#add_clone_menu > #addclone_input.error { #add_clone_menu > #addclone_input.error {
border: 1px solid darkred; border: 1px solid darkred;
} }
#menu_right_part {
float: right;
display: flex;
justify-content: flex-end;
}
.buttonSelector { .buttonSelector {
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
......
...@@ -123,11 +123,7 @@ ul{ ...@@ -123,11 +123,7 @@ ul{
} }
#upload_summary { #upload_summary {
float: right;
display:none; display:none;
margin-right: 200px;
position: relative;
right: 200px;
z-index: 10; z-index: 10;
background-color: @background; background-color: @background;
} }
...@@ -983,6 +979,12 @@ span .end-codon-not-first { ...@@ -983,6 +979,12 @@ span .end-codon-not-first {
border: 1px solid @message_border_red; border: 1px solid @message_border_red;
} }
#menu_right_part {
float:right;
display: flex;
justify-content: flex-end;
}
.buttonSelector { .buttonSelector {
background : @background; background : @background;
cursor:pointer; cursor:pointer;
......
...@@ -70,13 +70,6 @@ ...@@ -70,13 +70,6 @@
m.loadAnalysis('upload_analysis');">start</button> m.loadAnalysis('upload_analysis');">start</button>
</div> </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"> <div id="add_clone_menu">
<span class="closeButton" onclick="cancel();">X</span> <span class="closeButton" onclick="cancel();">X</span>
<h2>Add clones from sequences</h2> <h2>Add clones from sequences</h2>
...@@ -282,39 +275,48 @@ ...@@ -282,39 +275,48 @@
</div> </div>
</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="menu_right_part">
<div id="helpSelector" class="selector"><div> <div id='live-ajax'>
<a class="buttonSelector getHelp" onclick="report.sendMail()">get support</a> <div class="active-container">
<a class="buttonSelector" href="http://www.vidjil.org/doc/user" target="_blank">manual</a> <img src="images/ajax-loader.gif" />
<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>
<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> <div id="paletteSelector" class="selector"><div>
<a class="buttonSelector" onclick="changeStyle('solarizeL')">light</a> <a class="buttonSelector" onclick="changeStyle('solarizeL')">light</a>
<a class="buttonSelector" onclick="changeStyle('display')">light (presentation)</a> <a class="buttonSelector" onclick="changeStyle('display')">light (presentation)</a>
<a class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a> <a class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a>
</div></div> </div></div>
</div> </div>
<div style="float: right; margin: 5px;" id='live-ajax'> <div class="menu" onmouseover="showSelector('helpSelector');"> help
<div class="active-container"> <div id="helpSelector" class="selector"><div>
<img src="images/ajax-loader.gif" /> <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>
<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 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;"> <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. <b>Maintenance:</b> Vidjil will be offline Tuesday 7, 11:00 → 13:00 CEST. Thank you for your understanding.
</span></div> </span></div>
--> -->
</div>
</div> </div>
<!-- fin top-container--> <!-- fin top-container-->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment