az/morz-infoboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): Restricted-Medien Toggle + Besitzer-Badge + Kein-Besitzer-Badge

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jesko Anschütz 2026-03-28 09:13:07 +01:00
parent bfef6e25f5
commit 8bcb59468a
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
server/backend/internal/httpapi/manage/templates.go
View file

@ -780,6 +780,9 @@ const manageTmpl = `<!DOCTYPE html>
.upload-zone { border:2px dashed #d1d5db; border-radius:var(--radius); padding:1.5rem; text-align:center; cursor:pointer; transition:border-color .15s; } .upload-zone { border:2px dashed #d1d5db; border-radius:var(--radius); padding:1.5rem; text-align:center; cursor:pointer; transition:border-color .15s; }
.upload-zone:hover,.upload-zone.dragover { border-color:var(--morz-red); background:#fff5f5; } .upload-zone:hover,.upload-zone.dragover { border-color:var(--morz-red); background:#fff5f5; }
.upload-zone p { color:#9ca3af; font-size:.875rem; margin:.25rem 0; } .upload-zone p { color:#9ca3af; font-size:.875rem; margin:.25rem 0; }
/* Restricted-Medien: standardmäßig ausgeblendet */
.lib-card[data-owner-restricted="true"] { display: none; }
.show-restricted .lib-card[data-owner-restricted="true"] { display: flex; }
/* Screenshot */ /* Screenshot */
.screen-preview { width:100%; max-height:200px; object-fit:cover; background:#1e293b; display:block; border-radius:var(--radius) var(--radius) 0 0; } .screen-preview { width:100%; max-height:200px; object-fit:cover; background:#1e293b; display:block; border-radius:var(--radius) var(--radius) 0 0; }
/* Modal */ /* Modal */
@ -1091,11 +1094,20 @@ const manageTmpl = `<!DOCTYPE html>
<!-- Library --> <!-- Library -->
<div class="box"> <div class="box">
<h2 class="title is-6 mb-3">Medienbibliothek</h2> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
<h2 class="title is-6 mb-0">Medienbibliothek</h2>
{{if ne .UserRole "restricted"}}
<button id="toggle-restricted-btn" class="button is-small is-light"
onclick="toggleRestrictedMedia(this)"
style="font-size:.75rem">
Restricted-Medien anzeigen
</button>
{{end}}
</div>
{{if .Assets}} {{if .Assets}}
<div class="lib-grid"> <div class="lib-grid">
{{range .Assets}} {{range .Assets}}
<div class="lib-card"> <div class="lib-card" data-owner-restricted="{{.OwnerIsRestricted}}">
<div class="lib-thumb"> <div class="lib-thumb">
{{if eq .Type "image"}}<img src="{{if .StoragePath}}/uploads/{{.StoragePath}}{{else}}{{.OriginalURL}}{{end}}" style="width:100%;height:80px;object-fit:cover" alt="" loading="lazy" onerror="this.style.display='none';this.parentElement.textContent='🖼'"> {{if eq .Type "image"}}<img src="{{if .StoragePath}}/uploads/{{.StoragePath}}{{else}}{{.OriginalURL}}{{end}}" style="width:100%;height:80px;object-fit:cover" alt="" loading="lazy" onerror="this.style.display='none';this.parentElement.textContent='🖼'">
{{else if eq .Type "video"}}🎬 {{else if eq .Type "video"}}🎬
@ -1104,7 +1116,10 @@ const manageTmpl = `<!DOCTYPE html>
</div> </div>
<div class="lib-info"> <div class="lib-info">
<div class="lib-title" title="{{.Title}}">{{.Title}}</div> <div class="lib-title" title="{{.Title}}">{{.Title}}</div>
<div class="lib-badge">{{typeIcon .Type}} {{.Type}}</div> <div class="lib-badge">{{typeIcon .Type}} {{.Type}}
{{if .OwnerIsRestricted}}<span class="tag is-info is-light ml-1" style="font-size:.65rem">{{.OwnerUsername}}</span>{{end}}
{{if and (eq $.UserRole "admin") (eq .CreatedByUserID "")}}<span class="tag is-warning is-light ml-1" style="font-size:.65rem">Kein Besitzer</span>{{end}}
</div>
</div> </div>
<div class="lib-actions"> <div class="lib-actions">
{{if index $.AddedAssets .ID}} {{if index $.AddedAssets .ID}}
@ -1690,6 +1705,15 @@ function clearScreenOverride(slug) {
if (r.ok) { location.reload(); } if (r.ok) { location.reload(); }
}).catch(function(){}); }).catch(function(){});
} }
function toggleRestrictedMedia(btn) {
var lib = document.querySelector('.lib-grid');
if (!lib) return;
var showing = lib.classList.toggle('show-restricted');
btn.textContent = showing ? 'Restricted-Medien ausblenden' : 'Restricted-Medien anzeigen';
btn.classList.toggle('is-info', showing);
btn.classList.toggle('is-light', !showing);
}
</script> </script>
</body> </body>
</html>` </html>`