From 8888b9f44640394df9e3583db4392472d7027a4b Mon Sep 17 00:00:00 2001
From: Adrian <adrian.dev@kousz.ch>
Date: Sat, 15 Jan 2022 19:20:13 +0100
Subject: [PATCH 1/2] feat: add gallery view mode

---
 frontend/src/css/listing.css         | 35 ++++++++++++++++++++++++++++
 frontend/src/views/files/Listing.vue | 18 ++++++++++++--
 http/preview.go                      |  4 ++--
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index 219e9cc153..17583bc4db 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -110,6 +110,41 @@
   width: calc(100% - 5vw);
 }
 
+#listing.mosaic.gallery .item div:first-of-type {
+  width: 100%;
+  height: 12em;
+}
+
+#listing.mosaic.gallery .item div:last-of-type {
+  position: absolute;
+  bottom: 0.5em;
+  padding: 1em;
+  width: calc(100% - 1em);
+  text-align: center;
+}
+
+#listing.mosaic.gallery .item[data-type=image] div:last-of-type {
+  color: white;
+  background: linear-gradient(#0000, #0009);
+}
+
+#listing.mosaic.gallery .item i {
+    width: 100%;
+    margin-right: 0;
+    font-size: 8em;
+    text-align: center;
+}
+
+#listing.mosaic.gallery .item img {
+  width: 100%;
+  height: 100%;
+}
+
+#listing.gallery .size,
+#listing.gallery .modified {
+  display: none;
+}
+
 #listing.list {
   flex-direction: column;
   width: 100%;
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 23f6afa5d1..425dd4d62e 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -53,7 +53,7 @@
           @action="$store.commit('toggleShell')"
         />
         <action
-          :icon="user.viewMode === 'mosaic' ? 'view_list' : 'view_module'"
+          :icon="viewIcon"
           :label="$t('buttons.switchView')"
           @action="switchView"
         />
@@ -356,6 +356,14 @@ export default {
 
       return "arrow_upward";
     },
+    viewIcon() {
+      const icons = {
+        list: "view_module",
+        mosaic: "grid_view",
+        "mosaic gallery": "view_list",
+      };
+      return icons[this.user.viewMode];
+    },
     headerButtons() {
       return {
         upload: this.user.perm.create,
@@ -807,9 +815,15 @@ export default {
     switchView: async function () {
       this.$store.commit("closeHovers");
 
+      const modes = {
+        list: "mosaic",
+        mosaic: "mosaic gallery",
+        "mosaic gallery": "list",
+      };
+
       const data = {
         id: this.user.id,
-        viewMode: this.user.viewMode === "mosaic" ? "list" : "mosaic",
+        viewMode: modes[this.user.viewMode] || "list",
       };
 
       users.update(data, ["viewMode"]).catch(this.$showError);
diff --git a/http/preview.go b/http/preview.go
index 48d4ded0ed..9860af9148 100644
--- a/http/preview.go
+++ b/http/preview.go
@@ -129,8 +129,8 @@ func createPreview(imgSvc ImgService, fileCache FileCache,
 		height = 1080
 		options = append(options, img.WithMode(img.ResizeModeFit), img.WithQuality(img.QualityMedium))
 	case previewSize == PreviewSizeThumb:
-		width = 128
-		height = 128
+		width = 256
+		height = 256
 		options = append(options, img.WithMode(img.ResizeModeFill), img.WithQuality(img.QualityLow), img.WithFormat(img.FormatJpeg))
 	default:
 		return nil, img.ErrUnsupportedFormat

From 7870e89bc04f1494f2705795476b5f1c9d621e38 Mon Sep 17 00:00:00 2001
From: Adrian <adrian.dev@kousz.ch>
Date: Sun, 16 Jan 2022 11:24:23 +0100
Subject: [PATCH 2/2] feat: smaller column width to fit 2 columns in landscape
 mobiles

---
 frontend/src/views/files/Listing.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 425dd4d62e..fac8608f80 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -283,6 +283,7 @@ export default {
   data: function () {
     return {
       showLimit: 50,
+      columnWidth: 280,
       dragCounter: 0,
       width: window.innerWidth,
       itemWeight: 0,
@@ -599,7 +600,7 @@ export default {
     colunmsResize() {
       // Update the columns size based on the window width.
       let columns = Math.floor(
-        document.querySelector("main").offsetWidth / 300
+        document.querySelector("main").offsetWidth / this.columnWidth
       );
       let items = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
       if (columns === 0) columns = 1;