up

templates/media_list.pages.tmpl

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