diff --git a/netbox_documentation/templates/netbox_documentation/document_tree.html b/netbox_documentation/templates/netbox_documentation/document_tree.html index fe27803..b32acc4 100644 --- a/netbox_documentation/templates/netbox_documentation/document_tree.html +++ b/netbox_documentation/templates/netbox_documentation/document_tree.html @@ -10,11 +10,52 @@ {% if perms.netbox_documentation.add_document %} Hinzufügen {% endif %} - Listenansicht +
+ + + Liste +
-
+ +{% if tree or uncategorized %} + +{% endif %} + +
{% if tree or uncategorized %}
    @@ -43,13 +84,156 @@ .netbox-doc-tree-summary:hover { background-color: var(--tblr-bg-surface-secondary, rgba(0,0,0,.03)); } .netbox-doc-tree-leaf { margin-left: 1.35rem; } .netbox-doc-tree-empty { margin-left: 1.35rem; font-size: .875rem; } + + /* Explorer view */ + .netbox-explorer-body { display: flex; min-height: 28rem; } + .netbox-explorer-nav { width: 16rem; flex-shrink: 0; border-right: 1px solid var(--tblr-border-color, #dee2e6); padding: .5rem 0; overflow: auto; max-height: 70vh; } + .netbox-explorer-nav ul ul { padding-left: 1rem; } + .netbox-explorer-nav-row { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem; cursor: pointer; white-space: nowrap; user-select: none; } + .netbox-explorer-nav-row:hover { background-color: var(--tblr-bg-surface-secondary, rgba(0,0,0,.04)); } + .netbox-explorer-nav-row.active { background-color: rgba(var(--tblr-primary-rgb, 32,107,196), .15); } + .netbox-explorer-twisty { width: 1rem; flex-shrink: 0; display: inline-block; text-align: center; transition: transform .15s ease; } + .netbox-explorer-twisty.open { transform: rotate(90deg); } + .netbox-explorer-content { flex-grow: 1; padding: 1rem; overflow: auto; max-height: 70vh; } + .netbox-explorer-pane { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; align-content: start; } + .netbox-explorer-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: .5rem .25rem; border: 1px solid transparent; border-radius: .25rem; cursor: pointer; color: inherit; text-decoration: none; user-select: none; } + .netbox-explorer-tile:hover { background-color: rgba(var(--tblr-primary-rgb, 32,107,196), .08); border-color: rgba(var(--tblr-primary-rgb, 32,107,196), .25); text-decoration: none; color: inherit; } + .netbox-explorer-tile:focus { background-color: rgba(var(--tblr-primary-rgb, 32,107,196), .18); border-color: rgba(var(--tblr-primary-rgb, 32,107,196), .4); outline: none; } + .netbox-explorer-icon { font-size: 3.25rem; line-height: 1; } + .netbox-explorer-label { word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } + .netbox-explorer-empty { grid-column: 1 / -1; } + .netbox-explorer-address { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; border: 1px solid var(--tblr-border-color, #dee2e6); border-radius: .25rem; padding: .15rem .5rem; min-height: 2rem; } + .netbox-explorer-address a { cursor: pointer; } + @media (max-width: 767px) { .netbox-explorer-nav { display: none; } }