cangui/shelfy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
cangui 2025-06-21 20:16:20 +02:00
parent 502cfe0fcc
commit e4e9086c6d
1 changed files with 80 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
templates/media_list.pages.tmpl
View File

@ -1,65 +1,84 @@
<section class="section">
<div class="container">
<!-- Spinner (indicator) -->
<div id="loading-spinner" class="has-text-centered" style="display:none;">
<button class="button is-loading is-white is-large" aria-label="Loading"></button>
</div>
<!-- Breadcrumb -->
<!-- 1) Breadcrumb --> <nav class="breadcrumb" aria-label="breadcrumbs">
<div class="mb-4 text-sm"> <ul>
{{if .CurrentSub}} {{if .CurrentSub}}
<a <li>
hx-get="/api/paths/{{.PathID}}/media" <a hx-get="/api/paths/{{.PathID}}/media"
hx-target="#content" hx-target="#content" hx-swap="innerHTML"
hx-swap="innerHTML" hx-indicator="#loading-spinner">
>🔙 Racine</a> 🔙 Racine
&nbsp;/&nbsp;{{.CurrentSub}} </a>
</li>
<li class="is-active"><a aria-current="page">{{.CurrentSub}}</a></li>
{{end}} {{end}}
</div> </ul>
</nav>
<!-- 2) Sous-dossiers --> <!-- Sous-dossiers -->
{{if .Dirs}} {{if .Dirs}}
<div class="grid grid-cols-4 gap-4 mb-6"> <div class="columns is-multiline">
{{range .Dirs}} {{range .Dirs}}
<div class="card p-3 rounded shadow hover:shadow-lg transition"> <div class="column is-one-quarter">
<a <div class="card">
hx-get="/api/paths/{{$.PathID}}/media?sub={{.SubPath | urlquery}}" <div class="card-content has-text-centered">
hx-target="#content" <a hx-get="/api/paths/{{$.PathID}}/media?sub={{.SubPath | urlquery}}"
hx-swap="innerHTML" hx-target="#content" hx-swap="innerHTML"
class="flex flex-col items-center text-center" hx-indicator="#loading-spinner">
> <span class="icon is-large">
<i class="fas fa-folder fa-2x mb-2"></i> <i class="fas fa-folder fa-2x"></i>
<span class="truncate">{{.Name}}</span> </span>
<p class="is-size-6">{{.Name}}</p>
</a> </a>
</div> </div>
</div>
</div>
{{end}}
</div>
{{end}} {{end}}
</div>
{{end}}
<!-- 3) Médias --> <!-- Médias -->
{{if .MediaItems}} {{if .MediaItems}}
<div class="grid grid-cols-4 gap-4"> <div class="columns is-multiline">
{{range .MediaItems}} {{range .MediaItems}}
<div class="card p-2 rounded shadow hover:shadow-lg transition"> <div class="column is-one-quarter">
<a <div class="card">
hx-get="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}" <div class="card-image">
hx-target="#content" <figure class="image is-4by3">
hx-swap="innerHTML" <a hx-get="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}"
class="block" hx-target="#content" hx-swap="innerHTML"
> hx-indicator="#loading-spinner">
<img <img src="{{.ThumbURL}}" alt="{{.Title}}">
src="{{.ThumbURL}}" </a>
alt="{{.Title}}" </figure>
class="w-full h-32 object-cover rounded mb-2" </div>
/> <div class="card-content">
<h3 class="text-sm font-semibold truncate">{{.Title}}</h3> <a hx-get="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}"
hx-target="#content" hx-swap="innerHTML"
hx-indicator="#loading-spinner">
<p class="title is-6 is-clipped">{{.Title}}</p>
{{if .DurationFmt}} {{if .DurationFmt}}
<small class="text-xs text-gray-500">{{.DurationFmt}}</small> <p class="subtitle is-7">{{.DurationFmt}}</p>
{{end}} {{end}}
</a> </a>
</div> </div>
</div>
</div>
{{end}}
</div>
{{end}} {{end}}
</div>
{{end}}
<!-- 4) Pas de contenu -->
{{if not .Dirs}}{{if not .MediaItems}}
<p class="text-center text-gray-500">Aucun dossier ni média dans ce répertoire.</p>
{{end}}{{end}}
<!-- Aucun contenu -->
{{if not .Dirs}}{{if not .MediaItems}}
<div class="notification is-light has-text-centered">
Aucun dossier ni média dans ce répertoire.
</div>
{{end}}{{end}}
</div>
</section>