From f24579b1b734f917ea60dd811358f21987c46e92 Mon Sep 17 00:00:00 2001 From: Peter Rhodes Date: Tue, 14 Mar 2017 17:05:47 +0000 Subject: [PATCH] Complete sleep page. Related #7 Add custom button to sleep__range. --- public/assets/lion-sleeping-sprite.svg | 2331 ++++++++++++------------ public/assets/range-buttons.svg | 17 + public/index.js | 33 +- scss/_sleep.scss | 20 +- 4 files changed, 1213 insertions(+), 1188 deletions(-) create mode 100644 public/assets/range-buttons.svg diff --git a/public/assets/lion-sleeping-sprite.svg b/public/assets/lion-sleeping-sprite.svg index afdef84..397f6a7 100644 --- a/public/assets/lion-sleeping-sprite.svg +++ b/public/assets/lion-sleeping-sprite.svg @@ -1,7 +1,7 @@ + viewBox="652 279.1 1907.9 283.8" style="enable-background:new 652 279.1 1907.9 283.8;" xml:space="preserve"> diff --git a/public/assets/range-buttons.svg b/public/assets/range-buttons.svg new file mode 100644 index 0000000..59e27e1 --- /dev/null +++ b/public/assets/range-buttons.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + diff --git a/public/index.js b/public/index.js index 974c86e..7be8fb8 100644 --- a/public/index.js +++ b/public/index.js @@ -3,6 +3,10 @@ addAnswersToSessionStorage(); + document.getElementsByClassName("sleep__range")[0].oninput = function(){ + sleepingLion(); + } + $('.carousel').carousel({ indicators: true, shift: 100 @@ -85,29 +89,14 @@ node.classList.add('pop'); }); } - // positions of lions: - // lion 0 : background-position: 0px; - // lion 1 : background-position: -332px; - // lion 2 : background-position: -664px; - // lion 3 : background-position: -996px; - // lion 4 : background-position: -1328px; - // lion 5 : background-position: -1650px; - - // math: background-position: 254px + 80px - - var sleepSlider = document.getElementsByClassName("sleep__range")[0]; - sleepSlider.oninput = function(){ lion(); } - - function lion(){ - var value = sleepSlider.value; - changeBackgroundPosition(value) - } - function changeBackgroundPosition(value){ + function sleepingLion(){ + var value = document.getElementsByClassName("sleep__range")[0].value; var element = document.getElementsByClassName("sleep__sleeping-lion")[0]; - var numNum = (parseInt(value) * 0.5).toString(); - console.log(numNum); - element.style.backgroundPosition = numNum - console.log(element.style); + changeBackgroundPosition(element, value, -332) + } + + function changeBackgroundPosition(element, value, illustrationSize){ + element.style.backgroundPosition = parseInt(value) * illustrationSize + "px"; } })(); diff --git a/scss/_sleep.scss b/scss/_sleep.scss index f6f8edf..92b0113 100644 --- a/scss/_sleep.scss +++ b/scss/_sleep.scss @@ -17,29 +17,35 @@ .sleep__sleeping-lion { background-image: url("../assets/lion-sleeping-sprite.svg"); background-repeat: no-repeat; - background-position: 0px; + background-position: -0px; background-size: 2000px; height: 320px; - width: 332px; + width: 330px; margin-left: 120px; } .sleep__range { -webkit-appearance: none; width: 500px; - margin: 50px 0 130px 0; + margin: 100px 0 100px 0; &::-webkit-slider-runnable-track { width: 300px; - height: 0.001px; + height: 2px; background: $transparent; } + &:focus { + outline: 0; + } + &::-webkit-slider-thumb { -webkit-appearance: none; - height: 140px; - width: 140px; - background-image: url(./assets/sleep-zs.svg); + height: 150px; + width: 150px; + position:relative; + margin-top: -47.4px; + background-image: url(../assets/range-buttons.svg); background-size: contain; background-repeat: no-repeat; }