diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/base.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/base.html.j2 index 91e82c1..33890e8 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/base.html.j2 +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/base.html.j2 @@ -35,7 +35,7 @@
{% block breadcrumbs %} {% endblock %} -
+
{% block content %}{% endblock %}
@@ -43,8 +43,12 @@ + {% block scripts %} {% include 'base/partials/scripts.html.j2' %} {% endblock %} + {% block local_scripts %} + {% endblock %} + diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail-email.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail-email.html.j2 new file mode 100644 index 0000000..19c21da --- /dev/null +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail-email.html.j2 @@ -0,0 +1,26 @@ +{% extends 'base/page.html.j2' %} + +{% block page_content %} + + +
+ + + + + + + +
+ +{% endblock %} diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/redesign.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail.html.j2 similarity index 100% rename from packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/redesign.html.j2 rename to packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail.html.j2 diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/sidebar.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/sidebar.html.j2 index e58cff5..d34a839 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/sidebar.html.j2 +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/sidebar.html.j2 @@ -26,14 +26,14 @@
  • - + Secrets
  • - + Audit Log diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/client.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/client.html.j2 index 945547b..051235c 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/client.html.j2 +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/client.html.j2 @@ -1,46 +1,24 @@ -{% extends "/dashboard/_base.html" %} {% block content %} -
    -
    -
    - - - -
    - -
    -
    - {% include '/clients/partials/tree.html.j2' %} -
    -
    -
    - {% include '/clients/partials/client_details.html.j2' %} -
    -
    -
    -
    - -
    -{% include '/clients/partials/drawer_create.html.j2' %} +{% extends 'base/master-detail-email.html.j2' %} +{% block title %}Client {{ client.name }}{% endblock %} +{% block master %} + {% include '/clients/partials/tree.html.j2' %} {% endblock %} + + +{% block detail %} + +
    + {% include '/clients/partials/client_details.html.j2' %} +
    +{% endblock %} + +{% include '/clients/partials/drawer_create.html.j2' %} +{% block local_scripts %} + +{% endblock local_scripts %} + + + diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/index.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/index.html.j2 index 6087d1d..1342079 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/index.html.j2 +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/index.html.j2 @@ -1,41 +1,22 @@ -{% extends "/dashboard/_base.html" %} {% block content %} -
    -
    -
    - +{% block master %} + {% include '/clients/partials/tree.html.j2' %} +{% endblock %} -
    +{% block detail %} -
    -
    - {% include '/clients/partials/tree.html.j2' %} -
    -
    -
    -

    Click an item to view details

    -
    -
    -
    +
    +

    Click an item to view details

    +{% endblock %} -
    {% include '/clients/partials/drawer_create.html.j2' %} -{% endblock %} +{% block local_scripts %} + +{% endblock local_scripts %} diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree.html.j2 index 05a82a8..5f97a2f 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree.html.j2 +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree.html.j2 @@ -1,67 +1,65 @@ -
    -
    -
    -

    Clients

    -
    -
    -
    - - Loading... +{# This is the master block #} + +
    +
    +

    Clients

    + +
    +
    +
    + + Loading... +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    -
    - -
    -
    -
    -
    - -
    -
    - -
    - -
    -
    -
    -
    - {% include '/clients/partials/tree_items.html.j2' %} -
    +
    + {% include '/clients/partials/tree_items.html.j2' %}
    - diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js index 1e260c9..ce1f655 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js @@ -8,6 +8,8 @@ function addTreeListener() { if (!selectedEl) return; + const masterPane = document.getElementById("master-pane"); + const detailPane = document.getElementById("detail-pane"); const type = selectedEl.dataset.nodeType; const clientId = selectedEl.dataset.clientId; const name = selectedEl.dataset.clientName; @@ -17,11 +19,16 @@ function addTreeListener() { let url = `/clients/client/${encodeURIComponent(clientId)}`; if (url) { - htmx.ajax("GET", url, { - target: "#clientdetails", - //swap: 'OuterHTML', - indicator: "#client-spinner", - }); + htmx + .ajax("GET", url, { + target: "#clientdetails", + //swap: 'OuterHTML', + indicator: "#client-spinner", + }) + .then(() => { + masterPane.classList.add("hidden"); + detailPane.classList.remove("hidden"); + }); } }); } diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_items.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_items.html.j2 index bbec2ed..2df44aa 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_items.html.j2 +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_items.html.j2 @@ -38,5 +38,4 @@ {% include 'clients/partials/pagination.html.j2' %}
    {% endif %} -
    diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/views/clients.py b/packages/sshecret-admin/src/sshecret_admin/frontend/views/clients.py index ea61bf6..fa476c4 100644 --- a/packages/sshecret-admin/src/sshecret_admin/frontend/views/clients.py +++ b/packages/sshecret-admin/src/sshecret_admin/frontend/views/clients.py @@ -93,42 +93,14 @@ def create_router(dependencies: FrontendDependencies) -> APIRouter: page=page, limit=per_page, total=results.total_results, offset=offset ) + breadcrumbs = [("clients", "/clients/")] + LOG.info("Results %r", results) return templates.TemplateResponse( request, "clients/index.html.j2", { - "page_title": "Clients", - "offset": offset, - "pages": paginate, - "clients": results.clients, - "user": current_user, - "results": results, - }, - ) - - @app.get("/clients/new/") - async def get_new_client_tree( - request: Request, - current_user: Annotated[LocalUserInfo, Depends(dependencies.get_user_info)], - admin: Annotated[AdminBackend, Depends(dependencies.get_admin_backend)], - ) -> Response: - """Get client tree view.""" - page = 1 - per_page = CLIENTS_PER_PAGE - offset = 0 - - client_filter = ClientFilter(offset=offset, limit=per_page) - results = await admin.query_clients(client_filter) - paginate = PagingInfo( - page=page, limit=per_page, total=results.total_results, offset=offset - ) - - LOG.info("Results %r", results) - return templates.TemplateResponse( - request, - "clients/redesign.html.j2", - { + "breadcrumbs": breadcrumbs, "page_title": "Clients", "offset": offset, "pages": paginate, @@ -197,6 +169,11 @@ def create_router(dependencies: FrontendDependencies) -> APIRouter: ) template = "clients/client.html.j2" + breadcrumbs = [ + ("clients", "/clients/"), + (results.client.name, request.url.path), + ] + headers: dict[str, str] = {} if request.headers.get("HX-Request"): headers["HX-Push-Url"] = request.url.path @@ -207,6 +184,7 @@ def create_router(dependencies: FrontendDependencies) -> APIRouter: template, { "page_title": f"Client {results.client.name}", + "breadcrumbs": breadcrumbs, "pages": results.pages, "clients": results.results.clients, "client": results.client, diff --git a/packages/sshecret-admin/src/sshecret_admin/static/css/main.css b/packages/sshecret-admin/src/sshecret_admin/static/css/main.css index afaae79..0fd78ac 100644 --- a/packages/sshecret-admin/src/sshecret_admin/static/css/main.css +++ b/packages/sshecret-admin/src/sshecret_admin/static/css/main.css @@ -382,9 +382,6 @@ .order-1 { order: 1; } - .order-2 { - order: 2; - } .col-span-2 { grid-column: span 2 / span 2; } @@ -457,9 +454,6 @@ .ms-3 { margin-inline-start: calc(var(--spacing) * 3); } - .ms-auto { - margin-inline-start: auto; - } .me-2 { margin-inline-end: calc(var(--spacing) * 2); } @@ -682,15 +676,18 @@ .h-\[12px\] { height: 12px; } - .h-\[16px\] { - height: 16px; - } - .h-\[32px\] { - height: 32px; - } .h-\[36rem\] { height: 36rem; } + .h-\[calc\(100vh-4rem\)\] { + height: calc(100vh - 4rem); + } + .h-\[calc\(100vh-8rem\)\] { + height: calc(100vh - 8rem); + } + .h-\[calc\(100vh-10rem\)\] { + height: calc(100vh - 10rem); + } .h-full { height: 100%; } @@ -1245,9 +1242,6 @@ .border-blue-300 { border-color: var(--color-blue-300); } - .border-blue-700 { - border-color: var(--color-blue-700); - } .border-gray-100 { border-color: var(--color-gray-100); } @@ -1332,9 +1326,6 @@ .bg-blue-600 { background-color: var(--color-blue-600); } - .bg-blue-700 { - background-color: var(--color-blue-700); - } .bg-emerald-500 { background-color: var(--color-emerald-500); } @@ -2175,13 +2166,6 @@ } } } - .hover\:bg-blue-800 { - &:hover { - @media (hover: hover) { - background-color: var(--color-blue-800); - } - } - } .hover\:bg-gray-50 { &:hover { @media (hover: hover) { @@ -2774,11 +2758,6 @@ inset: calc(var(--spacing) * 0); } } - .md\:order-1 { - @media (width >= 48rem) { - order: 1; - } - } .md\:order-2 { @media (width >= 48rem) { order: 2; @@ -2859,6 +2838,16 @@ width: calc(var(--spacing) * 64); } } + .md\:w-72 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 72); + } + } + .md\:w-80 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 80); + } + } .md\:w-\[calc\(100\%-256px\)\] { @media (width >= 48rem) { width: calc(100% - 256px); @@ -3114,6 +3103,11 @@ width: auto; } } + .lg\:table-fixed { + @media (width >= 64rem) { + table-layout: fixed; + } + } .lg\:grid-cols-2 { @media (width >= 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -3469,11 +3463,6 @@ border-color: var(--color-red-800); } } - .dark\:bg-blue-600 { - &:where(.dark, .dark *) { - background-color: var(--color-blue-600); - } - } .dark\:bg-blue-900 { &:where(.dark, .dark *) { background-color: var(--color-blue-900); @@ -3728,15 +3717,6 @@ } } } - .dark\:hover\:bg-blue-700 { - &:where(.dark, .dark *) { - &:hover { - @media (hover: hover) { - background-color: var(--color-blue-700); - } - } - } - } .dark\:hover\:bg-blue-800 { &:where(.dark, .dark *) { &:hover {