99 lines
4.5 KiB
HTML
99 lines
4.5 KiB
HTML
{% extends 'generic/object.html' %}
|
|
{% load helpers %}
|
|
{% block head %}
|
|
{{ block.super }}
|
|
<style>
|
|
.documentation-content { overflow-x: auto; }
|
|
.documentation-content table {
|
|
width: max-content !important;
|
|
min-width: 100%;
|
|
max-width: none !important;
|
|
table-layout: auto;
|
|
border-collapse: collapse !important;
|
|
border: 1px solid var(--tblr-border-color, #adb5bd) !important;
|
|
font-size: .875rem;
|
|
line-height: 1.25;
|
|
}
|
|
.documentation-content th,
|
|
.documentation-content td {
|
|
min-width: 8rem;
|
|
max-width: 24rem;
|
|
padding: .4rem .55rem !important;
|
|
border: 1px solid var(--tblr-border-color, #adb5bd) !important;
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
vertical-align: top;
|
|
}
|
|
.documentation-content th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--tblr-bg-surface-secondary, #f1f3f5) !important;
|
|
font-weight: 700;
|
|
}
|
|
.documentation-content tbody tr:nth-child(even) td {
|
|
background: color-mix(in srgb, var(--tblr-bg-surface-secondary, #f1f3f5) 45%, transparent);
|
|
}
|
|
.documentation-content p { max-width: 90rem; }
|
|
#documentation-viewer:fullscreen {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: 100%;
|
|
padding: 1.25rem;
|
|
overflow: auto;
|
|
background: var(--tblr-body-bg, #fff);
|
|
}
|
|
#documentation-viewer:fullscreen .card { min-height: calc(100vh - 2.5rem); }
|
|
#documentation-viewer:fullscreen .fullscreen-document-title,
|
|
#documentation-viewer:fullscreen .fullscreen-exit { display: block !important; }
|
|
.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-fullscreen"></i> Vollbild
|
|
</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-fullscreen-exit"></i> Vollbild 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.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 || !viewer.requestFullscreen) {
|
|
if (openButton) openButton.style.display = 'none';
|
|
return;
|
|
}
|
|
openButton.addEventListener('click', () => viewer.requestFullscreen());
|
|
closeButton.addEventListener('click', () => {
|
|
if (document.fullscreenElement) document.exitFullscreen();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock javascript %}
|