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