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

3
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/client.html.j2
View File

@ -5,6 +5,7 @@
<div id="client-tree">
{% include '/clients/partials/tree.html.j2' %}
</div>
{% include '/clients/partials/drawer_create.html.j2' %}
{% endblock %}
@ -13,9 +14,9 @@
<div id="clientdetails" class="w-full">
{% include '/clients/partials/client_details.html.j2' %}
</div>
<!-- after clientdetails -->
{% endblock %}
{% include '/clients/partials/drawer_create.html.j2' %}
{% block local_scripts %}
<script>
{% include '/clients/partials/tree_event.js' %}

11
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/client_details.html.j2
View File

@ -1,6 +1,9 @@
<!-- menu -->
<div class="flowbite-init-target">
<!-- start of client details inner -->
<div class="flex justify-end px-4">
<button id="client-menu-button" data-dropdown-toggle="client-edit-menu" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
<span class="sr-only">Open dropdown</span>
@ -38,6 +41,8 @@
</ul>
</div>
</div>
<sl-tab-group >
<sl-tab slot="nav" panel="client_data">Client Data</sl-tab>
<sl-tab slot="nav" panel="events">Events</sl-tab>
@ -84,12 +89,14 @@
</div>
</div>
</sl-tab-panel>
<sl-tab-panel name="events">
<div id="client-audit-events">
{% include '/clients/partials/client_events.html.j2' %}
</div>
</sl-tab-panel>
</sl-tab-group>
</div>
{% include '/clients/partials/drawer_edit.html.j2' %}
</div>
<!-- end of client details -->
{% include '/clients/partials/drawer_edit.html.j2' %}

33
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/client_events.html.j2
View File

@ -91,6 +91,7 @@
<div
class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
>
<div class="flex items-center mb-4 sm:mb-0">
<span class="text-sm font-normal text-gray-500 dark:text-gray-400"
@ -100,11 +101,10 @@
{% else %}
<span class="font-semibold text-gray-900 dark:text-white">{{events_paging.first }}-{{ events_paging.last}}</span> of
{% endif %}
<span class="font-semibold text-gray-900 dark:text-white"
>{{ events_paging.total }}</span
></span
>
<span class="font-semibold text-gray-900 dark:text-white">{{ events_paging.total }}</span>
</span>
</div>
<div class="flex items-center space-x-3">
<div class="flex space-x-1">
@ -139,19 +139,20 @@
</button>
{% endif %}
{% endfor %}
<button
{% if events_paging.page < events_paging.total_pages %}
class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition duration-200 ease"
hx-get="/clients/client/{{ client.id }}/events/{{ events_paging.page + 1 }}"
hx-target="#client-audit-events"
<button
class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition duration-200 ease"
hx-get="/clients/client/{{ client.id }}/events/{{ events_paging.page + 1 }}"
hx-target="#client-audit-events">
Next
</button>
{% else %}
class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-gray-900 bg-white border border-gray-300 rounded hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 transition duration-200 ease"
disabled=""
<button
class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-gray-900 bg-white border border-gray-300 rounded hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 transition duration-200 ease"
disabled="">
Next
</button>
{% endif %}
>
Next
</button>
</div>
</div>
</div>
</div>

21
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/details.js Normal file
View File

@ -0,0 +1,21 @@
function addBtnEvent() {
const swapButton = document.getElementById("swapPanes");
const masterPane = document.getElementById("master-pane");
const detailPane = document.getElementById("detail-pane");
if (!swapButton) {
console.log("Can't find the button!");
return;
}
swapButton.addEventListener("click", () => {
console.log("Swap!");
masterPane.classList.remove("hidden");
detailPane.classList.add("hidden");
});
}
document.addEventListener("htmx:afterSettle", () => {
addBtnEvent();
});
document.addEventListener("DOMContentLoaded", () => {
addBtnEvent();
});

2
packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/drawer_edit.html.j2
View File

@ -1,6 +1,6 @@
<div
id="drawer-update-client-{{ client.id }}"
class="fixed top-0 right-0 z-40 w-full h-screen max-w-xs p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800"
class="fixed top-0 right-0 z-50 w-full h-screen max-w-xs p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800"
tabindex="-1"
aria-labelledby="drawer-label-{{ client.id }}"
aria-hidden="true"