- Content bestanden met dezelfde naam maar ander type (md/php/html) worden correct geserveerd: URL met extensie opent dat bestand, URL zonder extensie valt terug op md > php > html (resolveContentByType helper) - Admin content editor accepteert bestanden met dezelfde naam (ander type); preview-knop linkt per extensie - Frontend navigatie/directory listing/search tonen elk bestandstype apart - getAllPages() array structuur gewijzigd naar list van ['path','title','type'] met type 'md'/'php'/'html'/'folder' - Verberg-prefix logica: _ is geen verberg-prefix meer, alleen . (en -); admin toont wél alle . bestanden/mappen - ContentAPI getPage()/pageExists() respecteren expliciete extensie - Handleiding content-api.md (NL+EN) herschreven - File-tree unificatie: _file-tree.twig + _editor-styles.twig includes - Versie verhoogd naar 2.6.3
43 lines
3.1 KiB
Twig
43 lines
3.1 KiB
Twig
{# Shared editor layout + file-tree styles for the content, plugin and theme editors.
|
|
Included via {% include 'pages/_editor-styles.twig' %} inside the extra_css block. #}
|
|
<style>
|
|
.editor-layout { display: flex; gap: 1rem; align-items: stretch; }
|
|
.plugin-file-tree { width: 300px; flex: 0 0 300px; }
|
|
.editor-main { flex: 1 1 auto; min-width: 0; }
|
|
.editor-tree { list-style: none; padding-left: 0; margin: 0; }
|
|
.editor-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
|
|
.editor-tree li { padding: 0; position: relative; }
|
|
.editor-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
|
|
.editor-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
|
|
.editor-tree li > .tree-link.is-active { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
|
|
.editor-tree .tree-toggle.is-selected { background-color: rgba(13,110,253,.12); font-weight: 600; }
|
|
.editor-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
|
|
.editor-tree .tree-chevron { flex: 0 0 auto; }
|
|
.editor-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
|
|
.editor-tree .badge-ext { font-size: .6rem; margin-left: auto; }
|
|
.editor-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.editor-tree .tree-delete-form { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); margin: 0; }
|
|
.editor-tree .tree-delete-btn { font-size: .9rem; line-height: 1; padding: .15rem; color: #dc3545; background: transparent; border: 0; }
|
|
.editor-tree .tree-delete-btn:hover { color: #b02a37; }
|
|
.editor-tree .tree-move-btn { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); font-size: .9rem; line-height: 1; padding: .15rem; color: #6c757d; text-decoration: none; }
|
|
.editor-tree .tree-move-btn:hover { color: #0d6efd; }
|
|
.editor-tree li > .tree-link { padding-right: 3.5rem; }
|
|
.plugin-file-tree .card-body { max-height: 70vh; overflow-y: auto; }
|
|
/* Directory action buttons (new file/dir, rename, delete) — content editor only */
|
|
.tree-dir-row { position: relative; }
|
|
.tree-dir-row .tree-toggle { padding-right: 7rem; }
|
|
.tree-dir-actions { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: flex; gap: .15rem; align-items: center; }
|
|
.tree-dir-actions .btn-link { color: #6c757d; }
|
|
.tree-dir-actions .btn-link:hover { color: #0d6efd; }
|
|
.tree-dir-actions .tree-delete-btn { color: #dc3545; }
|
|
.tree-dir-actions .tree-delete-btn:hover { color: #b02a37; }
|
|
@media (max-width: 768px) {
|
|
.editor-layout { flex-direction: column; }
|
|
.plugin-file-tree { width: 100%; flex-basis: auto; max-height: 320px; }
|
|
.plugin-file-tree .card-body { max-height: 260px; }
|
|
}
|
|
/* Plugin checkbox group (content editor) */
|
|
.plugin-checkbox-group { display: flex; flex-direction: column; gap: .15rem; }
|
|
.plugin-checkbox-group .form-check { margin-bottom: 0; }
|
|
.plugin-checkbox-group .form-check-label { font-size: .875rem; }
|
|
</style> |