From 03b3897d57a96563be4ca751835222785b1bad3e Mon Sep 17 00:00:00 2001
From: "kujiu (@rincevent)" <kujiu@kujiu.org>
Date: Tue, 3 Aug 2021 16:17:16 +0200
Subject: [PATCH] Fix position of prev and next buttons

---
 CHANGES.rst                              |  2 +-
 static/sphinxgalleria/sphinxgalleria.css | 25 +++++++++++-------------
 static/sphinxgalleria/sphinxgalleria.mjs |  6 ++++--
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index ce71f2f..ca2f54e 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -1,7 +1,7 @@
 Changes
 #######
 
-1.1.0 (*2021-07-24*)
+1.1.0 (*2021-08-03*)
 ~~~~~~~~~~~~~~~~~~~~
 
 - Better compatibility with mobile phones and small screens
diff --git a/static/sphinxgalleria/sphinxgalleria.css b/static/sphinxgalleria/sphinxgalleria.css
index f1c9cb4..80bc9d6 100644
--- a/static/sphinxgalleria/sphinxgalleria.css
+++ b/static/sphinxgalleria/sphinxgalleria.css
@@ -37,14 +37,10 @@
 }
 
 .sphinxgalleria-core figure .row button {
-    flex-grow: 1;
-    flex-shrink: 1;
     cursor: pointer;
 }
 
 .sphinxgalleria-core figure .row button.button-modal {
-    flex-grow: 1000;
-    flex-shrink: 1000;
     margin: 0;
     padding: 0;
     border: none;
@@ -60,7 +56,7 @@
     background-color: transparent;
 }
 
-.sphinxgalleria-core figure .row button.button-modal .caption {
+.sphinxgalleria-core figure .caption {
     background-color: hsl(0, 0%, 34%);
     color: white;
     text-transform: none;
@@ -74,7 +70,7 @@
     text-align: left;
 }
 
-.sphinxgalleria-core figure .row button.button-modal figcaption {
+.sphinxgalleria-core figure figcaption {
     font-style: italic;
     text-align: center;
 }
@@ -94,7 +90,7 @@
     transition: unset;
 }
 
-.sphinxgalleria-core figure input[type=range] {
+.sphinxgalleria-core input[type=range] {
     width: 90%;
     margin-left: auto;
     margin-right: auto;
@@ -102,11 +98,11 @@
     border: none;
     -webkit-appearance: none;
 }
-.sphinxgalleria-core figure input[type=range]:focus {
+.sphinxgalleria-core input[type=range]:focus {
     outline: none;
     border: none;
 }
-.sphinxgalleria-core figure input[type=range]::-webkit-slider-runnable-track {
+.sphinxgalleria-core input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
     height: .1rem;
     padding: 0 1rem 0 1rem;
@@ -116,7 +112,7 @@
     animate: 0.2s;
     background-color: hsl(0, 0%, 34%);
 }
-.sphinxgalleria-core figure input[type=range]::-webkit-slider-thumb {
+.sphinxgalleria-core input[type=range]::-webkit-slider-thumb {
     height: 1rem;
     width: 1rem;
     border-radius: .5rem;
@@ -126,12 +122,12 @@
     -webkit-appearance: none;
     margin-top: -.5rem;
 }
-.sphinxgalleria-core figure input[type=range]:focus::-webkit-slider-runnable-track {
+.sphinxgalleria-core input[type=range]:focus::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     background-color: hsl(0, 0%, 34%);
     border: none;
 }
-.sphinxgalleria-core figure input[type=range]::-moz-range-track {
+.sphinxgalleria-core input[type=range]::-moz-range-track {
     width: 100%;
     padding: 0 1rem 0 1rem;
     margin: 0;
@@ -141,7 +137,7 @@
     animate: 0.2s;
     background-color: hsl(0, 0%, 34%);
 }
-.sphinxgalleria-core figure input[type=range]::-moz-range-thumb {
+.sphinxgalleria-core input[type=range]::-moz-range-thumb {
     height: 1rem;
     width: 1rem;
     border-radius: .5rem;
@@ -237,6 +233,7 @@
 
 .sphinxgalleria-core dialog header {
     position: relative;
+    max-width: 90vw !important;
 }
 
 .sphinxgalleria-core dialog menu {
@@ -268,7 +265,7 @@
     height: auto;
     display: inline;
     vertical-align: middle;
-    margin: 1;
+    margin: 0;
     border: none;
 }
 
diff --git a/static/sphinxgalleria/sphinxgalleria.mjs b/static/sphinxgalleria/sphinxgalleria.mjs
index c0b0938..b18b59e 100644
--- a/static/sphinxgalleria/sphinxgalleria.mjs
+++ b/static/sphinxgalleria/sphinxgalleria.mjs
@@ -96,7 +96,7 @@ export class SphinxGalleria {
         self.node_div_caption.appendChild(self.node_caption);
         self.node_div_caption.appendChild(self.node_alt);
         self.button_modal.appendChild(self.node_image);
-        self.button_modal.appendChild(self.node_div_caption);
+        self.node_figure.appendChild(self.node_div_caption);
 
         dialog_header.appendChild(self.dialog_title);
         dialog_header.appendChild(self.dialog_button_close_icon);
@@ -106,7 +106,6 @@ export class SphinxGalleria {
 
         if(!self.oneimage) {
             figure_row.appendChild(self.button_next);
-            self.node_figure.appendChild(self.node_slider);
         }
     }
 
@@ -121,6 +120,9 @@ export class SphinxGalleria {
         self.node_target.innerHTML = '';
         self.node_target.classList.add("sphinxgalleria-core");
         self.node_target.appendChild(self.node_figure);
+        if(!self.oneimage) {
+            self.node_target.appendChild(self.node_slider);
+        }
         self.node_target.appendChild(self.node_thumbnails);
         self.node_target.appendChild(self.node_mask);