From 320722908f209ba66baa0ecb9e89a3bf5bb17727 Mon Sep 17 00:00:00 2001
From: Alan Grainger <alan.grainger@gmail.com>
Date: Tue, 29 Oct 2024 10:49:54 +0100
Subject: [PATCH] Fix responsive viewport

---
 .env.example                | 3 ++-
 public/lg-fullscreen.min.js | 8 ++++++++
 public/style.css            | 6 +++---
 views/gallery.ejs           | 4 +++-
 4 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 public/lg-fullscreen.min.js

diff --git a/.env.example b/.env.example
index d11d0af..6d94329 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,4 @@
 IMMICH_URL=http://localhost:2283
 API_KEY="Get this from your Account Settings page"
-PORT=3000
+SERVER_URL=http://localhost:3000
+SERVER_PORT=3000
diff --git a/public/lg-fullscreen.min.js b/public/lg-fullscreen.min.js
new file mode 100644
index 0000000..b364442
--- /dev/null
+++ b/public/lg-fullscreen.min.js
@@ -0,0 +1,8 @@
+/**
+ * lightgallery | 2.8.0-beta.3 | May 3rd 2024
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l():"function"==typeof define&&define.amd?define(l):(e="undefined"!=typeof globalThis?globalThis:e||self).lgFullscreen=l()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var l,n=1,t=arguments.length;n<t;n++)for(var c in l=arguments[n])Object.prototype.hasOwnProperty.call(l,c)&&(e[c]=l[c]);return e}).apply(this,arguments)},l={fullScreen:!0,fullscreenPluginStrings:{toggleFullscreen:"Toggle Fullscreen"}};return function(){function n(n,t){return this.core=n,this.$LG=t,this.settings=e(e({},l),this.core.settings),this}return n.prototype.init=function(){var e="";if(this.settings.fullScreen){if(!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled))return;e='<button type="button" aria-label="'+this.settings.fullscreenPluginStrings.toggleFullscreen+'" class="lg-fullscreen lg-icon"></button>',this.core.$toolbar.append(e),this.fullScreen()}},n.prototype.isFullScreen=function(){return document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement},n.prototype.requestFullscreen=function(){var e=document.documentElement;e.requestFullscreen?e.requestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen&&e.webkitRequestFullscreen()},n.prototype.exitFullscreen=function(){document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()},n.prototype.fullScreen=function(){var e=this;this.$LG(document).on("fullscreenchange.lg.global"+this.core.lgId+" \n            webkitfullscreenchange.lg.global"+this.core.lgId+" \n            mozfullscreenchange.lg.global"+this.core.lgId+" \n            MSFullscreenChange.lg.global"+this.core.lgId,(function(){e.core.lgOpened&&e.core.outer.toggleClass("lg-fullscreen-on")})),this.core.outer.find(".lg-fullscreen").first().on("click.lg",(function(){e.isFullScreen()?e.exitFullscreen():e.requestFullscreen()}))},n.prototype.closeGallery=function(){this.isFullScreen()&&this.exitFullscreen()},n.prototype.destroy=function(){this.$LG(document).off("fullscreenchange.lg.global"+this.core.lgId+" \n            webkitfullscreenchange.lg.global"+this.core.lgId+" \n            mozfullscreenchange.lg.global"+this.core.lgId+" \n            MSFullscreenChange.lg.global"+this.core.lgId)},n}()}));
diff --git a/public/style.css b/public/style.css
index f82fc88..21a1840 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,13 +3,13 @@ html {
 }
 
 #lightgallery img {
-    height: 250px;
+    height: 300px;
     margin: 4px;
 }
 
 #lightgallery a {
-    position: relative; /* Establishes a positioning context */
-    display: inline-block; /* Allows the container to wrap around the image */
+    position: relative;
+    display: inline-block;
     text-decoration: none;
     margin: 0;
     padding: 0;
diff --git a/views/gallery.ejs b/views/gallery.ejs
index 20c5a40..5b6e594 100644
--- a/views/gallery.ejs
+++ b/views/gallery.ejs
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <title>Gallery</title>
     <link type="text/css" rel="stylesheet" href="/style.css"/>
     <link type="text/css" rel="stylesheet" href="/lightgallery-bundle.min.css"/>
@@ -21,12 +22,13 @@
     }) %>
 </div>
 <script src="/lightgallery.min.js"></script>
+<script src="/lg-fullscreen.min.js"></script>
 <script src="/lg-thumbnail.min.js"></script>
 <script src="/lg-video.min.js"></script>
 <script src="/lg-zoom.min.js"></script>
 <script type="text/javascript">
   lightGallery(document.getElementById('lightgallery'), {
-    plugins: [lgZoom, lgThumbnail, lgVideo],
+    plugins: [lgZoom, lgThumbnail, lgVideo, lgFullscreen],
     licenseKey: '0000-0000-000-0000',
     speed: 500
   })