forked from enviPath/enviPy
Modal now opens on badge click. Modal now closes on random click around Reviewed-on: enviPath/enviPy#192 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
224 lines
7.2 KiB
HTML
224 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html data-theme="envipath" lang="en">
|
|
{% load static %}
|
|
<head>
|
|
<title>{{ title }}</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="csrf-token" content="{{ csrf_token }}" />
|
|
|
|
{# Favicon #}
|
|
<link
|
|
rel="shortcut icon"
|
|
type="image/png"
|
|
href="{% static 'images/favicon.ico' %}"
|
|
/>
|
|
|
|
{# Tailwind CSS + DaisyUI Output #}
|
|
<link
|
|
href="{% static 'css/output.css' %}"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
|
|
{# jQuery - Keep for compatibility with existing JS #}
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
|
|
{# Font Awesome #}
|
|
<link
|
|
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
{# Discourse embed for community #}
|
|
<script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
|
|
|
|
<script>
|
|
const csrftoken = document.querySelector("[name=csrf-token]").content;
|
|
|
|
// Setup CSRF header for all jQuery AJAX requests
|
|
$.ajaxSetup({
|
|
beforeSend: function (xhr, settings) {
|
|
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
|
|
xhr.setRequestHeader("X-CSRFToken", csrftoken);
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
{# General EP JS #}
|
|
<script src="{% static 'js/pps.js' %}"></script>
|
|
{# Modal Steps for Stepwise Modal Wizards #}
|
|
<script src="{% static 'js/jquery-bootstrap-modal-steps.js' %}"></script>
|
|
|
|
{% if not debug %}
|
|
<!-- Matomo -->
|
|
<script>
|
|
var _paq = (window._paq = window._paq || []);
|
|
_paq.push(["trackPageView"]);
|
|
_paq.push(["enableLinkTracking"]);
|
|
(function () {
|
|
var u = "//matomo.envipath.com/";
|
|
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
|
_paq.push(["setSiteId", "{{ meta.site_id }}"]);
|
|
var d = document,
|
|
g = d.createElement("script"),
|
|
s = d.getElementsByTagName("script")[0];
|
|
g.async = true;
|
|
g.src = u + "matomo.js";
|
|
s.parentNode.insertBefore(g, s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
{% endif %}
|
|
</head>
|
|
<body class="bg-base-300 min-h-screen">
|
|
{% include "includes/navbar.html" %}
|
|
|
|
{# Main Content Area #}
|
|
<main class="w-full">
|
|
{% block main_content %}
|
|
{# Breadcrumbs - outside main content, optional #}
|
|
{% if breadcrumbs %}
|
|
<div id="bread" class="max-w-7xl mx-auto px-4 py-4">
|
|
<div class="breadcrumbs text-sm">
|
|
<ul>
|
|
{% for elem in breadcrumbs %}
|
|
{% for name, url in elem.items %}
|
|
{% if forloop.parentloop.last %}
|
|
<li>{{ name }}</li>
|
|
{% else %}
|
|
<li><a href="{{ url }}">{{ name }}</a></li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Main content container - paper effect on medium+ screens #}
|
|
<div
|
|
id="docContent"
|
|
class="bg-base-100 mx-auto md:my-8 md:max-w-6xl md:rounded-lg md:shadow-xl"
|
|
>
|
|
{# Messages - inside paper #}
|
|
{% if message %}
|
|
<div id="message" class="alert alert-info m-4">{{ message }}</div>
|
|
{% endif %}
|
|
|
|
{# Page content - no enforced styles #}
|
|
{% block content %}
|
|
{% endblock content %}
|
|
|
|
{# License - inside paper if present #}
|
|
{% if meta.url_contains_package and meta.current_package.license %}
|
|
<div class="collapse collapse-arrow bg-base-200 m-8">
|
|
<input type="checkbox" checked />
|
|
<div class="collapse-title text-xl font-medium">License</div>
|
|
<div class="collapse-content">
|
|
<a
|
|
target="_blank"
|
|
href="{{ meta.current_package.license.link }}"
|
|
>
|
|
<img
|
|
src="{{ meta.current_package.license.image_link }}"
|
|
alt="License"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock main_content %}
|
|
</main>
|
|
|
|
{% include "includes/footer.html" %}
|
|
|
|
{# Floating Help Tab #}
|
|
{% if not public_mode %}
|
|
<div class="fixed right-0 top-1/2 -translate-y-1/2 z-50">
|
|
<a
|
|
href="https://community.envipath.org/"
|
|
target="_blank"
|
|
class="btn btn-secondary hover:btn-secondary-focus text-secondary-content flex items-center justify-center text-sm shadow-lg transition-all duration-300 hover:-translate-x-1 hover:scale-105"
|
|
title="Get Help from the Community"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-message-circle-question-mark-icon lucide-message-circle-question-mark"
|
|
>
|
|
<path
|
|
d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
|
|
/>
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
|
<path d="M12 17h.01" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block modals %}
|
|
{% include "modals/search_modal.html" %}
|
|
{% endblock %}
|
|
|
|
<script>
|
|
$(function () {
|
|
// Hide actionsbutton if there's no action defined
|
|
if ($("#actionsButton ul").children().length > 0) {
|
|
$("#actionsButton").show();
|
|
}
|
|
});
|
|
|
|
// Open search modal function
|
|
function openSearchModal() {
|
|
const searchModal = document.getElementById("search_modal");
|
|
if (searchModal) {
|
|
searchModal.showModal();
|
|
}
|
|
}
|
|
|
|
// Click handler for search badge
|
|
const searchTrigger = document.getElementById("search-trigger");
|
|
if (searchTrigger) {
|
|
searchTrigger.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
openSearchModal();
|
|
});
|
|
}
|
|
|
|
// Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
|
|
document.addEventListener("keydown", function (event) {
|
|
// Check if user is typing in an input field
|
|
const activeElement = document.activeElement;
|
|
const isInputField =
|
|
activeElement &&
|
|
(activeElement.tagName === "INPUT" ||
|
|
activeElement.tagName === "TEXTAREA" ||
|
|
activeElement.contentEditable === "true");
|
|
|
|
if (isInputField) {
|
|
return; // Don't trigger shortcut when typing in input fields
|
|
}
|
|
|
|
// Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
|
|
const isMac = /Mac/.test(navigator.platform);
|
|
const isCorrectModifier = isMac ? event.metaKey : event.ctrlKey;
|
|
|
|
if (isCorrectModifier && event.key === "k") {
|
|
event.preventDefault();
|
|
openSearchModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|