Skip to content

Commit

Permalink
Fixed left menu structure so that icons are clickable too, and highli…
Browse files Browse the repository at this point in the history 
…ght surrounds entire current page indicator
  • Loading branch information
@jorvis
jorvis committed Dec 12, 2023
1 parent 97c99ae commit abce450
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 27 deletions.
78 changes: 52 additions & 26 deletions www/include/primary_nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
<ul class="menu-list">
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-monitor"></i></span>
<span class="icon-text-part"><a class="icon-link-part is-active" tool="workspace" href="./index.html">My Workspace</a></span>
<a class="icon-link-part is-active" tool="workspace" href="./index.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-monitor"></i></span>
<span class="icon-text-part">My Workspace</span>
</a>
</span>
</a>
</li>
Expand All @@ -23,14 +25,18 @@
<ul class="menu-list">
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-test-tube"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="search_expression">Gene Expression</a></span>
<a class="icon-link-part" tool="search_expression">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-test-tube"></i></span>
<span class="icon-text-part">Gene Expression</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-table-search"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="search_datasets" href="./dataset_explorer.html">Datasets</a></span>
<a class="icon-link-part" tool="search_datasets" href="./dataset_explorer.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-table-search"></i></span>
<span class="icon-text-part">Datasets</span>
</a>
</span>
</li>
</ul>
Expand All @@ -40,32 +46,42 @@
<ul class="menu-list">
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-chart-line"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="sc_workbench" href="./analyze_dataset.html">Single Cell Workbench</a></span>
<a class="icon-link-part" tool="sc_workbench" href="./analyze_dataset.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-chart-line"></i></span>
<span class="icon-text-part">Single Cell Workbench</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-compare-horizontal"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="compare" href="./compare_datasets.html">Comparison Tool</a></span>
<a class="icon-link-part" tool="compare" href="./compare_datasets.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-compare-horizontal"></i></span>
<span class="icon-text-part">Comparison Tool</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-chart-box-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="sg_curator" href="./dataset_curator.html">Single-gene Curator</a></span>
<a class="icon-link-part" tool="sg_curator" href="./dataset_curator.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-chart-box-outline"></i></span>
<span class="icon-text-part">Single-gene Curator</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-chart-box-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="mg_displays" href="./multigene_curator.html">Multi-gene Displays</a></span>
<a class="icon-link-part" tool="mg_displays" href="./multigene_curator.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-chart-box-outline"></i></span>
<span class="icon-text-part">Multi-gene Displays</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-view-dashboard-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="epiviz">Epiviz Panel Designer</a></span>
<a class="icon-link-part" tool="epiviz">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-view-dashboard-outline"></i></span>
<span class="icon-text-part">Epiviz Panel Designer</span>
</a>
</span>
</li>
</ul>
Expand All @@ -75,20 +91,26 @@
<ul class="menu-list">
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-folder-open-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="manage_dataset" href="./dataset_explorer.html">Dataset Collections</a></span>
<a class="icon-link-part" tool="manage_dataset" href="./dataset_explorer.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-folder-open-outline"></i></span>
<span class="icon-text-part">Dataset Collections</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-18px mdi-folder-text-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="manage_genes" href="./gene_collection_manager.html">Gene Collections</a></span>
<a class="icon-link-part" tool="manage_genes" href="./gene_collection_manager.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-18px mdi-folder-text-outline"></i></span>
<span class="icon-text-part">Gene Collections</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-cloud-upload-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part" tool="upload_dataset" href="./upload_dataset.html">Dataset Uploader</a></span>
<a class="icon-link-part" tool="upload_dataset" href="./upload_dataset.html">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-cloud-upload-outline"></i></span>
<span class="icon-text-part">Dataset Uploader</span>
</a>
</span>
</li>
</ul>
Expand All @@ -98,14 +120,18 @@
<ul class="menu-list">
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-help-circle-outline"></i></span>
<span class="icon-text-part"><a class="icon-link-part">Help</a></span>
<a class="icon-link-part">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-help-circle-outline"></i></span>
<span class="icon-text-part">Help</span>
</a>
</span>
</li>
<li>
<span class="icon-text is-align-items-center is-flex">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-face-agent"></i></span>
<span class="icon-text-part"><a class="icon-link-part">Feedback</a></span>
<a class="icon-link-part">
<span class="icon icon-image-part is-medium"><i class="mdi mdi-24px mdi-face-agent"></i></span>
<span class="icon-text-part">Feedback</span>
</a>
</span>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion www/js/common.v2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {

// build the tooltips based on the values of the actual menu labels
document.querySelectorAll('span.icon-image-part').forEach(function (element) {
const text = element.parentNode.querySelector('a.icon-link-part').textContent;
const text = element.parentNode.querySelector('span.icon-text-part').textContent;
element.setAttribute('data-tooltip', text);
});
}
Expand Down

0 comments on commit abce450

Please sign in to comment.