diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js index c52cd89..36bb26c 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js @@ -1,117 +1,94 @@ const masonryBtn = document.getElementById("masonry-btn"); const stdBtn = document.getElementById("std-btn"); -const masonryView = document.getElementById('masonry-view'); -const stdView = document.getElementById('std-view'); +const masonryView = document.getElementById("masonry-view"); +const stdView = document.getElementById("std-view"); updateDisplayMode(); function setDisplayMode(displayMode) { - localStorage.setItem('displayMode', displayMode); + localStorage.setItem("displayMode", displayMode); } function getDisplayMode() { - return localStorage.getItem('displayMode'); + return localStorage.getItem("displayMode"); } function updateDisplayMode() { - const currentDisplayMode = getDisplayMode() || 'masonry'; - switch (currentDisplayMode) { - case 'masonry': - setMasonryView(); - masonryView.style.display = ""; - stdView.style.display = "none"; - masonryBtn.classList.toggle("highlighted-btn"); - stdBtn.classList.remove("highlighted-btn"); - break; - case 'standard': - masonryView.style.display = "none"; - stdView.style.display = ""; - stdBtn.classList.toggle("highlighted-btn"); - masonryBtn.classList.remove("highlighted-btn"); - break; - default: - break; - } + const currentDisplayMode = getDisplayMode() || "masonry"; + switch (currentDisplayMode) { + case "masonry": + setMasonryView(); + masonryView.style.display = ""; + stdView.style.display = "none"; + masonryBtn.classList.toggle("highlighted-btn"); + stdBtn.classList.remove("highlighted-btn"); + break; + case "standard": + masonryView.style.display = "none"; + stdView.style.display = ""; + stdBtn.classList.toggle("highlighted-btn"); + masonryBtn.classList.remove("highlighted-btn"); + break; + default: + break; + } } // Switch to the next mode masonryBtn.addEventListener("click", () => { - if (getDisplayMode() !== 'masonry') { - setDisplayMode('masonry'); - updateDisplayMode(); - } + if (getDisplayMode() !== "masonry") { + setDisplayMode("masonry"); + updateDisplayMode(); + } }); stdBtn.addEventListener("click", () => { - if (getDisplayMode() !== 'standard') { - setDisplayMode('standard'); - updateDisplayMode(); - } + if (getDisplayMode() !== "standard") { + setDisplayMode("standard"); + updateDisplayMode(); + } }); - function setMasonryView() { - // Initialize Masonry - var masonryGrid = document.getElementById("masonry-view"); - var masonry = new Masonry(masonryGrid, { - percentPosition: true, - }); - - // Initialize ImagesLoaded - var imgLoad = imagesLoaded(masonryGrid); - - // When all images are loaded, relayout Masonry - imgLoad.on("always", function () { - masonry.layout(); - }); + // Initialize Masonry + var masonryGrid = document.getElementById("masonry-view"); + var masonry = new Masonry(masonryGrid, { + percentPosition: true, + }); + + // Initialize ImagesLoaded + var imgLoad = imagesLoaded(masonryGrid); + + // When all images are loaded, relayout Masonry + imgLoad.on("always", function () { + masonry.layout(); + }); } -// // Instrument badge settings -// const instrumentLanguage = document.querySelector("#instrument-language-element"); -// const instrumentBadge = document.querySelector("#instrument-language-badge"); - -// updateInstrumentBadge(); - -// function updateInstrumentBadge() { -// const hideInstrumentBadge = localStorage.getItem('hideInstrumentBadge') || false; -// if (hideInstrumentBadge) { -// instrumentBadge.style.display = "none"; -// } else { -// instrumentBadge.style.display = ""; -// } -// } - -// instrumentLanguage.addEventListener("click", function () { -// localStorage.setItem("hideInstrumentBadge", true); -// updateInstrumentBadge(); -// }); - - // HBS facet settings -const items = document.querySelectorAll('.list-group-item'); +const items = document.querySelectorAll(".list-group-item"); updateHbsFacet(); function updateHbsFacet() { - const url = new URL(window.location.href); - const selectedHbsFacet = url.searchParams.get("hbs_facet") || ''; - localStorage.setItem('selectedHbsFacet', selectedHbsFacet); - items.forEach(item => { - current_item = item.getAttribute('current-value'); - if (current_item === selectedHbsFacet) { - item.classList.add('selected'); - } else { - item.classList.remove('selected'); - } - }); + const url = new URL(window.location.href); + const selectedHbsFacet = url.searchParams.get("hbs_facet") || ""; + localStorage.setItem("selectedHbsFacet", selectedHbsFacet); + items.forEach((item) => { + current_item = item.getAttribute("current-value"); + if (current_item === selectedHbsFacet) { + item.classList.add("selected"); + } else { + item.classList.remove("selected"); + } + }); } -items.forEach(item => { - item.addEventListener('click', function () { - current_item = item.getAttribute('current-value'); - localStorage.setItem('selectedHbsFacet', current_item); - updateHbsFacet(); - }); +items.forEach((item) => { + item.addEventListener("click", function () { + current_item = item.getAttribute("current-value"); + localStorage.setItem("selectedHbsFacet", current_item); + updateHbsFacet(); + }); }); - diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html new file mode 100644 index 0000000..f38d908 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html @@ -0,0 +1,32 @@ +
+ View + + + + + + + + + per page +
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 575cf6f..0cd959a 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -9,7 +9,7 @@ {% endblock %} - + {% block content %}
@@ -70,23 +70,18 @@

