Fix position of prev and next buttons

This commit is contained in:
Kujiu 2021-08-03 16:17:16 +02:00
parent 2190c06edd
commit 03b3897d57
Signed by: kujiu
GPG key ID: ABBB2CAC6855599F
3 changed files with 16 additions and 17 deletions

View file

@ -1,7 +1,7 @@
Changes Changes
####### #######
1.1.0 (*2021-07-24*) 1.1.0 (*2021-08-03*)
~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~
- Better compatibility with mobile phones and small screens - Better compatibility with mobile phones and small screens

View file

@ -37,14 +37,10 @@
} }
.sphinxgalleria-core figure .row button { .sphinxgalleria-core figure .row button {
flex-grow: 1;
flex-shrink: 1;
cursor: pointer; cursor: pointer;
} }
.sphinxgalleria-core figure .row button.button-modal { .sphinxgalleria-core figure .row button.button-modal {
flex-grow: 1000;
flex-shrink: 1000;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
@ -60,7 +56,7 @@
background-color: transparent; background-color: transparent;
} }
.sphinxgalleria-core figure .row button.button-modal .caption { .sphinxgalleria-core figure .caption {
background-color: hsl(0, 0%, 34%); background-color: hsl(0, 0%, 34%);
color: white; color: white;
text-transform: none; text-transform: none;
@ -74,7 +70,7 @@
text-align: left; text-align: left;
} }
.sphinxgalleria-core figure .row button.button-modal figcaption { .sphinxgalleria-core figure figcaption {
font-style: italic; font-style: italic;
text-align: center; text-align: center;
} }
@ -94,7 +90,7 @@
transition: unset; transition: unset;
} }
.sphinxgalleria-core figure input[type=range] { .sphinxgalleria-core input[type=range] {
width: 90%; width: 90%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -102,11 +98,11 @@
border: none; border: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
.sphinxgalleria-core figure input[type=range]:focus { .sphinxgalleria-core input[type=range]:focus {
outline: none; outline: none;
border: none; border: none;
} }
.sphinxgalleria-core figure input[type=range]::-webkit-slider-runnable-track { .sphinxgalleria-core input[type=range]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: .1rem; height: .1rem;
padding: 0 1rem 0 1rem; padding: 0 1rem 0 1rem;
@ -116,7 +112,7 @@
animate: 0.2s; animate: 0.2s;
background-color: hsl(0, 0%, 34%); 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; height: 1rem;
width: 1rem; width: 1rem;
border-radius: .5rem; border-radius: .5rem;
@ -126,12 +122,12 @@
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -.5rem; 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; -webkit-appearance: none;
background-color: hsl(0, 0%, 34%); background-color: hsl(0, 0%, 34%);
border: none; border: none;
} }
.sphinxgalleria-core figure input[type=range]::-moz-range-track { .sphinxgalleria-core input[type=range]::-moz-range-track {
width: 100%; width: 100%;
padding: 0 1rem 0 1rem; padding: 0 1rem 0 1rem;
margin: 0; margin: 0;
@ -141,7 +137,7 @@
animate: 0.2s; animate: 0.2s;
background-color: hsl(0, 0%, 34%); 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; height: 1rem;
width: 1rem; width: 1rem;
border-radius: .5rem; border-radius: .5rem;
@ -237,6 +233,7 @@
.sphinxgalleria-core dialog header { .sphinxgalleria-core dialog header {
position: relative; position: relative;
max-width: 90vw !important;
} }
.sphinxgalleria-core dialog menu { .sphinxgalleria-core dialog menu {
@ -268,7 +265,7 @@
height: auto; height: auto;
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
margin: 1; margin: 0;
border: none; border: none;
} }

View file

@ -96,7 +96,7 @@ export class SphinxGalleria {
self.node_div_caption.appendChild(self.node_caption); self.node_div_caption.appendChild(self.node_caption);
self.node_div_caption.appendChild(self.node_alt); self.node_div_caption.appendChild(self.node_alt);
self.button_modal.appendChild(self.node_image); 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_title);
dialog_header.appendChild(self.dialog_button_close_icon); dialog_header.appendChild(self.dialog_button_close_icon);
@ -106,7 +106,6 @@ export class SphinxGalleria {
if(!self.oneimage) { if(!self.oneimage) {
figure_row.appendChild(self.button_next); 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.innerHTML = '';
self.node_target.classList.add("sphinxgalleria-core"); self.node_target.classList.add("sphinxgalleria-core");
self.node_target.appendChild(self.node_figure); 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_thumbnails);
self.node_target.appendChild(self.node_mask); self.node_target.appendChild(self.node_mask);