Gallery improvements, better layout and autoplay of next media file.

frontend/src/components/GalleryFigure.vue

@@ -3,20 +3,17 @@
     :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
     @contextmenu.stop
     @focus.stop="store.cursor = doc.key"
-    @click="ev => {
-      if (m!.play()) ev.preventDefault()
-      store.cursor = doc.key
-    }"
+    @click=onclick
   >
     <figure>
       <slot></slot>
-      <MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" />
-      <caption>
-        <label>
-          <SelectBox :doc=doc />
-          <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
-        </label>
-      </caption>
+      <MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" />
+      <div class="titlespacer"></div>
+      <figcaption>
+        <SelectBox :doc=doc />
+        <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
+        <div class=namespacer></div>
+      </figcaption>
     </figure>
   </a>
 </template>
@@ -33,10 +30,15 @@ const props = defineProps<{
   index: number
 }>()
 const m = ref<typeof MediaPreview | null>(null)
+
+const onclick = (ev: Event) => {
+  if (m.value!.play()) ev.preventDefault()
+  store.cursor = props.doc.key
+}
 </script>
 
 <style scoped>
-.gallery figure {
+figure {
   max-height: 15em;
   position: relative;
   border-radius: .5em;
@@ -48,51 +50,48 @@ const m = ref<typeof MediaPreview | null>(null)
   justify-content: end;
   overflow: hidden;
 }
-.icon {
-  justify-self: end;
+figure > article {
+  flex: 0 0 auto;
 }
-figure caption {
-  font-weight: 600;
-  color: var(--text-color);
-  text-shadow: 0 0 .2em var(--primary-background), 0 0 .2em var(--primary-background);
+.titlespacer {
+  flex-shrink: 100000;
+  width: 100%;
+  height: 2em;
 }
-.cursor caption {
-  background: var(--accent-color);
-  text-shadow: none;
-}
-caption {
+figcaption {
   position: absolute;
   overflow: hidden;
   bottom: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
   width: 100%;
 }
-caption label {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-label span {
-  flex: 1 1;
-  margin-right: 2em;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-label input[type='checkbox'] {
-  width: 2em;
-  height: 2em;
+figcaption input[type='checkbox'] {
+  width: 1.5em;
+  height: 1.5em;
+  margin: .25em;
   opacity: 0;
   flex-shrink: 0;
 }
-label input[type='checkbox']:checked {
+figcaption input[type='checkbox']:checked, figcaption input[type='checkbox']:hover {
   opacity: 1;
 }
-a {
-  text-decoration: none;
+figcaption span {
+  padding: .5em;
+  color: #fff;
+  font-weight: 600;
+  text-shadow: 0 0 .2em #000, 0 0 .2em #000;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.cursor figcaption span {
+  color: var(--accent-color);
+}
+figcaption .namespacer {
+  flex-shrink: 100000;
+  height: 2em;
+  width: 2em;
 }
-
 </style>