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);