60 lines
2.1 KiB
Django/Jinja
60 lines
2.1 KiB
Django/Jinja
{% extends 'base/page.html.j2' %}
|
|
|
|
{% block page_content %}
|
|
|
|
<!-- Master-Detail Split View -->
|
|
<div class="flex h-[calc(100vh-5.5rem)] lg:h-[calc(100vh-3.5rem)] overflow-hidden">
|
|
|
|
<!-- Master Pane -->
|
|
<aside id="master-pane"
|
|
class="lg:w-80 w-full shrink-0 border-r overflow-y-auto bg-white lg:block border-gray-200 p-4 dark:bg-gray-800 dark:border-gray-700 {% if mobile_show_details|default(false) -%} hidden{% endif -%}">
|
|
{% block master %}
|
|
<p class="p-4 text-gray-500">Master view (e.g. list/tree)</p>
|
|
{% endblock %}
|
|
</aside>
|
|
|
|
<!-- Detail Pane -->
|
|
|
|
<section id="detail-pane"
|
|
class="flex-1 flex overflow-y-auto bg-white p-4 lg:block {% if not mobile_show_details|default(false) -%} hidden{%- endif -%} lg:block dark:bg-gray-800">
|
|
|
|
|
|
{% block detail %}
|
|
<p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
|
|
{% endblock %}
|
|
<div class="lg:hidden h-16 block">
|
|
|
|
</div>
|
|
|
|
</section>
|
|
{% block master_detail_nav %}
|
|
{# mobile navigation for master-detail views #}
|
|
<div class="lg:hidden fixed bottom-0 left-0 z-10 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600">
|
|
<section id="bottom-toolbar"
|
|
class="flex-1 flex grid grid-cols-2 blace-content-between">
|
|
<div class="flex w-full justify-start">
|
|
<sl-tooltip content="Back to list">
|
|
<sl-icon-button name="caret-left" label="back" id="showMasterBtn" style="font-size: 2.5rem;"></sl-icon-button>
|
|
</sl-tooltip>
|
|
</div>
|
|
<div class="flex w-full justify-end">
|
|
<sl-tooltip content="Show Details">
|
|
<sl-icon-button name="caret-right" label="back" id="showDetailsBtn" style="font-size: 2.5rem;"></sl-icon-button>
|
|
</sl-tooltip>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
{% include '/base/partials/master-detail-nav.js' %}
|
|
</script>
|
|
|
|
|
|
{% endblock %}
|