Fix position of prev and next buttons
This commit is contained in:
parent
2190c06edd
commit
03b3897d57
3 changed files with 16 additions and 17 deletions
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue