eising/sshecret
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fix mobile layout issues

Browse Source
This commit is contained in:
Allan Eising
2025-06-21 06:44:35 +02:00
parent 4a5874d4f8
commit 5985a726e3
15 changed files with 229 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail-email.html.j2
View File

@ -2,25 +2,58 @@
{% block page_content %}
<!-- Master-Detail Split View -->
<div class="flex h-[calc(100vh-3.5rem)] overflow-hidden">
<!-- 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="md:w-80 w-full shrink-0 border-r overflow-y-auto bg-white md:block border-gray-200 p-4 dark:bg-gray-800 dark:border-gray-700">
{% block master %}
<p class="p-4 text-gray-500">Master view (e.g. list/tree)</p>
{% endblock %}
</aside>
<!-- 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 hidden md: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>
<!-- Detail Pane -->
<section id="detail-pane"
class="flex-1 flex overflow-y-auto bg-white p-4 {%- 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">
&nbsp;
</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 %}
</section>
</div>
</div>
<script>
{% include '/base/partials/master-detail-nav.js' %}
</script>
{% endblock %}