diff --git a/sticker.js b/sticker.js index 03c34bf..2299740 100644 --- a/sticker.js +++ b/sticker.js @@ -4,8 +4,8 @@ const stickerContainer = document.getElementById("sticker-container"); infoList = Array.from(informations.children); loopIndex = 0; -let windowWidth; -let windowHeight; +let windowWidth = stickerContainer.clientWidth; +let windowHeight = stickerContainer.clientHeight; let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"]; @@ -31,15 +31,15 @@ function percentagePosition(e, target) { return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) }; } -window.addEventListener("click", (e) => { +stickerContainer.addEventListener("click", (e) => { getInput(e); }); // Test for trick Safari mobile -window.addEventListener("touchstart", () => {}); -window.addEventListener("touchend", () => {}); -window.addEventListener("touchcancel", () => {}); -window.addEventListener("touchmove", () => {}); +stickerContainer.addEventListener("touchstart", () => {}); +stickerContainer.addEventListener("touchend", () => {}); +stickerContainer.addEventListener("touchcancel", () => {}); +stickerContainer.addEventListener("touchmove", () => {}); function getInput(e) { placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]); diff --git a/style.css b/style.css index 4e5b02c..3ede116 100644 --- a/style.css +++ b/style.css @@ -69,8 +69,8 @@ body { .sticker.deco { background-color: white; - min-width: 64px; - min-height: 64px; + min-width: 48px; + min-height: 48px; padding: 16px; }