######

{% endcomment %}
- +

INSTRUMENT LIST

- -
-
+
Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries {% if hbs_facet_name %} for {% endif %} {{ hbs_facet_name }} - -
- View - - - - - - - - - per page -
+ + {% include "instruments/includes/paginationOptions.html" %}
{% include "instruments/includes/masonryView.html" %} {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %} {% include "instruments/includes/stdView.html" %}
- +
-
- View - - - - - - - - - per page -
+ {% include "instruments/includes/paginationOptions.html" %}
    {% if page_obj.has_previous %}
  • - +
  • - +
    • {% endif %} - +
  • Page @@ -181,14 +152,14 @@

    INSTRUMENT LIST

    {% if page_obj.has_next %}
  • - +
  • - +
    • @@ -210,8 +181,4 @@

    INSTRUMENT LIST

    - -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/web-app/django/VIM/static/js/GoogleTranslate.js b/web-app/django/VIM/static/js/GoogleTranslate.js index a13cc8e..2a2c913 100644 --- a/web-app/django/VIM/static/js/GoogleTranslate.js +++ b/web-app/django/VIM/static/js/GoogleTranslate.js @@ -1,34 +1,20 @@ -function googleTranslateElementInit() { - new google.translate.TranslateElement({ - pageLanguage: 'en', - layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL - }, 'google_translate_element'); - - const googleSelect = document.getElementsByClassName("goog-te-combo")[0]; - googleSelect.classList.add('btn', 'p-0', 'm-0', 'h-100'); - - const parent = googleSelect.parentElement; - parent.classList.add('h-100', 'd-flex', 'align-items-center'); +const pageLanguage = document.querySelector("#google_translate_element"); - const grandparent = parent.parentElement; - grandparent.classList.add('h-100', 'd-flex', 'align-items-center'); -} +function googleTranslateElementInit() { + new google.translate.TranslateElement( + { + pageLanguage: "en", + layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, + }, + "google_translate_element" + ); -const pageLanguage = document.querySelector("#google_translate_element"); -const pageBadge = document.querySelector("#page-language-badge"); + const googleSelect = document.getElementsByClassName("goog-te-combo")[0]; + googleSelect.classList.add("btn", "p-0", "m-0", "h-100"); -updatePageBadge(); + const parent = googleSelect.parentElement; + parent.classList.add("h-100", "d-flex", "align-items-center"); -function updatePageBadge() { - const hidePageBadge = localStorage.getItem('hidePageBadge') || false; - if (hidePageBadge) { - pageBadge.style.display = "none"; - } else { - pageBadge.style.display = ""; - } + const grandparent = parent.parentElement; + grandparent.classList.add("h-100", "d-flex", "align-items-center"); } - -pageLanguage.addEventListener("click", function () { - localStorage.setItem("hidePageBadge", true); - updatePageBadge(); -}); \ No newline at end of file diff --git a/web-app/django/VIM/static/js/LanguageTooltip.js b/web-app/django/VIM/static/js/LanguageTooltip.js new file mode 100644 index 0000000..f8337ae --- /dev/null +++ b/web-app/django/VIM/static/js/LanguageTooltip.js @@ -0,0 +1,6 @@ +const tooltipTriggerList = document.querySelectorAll( + '[data-bs-toggle="tooltip"], [data-bs-toggle="dropdown"]' +); +const tooltipList = [...tooltipTriggerList].map( + (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl) +); diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html index b3bc740..7dc5c53 100644 --- a/web-app/django/VIM/templates/base.html +++ b/web-app/django/VIM/templates/base.html @@ -52,12 +52,10 @@ {% endif %} -
    - +
@@ -81,6 +79,7 @@ integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"> + {% block script %} {% endblock %} \ No newline at end of file