From 067a1fd78df614c6caca6380276f097cfc592c71 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 13 Jun 2020 11:38:39 +0200 Subject: [PATCH 1/9] Bigger gallery button --- resources/sass/vendor/_photoswipe.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index ef8b66532..8ddd5ac55 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -9,9 +9,9 @@ background: transparent !important; font-size: 1.625em; text-align: center; - width: 50px; - height: 50px; - line-height: 50px; + width: 70px; + height: 70px; + line-height: 70px; &:hover { opacity: 1; @@ -36,3 +36,7 @@ width: 100%; } } + +.pswp__top-bar { + height: 80px; +} From 7e1c44aa6cfb5217e8b45c8f760717727d039a46 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 13 Jun 2020 11:40:03 +0200 Subject: [PATCH 2/9] Gallery button: float left --- resources/sass/vendor/_photoswipe.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index 8ddd5ac55..87e4e7a89 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -40,3 +40,7 @@ .pswp__top-bar { height: 80px; } + +.pswp__button { + float: left; +} From 1a0421e8b5906316c0d1d6bc738d5669f7ab4c87 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 13 Jun 2020 11:46:06 +0200 Subject: [PATCH 3/9] Put top bar to bottom --- resources/sass/vendor/_photoswipe.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index 87e4e7a89..f5c160624 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -39,6 +39,7 @@ .pswp__top-bar { height: 80px; + top: 85%; } .pswp__button { From 2f6cda5957ad39d1d37d5d53f06e5457a00e16f8 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 13 Jun 2020 11:53:07 +0200 Subject: [PATCH 4/9] Center buttons --- resources/sass/vendor/_photoswipe.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index f5c160624..1f14ecdd7 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -12,6 +12,7 @@ width: 70px; height: 70px; line-height: 70px; + left: 40%; &:hover { opacity: 1; From 8a933ea80e031b4dc470f1e74ea5b819b9e44e78 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 13 Jun 2020 12:01:41 +0200 Subject: [PATCH 5/9] counter: change position Change-Id: I90f20d5bb19c1f0146e01ba77fe5ee86e15a58b7 --- resources/sass/vendor/_photoswipe.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index 1f14ecdd7..3382644ee 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -46,3 +46,11 @@ .pswp__button { float: left; } + +.pswp__counter { + left: 20%; + height: 70px; + font-size: 1.5em; + line-height: 80px; + padding: 0 0; +} From c3290c49112be65566ba0c54c0c258443d57131e Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 13 Jun 2020 12:57:18 +0200 Subject: [PATCH 6/9] Gallery button & bar: size should depend on font size Constant: size / default font size 80/16 = 5 70/16 = 4.375 --- resources/sass/vendor/_photoswipe.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index 3382644ee..586bac1ec 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -9,9 +9,9 @@ background: transparent !important; font-size: 1.625em; text-align: center; - width: 70px; - height: 70px; - line-height: 70px; + width: calc(4.375 * 1em); + height: calc(4.375 * 1em); + line-height: calc(4.375 * 1em); left: 40%; &:hover { @@ -39,7 +39,7 @@ } .pswp__top-bar { - height: 80px; + height: calc(5 * 1em); top: 85%; } @@ -49,8 +49,8 @@ .pswp__counter { left: 20%; - height: 70px; + height: calc(4.375 * 1em); font-size: 1.5em; - line-height: 80px; + line-height: calc(5 * 1em); padding: 0 0; } From ba05f6e809f691df528d803c56f28f68042052d6 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 14 Jun 2020 11:38:09 +0200 Subject: [PATCH 7/9] gallery/photoswipe: adjust bottom bar for small displays - also always place the close button in the right upper corner Change-Id: Iba2076f79497431c2b50a9b73c12cf583a4132f0 --- resources/sass/vendor/_photoswipe.scss | 53 ++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index 586bac1ec..54a58b32e 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -24,6 +24,17 @@ } } +.pswp__button--close { + top: 5%; + right: 5%; + left: auto; + position: fixed; + width: calc(2 * 1em); + height: calc(2 * 1em); + line-height: calc(2 * 1em); + border: 2px solid $galleryButtonColor; +} + .pswp__qr { width: 300px; position: absolute; @@ -39,8 +50,9 @@ } .pswp__top-bar { - height: calc(5 * 1em); - top: 85%; + height: calc(7 * 1em); + top: auto; + bottom: 0; } .pswp__button { @@ -52,5 +64,40 @@ height: calc(4.375 * 1em); font-size: 1.5em; line-height: calc(5 * 1em); - padding: 0 0; + padding: 0; +} + +@media screen and (max-width: 1024px) { + .pswp__counter { + left: 5%; + height: calc(2 * 1em); + font-size: 1.2em; + line-height: calc(3 * 1em); + padding: 0 5px; + } + + .pswp__button { + left: 15%; + margin: auto; + } + + .pswp__button--close, + .pswp__button--qrcode, + .pswp__button--print, + .pswp__button--print-chroma-keying, + .pswp__button--download, + .pswp__button--mail, + .pswp__button--playpause { + width: calc(2 * 1em); + height: calc(2 * 1em); + line-height: calc(2 * 1em); + } + + .pswp__button--close { + left: auto; + } + + .pswp__top-bar { + height: calc(3 * 1em); + } } From c4c1ec0e1850fa4435854c756c4b1fb4a85231c9 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 14 Jun 2020 13:27:23 +0200 Subject: [PATCH 8/9] gallery bottom bar: make bottom bar optional Change-Id: Ifc5e40314b661934ccf0824d2a33b3c3b86fa5c5 --- config/config.inc.php | 1 + gallery.php | 3 ++ index.php | 3 ++ lib/configsetup.inc.php | 5 ++ resources/lang/de.json | 2 + resources/lang/en.json | 2 + resources/sass/photoswipe-bottom.scss | 75 ++++++++++++++++++++++++++ resources/sass/vendor/_photoswipe.scss | 65 ---------------------- 8 files changed, 91 insertions(+), 65 deletions(-) create mode 100644 resources/sass/photoswipe-bottom.scss diff --git a/config/config.inc.php b/config/config.inc.php index dea99bb16..d3c1a2062 100644 --- a/config/config.inc.php +++ b/config/config.inc.php @@ -121,6 +121,7 @@ $config['scrollbar'] = false; $config['show_date'] = false; // only works if file_format_date = true $config['gallery']['date_format'] = 'd.m.Y - G:i'; +$config['gallery_bottom_bar'] = true; // SLIDESHOW $config['slideshow_refreshTime'] = '60'; diff --git a/gallery.php b/gallery.php index acb850bb5..8fc87897f 100644 --- a/gallery.php +++ b/gallery.php @@ -33,6 +33,9 @@ + + + diff --git a/index.php b/index.php index 2ec90290d..7aa0eeded 100644 --- a/index.php +++ b/index.php @@ -35,6 +35,9 @@ + + + diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php index 6e07d5897..b4e68ce86 100644 --- a/lib/configsetup.inc.php +++ b/lib/configsetup.inc.php @@ -691,6 +691,11 @@ 'placeholder' => $defaultConfig['gallery']['date_format'], 'name' => 'gallery[date_format]', 'value' => $config['gallery']['date_format'] + ], + 'gallery_bottom_bar' => [ + 'type' => 'checkbox', + 'name' => 'gallery_bottom_bar', + 'value' => $config['gallery_bottom_bar'] ] ], 'mail' => [ diff --git a/resources/lang/de.json b/resources/lang/de.json index 6c3bb9fc9..9eb4e2f22 100644 --- a/resources/lang/de.json +++ b/resources/lang/de.json @@ -40,6 +40,7 @@ "folders_tmp": "tmp Ordner", "force_buzzer": "Verstecke Auslöse-Taste", "gallery": "Galerie", + "gallery_bottom_bar": "Die Schaltflächenleiste in der Galerie unten anzeigen", "gallery_date_format": "Datumsstil", "gallery_no_image": "Die Galerie ist noch leer. Mache doch ein paar Bilder!", "general": "Allgemein", @@ -120,6 +121,7 @@ "manual_folders_thumbs": "Geben Sie den Pfad und den Namen ein, die für die Thumbnails verwendet werden. Dies sollte ein Unterordner Ihres Datenordners sein!", "manual_folders_tmp": "Geben Sie den Pfad und den Namen ein, die für den TEMP-Ordner verwendet werden. Dies sollte ein Unterordner Ihres Datenordners sein!", "manual_force_buzzer": "Wenn diese Option aktiviert ist, verschwinden die Schaltflächen zum Aufnehmen von Bildern und Collagen. Sie erhalten jetzt eine Schaltfläche, mit der Sie aufgefordert werden, mit einem Buzzer ein Bild oder eine Collage aufzunehmen.", + "manual_gallery_bottom_bar": "Wenn aktiviert, wird die Schaltflächenleiste in der Galerie unten angezeigt.", "manual_gallery_date_format": "Geben Sie Ihren Datumsstil ein.", "manual_general_camera_mode": "Wählen Sie den Kameramodus Ihrer Gerätekamera (Kamera mit Blick nach vorne oder hinten).", "manual_general_cheese_time": "Legen Sie eine Zeit fest zur Anzeige von \"Cheeeeeeeese!\" nach dem Countdown.", diff --git a/resources/lang/en.json b/resources/lang/en.json index 4d413cffb..7d16b0c5d 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -41,6 +41,7 @@ "folders_tmp": "tmp Folder", "force_buzzer": "Hide trigger button", "gallery": "Gallery", + "gallery_bottom_bar": "Show button bar inside gallery on bottom", "gallery_date_format": "Date style", "gallery_no_image": "The gallery is still empty. Take some pictures!", "general": "General", @@ -122,6 +123,7 @@ "manual_folders_thumbs": "Enter the path and name used for the Thumbnail Folder. This should be a subfolder of your \"data\" folder!", "manual_folders_tmp": "Enter the path and name used for the TEMP Folder. This should be a subfolder of your \"data\" folder!", "manual_force_buzzer": "If enabled, the take picture and collage buttons disappear. You now get a button which tells to use a buzzer to take a picture or collage.", + "manual_gallery_bottom_bar": "If enabled, the button bar is shown in the gallery below.", "manual_gallery_date_format": "Enter your date style.", "manual_general_camera_mode": "Choose between front- or back facing camera mode of your device cam.", "manual_general_cheese_time": "Set a time to display \"Cheeeeeeeese!\" after the countdown.", diff --git a/resources/sass/photoswipe-bottom.scss b/resources/sass/photoswipe-bottom.scss new file mode 100644 index 000000000..11d546bc1 --- /dev/null +++ b/resources/sass/photoswipe-bottom.scss @@ -0,0 +1,75 @@ +@import "modules/theme"; + +.pswp__button--close, +.pswp__button--qrcode, +.pswp__button--print, +.pswp__button--print-chroma-keying, +.pswp__button--download, +.pswp__button--mail, +.pswp__button--playpause { + left: 40%; +} + +.pswp__button--close { + top: 5%; + right: 5%; + left: auto; + position: fixed; + width: calc(2 * 1em); + height: calc(2 * 1em); + line-height: calc(2 * 1em); + border: 2px solid $galleryButtonColor; +} + +.pswp__top-bar { + height: calc(7 * 1em); + top: auto; + bottom: 0; +} + +.pswp__button { + float: left; +} + +.pswp__counter { + left: 20%; + height: calc(4.375 * 1em); + font-size: 1.5em; + line-height: calc(5 * 1em); + padding: 0; +} + +@media screen and (max-width: 1024px) { + .pswp__counter { + left: 5%; + height: calc(2 * 1em); + font-size: 1.2em; + line-height: calc(3 * 1em); + padding: 0 5px; + } + + .pswp__button { + left: 15%; + margin: auto; + } + + .pswp__button--close, + .pswp__button--qrcode, + .pswp__button--print, + .pswp__button--print-chroma-keying, + .pswp__button--download, + .pswp__button--mail, + .pswp__button--playpause { + width: calc(2 * 1em); + height: calc(2 * 1em); + line-height: calc(2 * 1em); + } + + .pswp__button--close { + left: auto; + } + + .pswp__top-bar { + height: calc(3 * 1em); + } +} diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index 54a58b32e..f2feb31ba 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -12,7 +12,6 @@ width: calc(4.375 * 1em); height: calc(4.375 * 1em); line-height: calc(4.375 * 1em); - left: 40%; &:hover { opacity: 1; @@ -24,17 +23,6 @@ } } -.pswp__button--close { - top: 5%; - right: 5%; - left: auto; - position: fixed; - width: calc(2 * 1em); - height: calc(2 * 1em); - line-height: calc(2 * 1em); - border: 2px solid $galleryButtonColor; -} - .pswp__qr { width: 300px; position: absolute; @@ -48,56 +36,3 @@ width: 100%; } } - -.pswp__top-bar { - height: calc(7 * 1em); - top: auto; - bottom: 0; -} - -.pswp__button { - float: left; -} - -.pswp__counter { - left: 20%; - height: calc(4.375 * 1em); - font-size: 1.5em; - line-height: calc(5 * 1em); - padding: 0; -} - -@media screen and (max-width: 1024px) { - .pswp__counter { - left: 5%; - height: calc(2 * 1em); - font-size: 1.2em; - line-height: calc(3 * 1em); - padding: 0 5px; - } - - .pswp__button { - left: 15%; - margin: auto; - } - - .pswp__button--close, - .pswp__button--qrcode, - .pswp__button--print, - .pswp__button--print-chroma-keying, - .pswp__button--download, - .pswp__button--mail, - .pswp__button--playpause { - width: calc(2 * 1em); - height: calc(2 * 1em); - line-height: calc(2 * 1em); - } - - .pswp__button--close { - left: auto; - } - - .pswp__top-bar { - height: calc(3 * 1em); - } -} From e872ab2d49d8361fbb1be1f0a014e31f50be4712 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Wed, 17 Jun 2020 20:09:42 +0200 Subject: [PATCH 9/9] PhotoSwipe: adjust close button Change-Id: I27bd1541857b4a2b35af9bafc7b6c111df736ddd --- resources/sass/photoswipe-bottom.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/resources/sass/photoswipe-bottom.scss b/resources/sass/photoswipe-bottom.scss index 11d546bc1..94e1a617f 100644 --- a/resources/sass/photoswipe-bottom.scss +++ b/resources/sass/photoswipe-bottom.scss @@ -1,6 +1,5 @@ @import "modules/theme"; -.pswp__button--close, .pswp__button--qrcode, .pswp__button--print, .pswp__button--print-chroma-keying, @@ -11,8 +10,8 @@ } .pswp__button--close { - top: 5%; - right: 5%; + top: 24px; + right: 30px; left: auto; position: fixed; width: calc(2 * 1em);