Merge branch 'main' into details-widgets

src/lib/components/Actions.svelte

@@ -11,7 +11,7 @@
  $: hasImages = $galleryStore.images?.length
 </script>
 
-<div class="mt-10 flex flex-row justify-end gap-3">
+<div class="flex flex-row justify-end gap-3">
  <Button
  class="flex flex-row items-center gap-2 rounded-xl bg-blue-400 px-4 py-2 text-white hover:bg-blue-600 {!hasImages
  ? 'hidden'

src/lib/components/Footer.svelte

@@ -5,13 +5,11 @@
  let zoomLevel: number[] = [$galleryStore.zoomLevel]
 </script>
 
-<div class="mx-auto flex w-full max-w-7xl flex-row justify-end px-5 py-10">
- <Slider
- bind:value={zoomLevel}
- onValueChange={(e) => ($galleryStore.zoomLevel = e[0])}
- class="w-80"
- max={130}
- min={80}
- step={1}
- />
-</div>
+<Slider
+ bind:value={zoomLevel}
+ onValueChange={(e) => ($galleryStore.zoomLevel = e[0])}
+ class="w-80"
+ max={250}
+ min={50}
+ step={5}
+/>

src/lib/components/Gallery.svelte

@@ -5,13 +5,14 @@
  import { faBan } from '@fortawesome/free-solid-svg-icons'
 
  $: noImage = $galleryStore.selectedTag && !$galleryStore.selectedFilteredImages.length
+
+ $: imageHeight = $galleryStore.zoomLevel + 80
 </script>
 
 <div
- class="w-full flex-1 gap-3 overflow-auto p-1
- {noImage
- ? 'flex w-full flex-col items-center justify-center gap-5'
- : 'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6'}"
+ class="w-full gap-3
+ {noImage ? 'flex flex-col items-center justify-center gap-5' : 'grid grid-flow-row justify-start'}"
+ style="grid-template-columns: repeat(auto-fill, {imageHeight}px);"
 >
  {#if noImage}
  <Fa icon={faBan} size="5x" class="text-gray-400" />

src/lib/components/Image.svelte

@@ -11,8 +11,6 @@
  let hasHover = false
  let typingTmr: number | undefined = undefined
 
- $: imageHeight = $galleryStore.zoomLevel + 80
-
  const handleKeyUp = () => {
  clearTimeout(typingTmr)
  typingTmr = setTimeout(() => {
@@ -38,7 +36,6 @@
  on:mouseover={() => (hasHover = true)}
  on:mouseleave={() => (hasHover = false)}
  class="relative flex flex-col rounded-md bg-gray-100"
- style="height: {imageHeight}px;"
 >
  <button
  on:dblclick={() => openImage()}

src/lib/components/TagsList.svelte

@@ -21,7 +21,7 @@
  }
 </script>
 
-<div class="my-5 flex flex-row flex-wrap items-center gap-3">
+<div class="flex flex-row flex-wrap items-center gap-3">
  {#if $galleryStore.activeFilter == 'tag' && $galleryStore.tags.length}
  {#each $galleryStore.tags as tag}
  <button

src/lib/components/ui/slider/slider.svelte

@@ -23,7 +23,7 @@
  />
  </SliderPrimitive.Root>
 
- <span class="w-10">
+ <button class="w-10">
  {value}%
- </span>
+ </button>
 </div>

src/routes/+page.svelte

@@ -147,27 +147,39 @@
  <title>ARK Gallery 1.0</title>
 </svelte:head>
 
-<div class="mx-auto flex h-screen w-full flex-col justify-between rounded-md">
+<div class="flex h-screen w-full flex-col justify-start">
  {#if imageDropping}
  <div
  class="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-blue-300 bg-opacity-50"
  >
  <p class="text-2xl font-bold text-white">Drop your images here</p>
  </div>
  {/if}
- <div class:hidden={$galleryStore.galleryView} class="mx-auto w-full max-w-7xl p-5">
+ <div
+ class:hidden={$galleryStore.galleryView}
+ class="mx-auto flex h-full w-full max-w-7xl flex-col justify-start p-5"
+ >
  <Filter />
- <Actions
- on:upload={() => uploadFolder()}
- on:deleteImage={() => askDeleteImage()}
- on:deleteTag={() => askDeleteTag()}
- />
- <TagsList />
- <Gallery />
+ <div class="mt-10">
+ <Actions
+ on:upload={() => uploadFolder()}
+ on:deleteImage={() => askDeleteImage()}
+ on:deleteTag={() => askDeleteTag()}
+ />
+ </div>
+ <div class="my-5">
+ <TagsList />
+ </div>
+ <div class="flex-1 overflow-auto p-1">
+ <Gallery />
+ </div>
+
+ <div class="flex flex-col items-end justify-center pt-4">
+ <Footer />
+ </div>
  </div>
  <div class:hidden={!$galleryStore.galleryView}>
  <Header bind:showInfo />
  <ImageEditor bind:showInfo />
  </div>
- <Footer />
 </div>