app/views/genes/_failed_search.html.haml
%div{style: "float: right; margin-top: -15px; width: 20%"}
= render partial: 'shared/page_export'
%div.well{style: "margin-top: 15px;"}
%h3{style: "margin-top: -5px;"}
Unmatched Terms
- failed_terms.each do |term|
%li
= term
%div.well{style: "margin-top: -5px;"}
%h3{style: "margin-top: -5px; margin-bottom: -5px;"}
Multiple Matches
%div{style: "width: 200px; padding: 0", class: "container demo"}
- if ambiguous_results.count > 0
%div(class="panel-group" id="accordion" role="tablist" aria-multiselectable="true")
- ambiguous_result_presenters.uniq{|r| r.search_terms.first }.each do |result|
- term = result.search_terms.first
%ul{class: "tree", style: "margin-left: -15px;"}
%li
%input{type: "checkbox", checked: "checked", id: "#{'heading' + term}"}
%label{for: "#{'heading' + term}", class: "tree_label"}
%span
%input{class: "ambiguous search-term", type: "checkbox", name: term, checked: 1}
= term
%ul
- result.genes.each do |gene|
%li
%span{class: "tree_label"}
%input{class: "ambiguous sidebar-toggle #{term}", type: "checkbox", name: "#{gene.name + "-ambiguous"}", checked: 1}
= gene.name
- else
%div{style: "margin-top:15px;"}
%i
None found.
%div{style: "float: left; width: 78%;"}
%ul(class="result-list" id="list-results")
- if ambiguous_results.count > 0
- ambiguous_results.each do |result|
- term = result[:search_terms].first
%li{class: "interaction interaction-panel", "data-category" => "interaction", "data-name" => "Interaction", id: result.gene_name + "-ambiguous", style: "display: list-item; width: 100%;"}
= render partial: 'genes/categories_search_panel', locals: { term: result[:search_terms], gene: result[:gene_name], rows: result[:rows] }
- else
%li{class: "interaction interaction-panel", "data-category" => "interaction", "data-name" => "Interaction", style: "width: 100%; height: 300px;"}
%h3{style: "margin-left: 20px;"}
None of your search terms returned
%i
ambiguous
matches.
:css
/* ————————————————————–
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/* ————————————————————–
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree ul { padding-left: 0; margin: -5px 0 0 -2px; }
.tree > li:last-child { padding-bottom: 0; }
/* ————————————————————–
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #666; }
/* ————————————————————–
Tree expanded icon
*/
label.tree_label:before {
background: #000;
color: #fff;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
content: '+';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/* ————————————————————–
Tree branches
*/
.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid #777;
content: "";
}
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '';
}
label.tree_label:after { border-bottom: 0; }
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
ul {
list-style-type:none
}
input.ambiguous {
position: relative;
}