wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes for beforeAfter

Browse source
This commit is contained in:
Jon McClure 2022-08-22 15:43:35 +01:00
parent 338619318e
commit c3a272bf7b
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -39,7 +39,7 @@
/** Drag handle colour */
export let handleColour = 'white';
/** Drag handle opacity */
export let handleInactiveOpacity = 0.4;
export let handleInactiveOpacity = 0.6;
/** Margin at the edge of the image to stop dragging */
export let handleMargin = 20;
/** Percentage of the component width the handle will travel ona key press */
@ -100,16 +100,16 @@
const move = (e) => {
if (sliding && imgOffset) {
const el = e.touches ? e.touches[0] : e;
const figureOffset = figure
? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
: 0;
const figureOffset = figure ?
parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
0;
let x = el.pageX - figureOffset - imgOffset.left;
x =
x < handleMargin
? handleMargin
: x > w - handleMargin
? w - handleMargin
: x;
x < handleMargin ?
handleMargin :
x > w - handleMargin ?
w - handleMargin :
x;
offset = x / w;
}
};
@ -241,6 +241,7 @@
top: 0;
left: 0;
z-index: 20;
margin: 0;
&.after {
z-index: 21;
}
@ -258,7 +259,6 @@
:global {
p {
font-family: var(--theme-font-family-note, $font-family-display);
color: var(--theme-colour-text-primary);
font-size: 1rem;
line-height: 1.2rem;
&:last-child {