genome/dgi-db

#notice= notice
=content_for :title do
  =tx "title"
=content_for :header do
  %h2
    =tx "title_main"
    %small
      =tx "title_small"
      %a(href="/faq#difference")
        =icon('question-sign')

.container-fluid.search-results
  .tabbable
    %ul.nav.nav-tabs
      %li.active
        %a(href="#successful" data-toggle="tab") Unique Matches
      %li
        %a(href="#failed" data-toggle="tab") Ambiguous or Unmatched
      %li
        %a(href="#by_categories" data-toggle="tab") By Category
    .tab-content{style: "margin-left: -30px; margin-top: 20px;"}
      -if @search_results.show_result_categories?
        .tab-pane.active#successful
          .row-fluid
            .span12
              - definite_results = @search_results.unique_matches
              = render partial: 'genes/successful_search', locals: {definite_results: definite_results} #use @search_mode to determine type of view, just use one set of templates
        .tab-pane#failed
          .row-fluid
            .span12
              - ambiguous_results = @search_results.ambiguous_matches
              - ambiguous_result_presenters = @search_results.ambiguous_result_presenters
              - failed_results = @search_results.no_results_results
              - if failed_results.any?
                - failed_terms = failed_results.map{|result| result.search_term}
              - else
                - failed_terms = []
              = render partial: 'genes/failed_search', locals: {ambiguous_results: ambiguous_results, ambiguous_result_presenters: ambiguous_result_presenters, failed_terms: failed_terms}
      .tab-pane.fade#by_categories
        -if @search_results.show_genes_by_category?
          .row-fluid
            .span12
              =render partial: 'genes/results_by_category_table', locals: {title: "Results Grouped by Categories", categories: @search_results.genes_by_category, tooltip_text: tx('search_results_by_categories_flag'), subtitle: "Number of search terms matching genes in each druggable gene category." }

:css
  .dataTables_wrapper > div.row {
    margin: 0;
  }
  .row-fluid {
    width: 100%;
    display: block;
    margin-left: 30px;
    float: left;
  }
  .row-fluid [class*="span"] {
    display: block;
    box-sizing: border-box;
    float: left;
    margin-left: 10px;
    width: 98%;
  }
  .row-fluid > .span12 > .well .span6 {
    width: 48%;
  }
  .row-fluid > .span6 {
    box-sizing: border-box;
    width: 48.7%;
    float: left;
    display: block;
  }
  .pagination {
    display: block;
  }
  .pagination ul {
    display: inline-block;
    margin: 5px 0 10px 25px;
    padding: 0;
    list-style-type: disc;
    border-radius: 4px;
    border-collapse: separate; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .pagination ul > li {
    display: inline;
    line-height: 20px;
  }
  .pagination ul>li>a, .pagination ul>li>span {
    float: left;
    padding: 4px 12px;
    line-height: 20px;
    border: 1px solid #dddddd;
  }
  .table-bordered {
    border-radius: 4px;
    border-collapse: separate; 
    border-spacing: 0;
    border-left: 0;
  }
  .table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    display: table-cell;
    border-top: 10px solid #dddddd;
    margin: 10px;
  }
  .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    display: table-cell;
    border: 0;
    margin: 10px;
  }
  .table > tbody > tr > td {
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd
  }
  .table > thead > tr > th {
    border-left: 1px solid #dddddd;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid > .span12 > .well .span6:first-child {
    float: left;
    margin-left: -20px;
  }
  .row-fluid > .span12 > .well .span6:nth-child(2) {
    float: right;
  }

=javascript_include_tag "jquery.dataTables.min"
=javascript_include_tag "pagination_bootstrap"
=javascript_include_tag "table-export"
=javascript_include_tag "jquery.smartresize"
=javascript_include_tag "trunk8"

:javascript
  $(".sidebar-toggle").on("click", function() {
    name = "#" + this.name;
    $(name).toggle();
  });

  $(".ambiguous.search-term").on("click", function() {
    name = "." + this.name;
    $(name).click();
  });

  $('table').each(function(index){
    $(this).find('> tbody > tr').hide().slice(0, 10).show();
  });
  $(".show-all").on("click", function() {
    var tbl = $(this).prev();
    $("tbody > tr", tbl).show();
    $("#nrows", $(this).next().next().next()).html(tbl.find('tr:visible').length - 1);
  });
  $(".show-more").on("click", function() {
    var tbl = $(this).prev().prev();
    $("tbody > tr", tbl).slice(0, tbl.find('tr:visible').length + 10).show();
    $("#nrows", $(this).next().next()).html(tbl.find('tr:visible').length - 1);
  });
  $(".show-less").on("click", function() {
    var tbl = $(this).prev().prev().prev();
    tbl.find('> tbody > tr').hide().slice(0, 10).show();
    $("#nrows", $(this).next()).html(tbl.find('tr:visible').length - 1);
  });

  $(document).ready(function () {
    var activeTab = $('#' + window.location.hash.substr(2));
    if(activeTab.length) {
      $('a[href="' + "#" + window.location.hash.substr(2) + '"]').trigger('click');
    } else {
      $('a[href="' + "#successful" + '"]').trigger('click');
    }
  });

  window.addEventListener("popstate", function() {
    var activeTab = $('#' + window.location.hash.substr(2));
    if (activeTab.length) {
      $('a[href="' + "#" + window.location.hash.substr(2) + '"]').trigger('click');
    } else {
      $('a[href="' + "#successful" + '"]').trigger('click');
    }
  });

  $(".tabbable li a").click(function () {
    window.location.hash = "_" + $(this).attr('href').substr(1);
    return true;
  });