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