From 0a1b138bcb23c68ca37d933cfbe6d158a76c4bcf Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 17 Mar 2020 17:39:20 +0000
Subject: [PATCH] Improved gallery layout

---
 .../galleryComponents/captureCard.vue         |  2 +-
 .../galleryComponents/scanCard.vue            |  2 +-
 .../viewComponents/galleryDisplay.vue         | 34 ++++++++++++++++---
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/viewComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
index 91e34139..3bf5cd29 100644
--- a/src/components/viewComponents/galleryComponents/captureCard.vue
+++ b/src/components/viewComponents/galleryComponents/captureCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium"
+    class="capture-card uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium"
     :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }"
   >
     <div class="uk-card-media-top">
diff --git a/src/components/viewComponents/galleryComponents/scanCard.vue b/src/components/viewComponents/galleryComponents/scanCard.vue
index bcdb7696..71dc493a 100644
--- a/src/components/viewComponents/galleryComponents/scanCard.vue
+++ b/src/components/viewComponents/galleryComponents/scanCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="captureCard uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium"
+    class="capture-card uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium"
   >
     <div class="uk-card-media-top">
       <a href="#">
diff --git a/src/components/viewComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
index 14f0b0c1..ed596f1b 100644
--- a/src/components/viewComponents/galleryDisplay.vue
+++ b/src/components/viewComponents/galleryDisplay.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="galleryDisplay uk-padding uk-padding-remove-top">
+    <!-- Gallery nav bar -->
     <nav
-      class="uk-navbar-container uk-navbar-transparent navbar"
+      class="gallery-navbar uk-navbar-container uk-navbar-transparent"
       uk-navbar="mode: click"
     >
+      <!-- Left side controls -->
       <div
         class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"
       >
@@ -53,6 +55,7 @@
         </ul>
       </div>
 
+      <!-- Right side buttons -->
       <div class="uk-navbar-right">
         <div class="uk-grid">
           <div>
@@ -71,14 +74,16 @@
       </div>
     </nav>
 
+    <!-- Gallery -->
     <div
       v-if="$store.getters.ready"
       class="uk-padding-remove-top"
       uk-lightbox="toggle: .lightbox-link"
     >
+      <!-- Folder heading -->
       <div
         v-if="galleryFolder"
-        class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"
+        class="gallery-folder-heading uk-flex uk-flex-middle"
       >
         <a
           href="#"
@@ -95,7 +100,8 @@
         </div>
       </div>
 
-      <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
+      <!-- Gallery capture cards -->
+      <div class="gallery-grid">
         <div v-for="item in sortedItems" :key="item.metadata.id">
           <scanCard
             v-if="'isScan' in item"
@@ -374,9 +380,29 @@ export default {
 </script>
 
 <style scoped lang="less">
-.navbar {
+.gallery-navbar {
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
 }
+.gallery-navbar,
+.gallery-folder-heading {
+  margin-bottom: 30px;
+}
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 320px);
+  justify-content: center;
+}
+.gallery-grid > div {
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+/deep/ .capture-card {
+  width: 300px;
+  height: 100%; // Used to have all cards in a row match their heights
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>