129 lines
7.0 KiB
HTML
129 lines
7.0 KiB
HTML
{% extends 'generic/object.html' %}
|
|
{% load helpers %}
|
|
{% block head %}
|
|
{{ block.super }}
|
|
<style>
|
|
.documentation-content {
|
|
overflow-x: auto;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 11pt;
|
|
}
|
|
.documentation-content table {
|
|
width: auto;
|
|
max-width: none;
|
|
table-layout: auto;
|
|
border-collapse: collapse;
|
|
}
|
|
.documentation-content th,
|
|
.documentation-content td {
|
|
padding: .45rem;
|
|
border: 1px solid #adb5bd;
|
|
word-break: normal;
|
|
vertical-align: top;
|
|
}
|
|
.documentation-content th {
|
|
font-weight: 700;
|
|
}
|
|
.documentation-content table.doc-table-full-width { width: 100% !important; }
|
|
.documentation-content table.doc-table-compact th,
|
|
.documentation-content table.doc-table-compact td { min-width: 5rem; padding: .2rem .35rem !important; font-size: .8rem; }
|
|
.documentation-content table.doc-table-striped tbody tr:nth-child(even) td { background: var(--tblr-bg-surface-secondary, #f1f3f5); }
|
|
.documentation-content table.doc-table-header-blue thead th { background: #206bc4 !important; color: #fff; }
|
|
.documentation-content table.doc-table-header-green thead th { background: #2b8a3e !important; color: #fff; }
|
|
.documentation-content table.doc-table-header-dark thead th { background: #343a40 !important; color: #fff; }
|
|
.documentation-content table.doc-table-borderless,
|
|
.documentation-content table.doc-table-borderless th,
|
|
.documentation-content table.doc-table-borderless td { border: 0 !important; }
|
|
.documentation-content .doc-cell-yellow { background: #fff3bf !important; color: #212529; }
|
|
.documentation-content .doc-cell-green { background: #d3f9d8 !important; color: #212529; }
|
|
.documentation-content .doc-cell-red { background: #ffe3e3 !important; color: #212529; }
|
|
.documentation-content .doc-cell-blue { background: #dbeafe !important; color: #212529; }
|
|
.documentation-content .doc-cell-middle { vertical-align: middle !important; }
|
|
.documentation-content p { max-width: 90rem; }
|
|
.documentation-content table { cursor: zoom-in; }
|
|
#documentation-viewer.documentation-page-focus {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1055;
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100vh;
|
|
padding: 1.5rem;
|
|
overflow: auto;
|
|
background: var(--tblr-body-bg, #fff);
|
|
}
|
|
#documentation-viewer.documentation-page-focus .card { min-height: calc(100vh - 5rem); }
|
|
#documentation-viewer.documentation-page-focus .fullscreen-document-title,
|
|
#documentation-viewer.documentation-page-focus .fullscreen-exit { display: block !important; }
|
|
#documentation-viewer.documentation-page-focus .documentation-content table { cursor: default; }
|
|
body.documentation-page-focus-open { overflow: hidden; }
|
|
.fullscreen-document-title { display: none; margin: 0 4rem 1rem 0; }
|
|
.fullscreen-exit { display: none; position: fixed; top: 1rem; right: 1rem; z-index: 10; }
|
|
</style>
|
|
{% endblock head %}
|
|
{% block extra_controls %}
|
|
<button type="button" id="documentation-fullscreen" class="btn btn-outline-secondary">
|
|
<i class="mdi mdi-arrow-expand-all"></i> Großansicht
|
|
</button>
|
|
<a href="{% url 'plugins:netbox_documentation:document_print' pk=object.pk %}" target="_blank" class="btn btn-outline-secondary">
|
|
<i class="mdi mdi-printer"></i> Drucken / PDF
|
|
</a>
|
|
{% endblock extra_controls %}
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col col-md-9" id="documentation-viewer">
|
|
<h1 class="fullscreen-document-title">{{ object.title }}</h1>
|
|
<button type="button" class="btn btn-secondary fullscreen-exit" id="documentation-fullscreen-exit"><i class="mdi mdi-arrow-collapse-all"></i> Großansicht beenden</button>
|
|
{% if object.summary %}<p class="lead">{{ object.summary }}</p>{% endif %}
|
|
<div class="card"><div class="card-body rendered-markdown documentation-content">{{ object.rendered_body|safe }}</div></div>
|
|
</div>
|
|
<div class="col col-md-3">
|
|
{% if object.tenant_group or object.tenant %}<div class="card mb-3"><h5 class="card-header">Mandantenzuordnung</h5><div class="list-group list-group-flush">
|
|
{% if object.tenant_group %}<a class="list-group-item list-group-item-action" href="{{ object.tenant_group.get_absolute_url }}"><i class="mdi mdi-account-group"></i> {{ object.tenant_group }}</a>{% endif %}
|
|
{% if object.tenant %}<a class="list-group-item list-group-item-action" href="{{ object.tenant.get_absolute_url }}"><i class="mdi mdi-domain"></i> {{ object.tenant }}</a>{% endif %}
|
|
</div></div>{% endif %}
|
|
{% if object.category %}<div class="card mb-3"><h5 class="card-header">Ordner</h5><a class="list-group-item list-group-item-action" href="{{ object.category.get_absolute_url }}"><i class="mdi mdi-folder"></i> {{ object.category }}</a></div>{% endif %}
|
|
<div class="card"><h5 class="card-header">Zuordnungen</h5><div class="list-group list-group-flush">
|
|
{% for assignment in object.assignments.all %}<a class="list-group-item" href="{{ assignment.assigned_object.get_absolute_url }}">{{ assignment.assigned_object_type }}: {{ assignment.assigned_object }}</a>{% empty %}<div class="list-group-item text-muted">Noch nicht zugeordnet</div>{% endfor %}
|
|
</div></div>
|
|
{% if object.attachments.all %}<div class="card mt-3"><h5 class="card-header">Originaldateien</h5><div class="list-group list-group-flush">
|
|
{% for attachment in object.attachments.all %}<a class="list-group-item" href="{{ attachment.file.url }}">{{ attachment.original_name }}</a>{% endfor %}
|
|
</div></div>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
{{ block.super }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const viewer = document.getElementById('documentation-viewer');
|
|
const openButton = document.getElementById('documentation-fullscreen');
|
|
const closeButton = document.getElementById('documentation-fullscreen-exit');
|
|
if (!viewer || !openButton || !closeButton) return;
|
|
const openViewer = () => {
|
|
viewer.classList.add('documentation-page-focus');
|
|
document.body.classList.add('documentation-page-focus-open');
|
|
viewer.scrollTop = 0;
|
|
};
|
|
const closeViewer = () => {
|
|
viewer.classList.remove('documentation-page-focus');
|
|
document.body.classList.remove('documentation-page-focus-open');
|
|
};
|
|
openButton.addEventListener('click', openViewer);
|
|
closeButton.addEventListener('click', closeViewer);
|
|
viewer.querySelectorAll('.documentation-content table').forEach(table => {
|
|
table.title = 'Tabelle in Großansicht öffnen';
|
|
table.addEventListener('click', event => {
|
|
if (viewer.classList.contains('documentation-page-focus')) return;
|
|
if (event.target.closest('a, button, input, select, textarea')) return;
|
|
openViewer();
|
|
});
|
|
});
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key === 'Escape' && viewer.classList.contains('documentation-page-focus')) closeViewer();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock javascript %}
|