From 92fe7b9a065cb396edc69ef2b637aec487557890 Mon Sep 17 00:00:00 2001 From: Mattias Bodlund Date: Fri, 26 Apr 2024 17:54:08 +0200 Subject: [PATCH] na --- app/assets/stylesheets/application.css | 70 +++++++++++++++++++++++++- app/javascript/application.js | 65 +++++++++++++++++++++--- app/views/site/tmpl_article.html.erb | 9 +++- app/views/site/tmpl_list.html.erb | 10 ++-- 4 files changed, 139 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 3c08636..9a2f5fc 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -210,6 +210,7 @@ main { font-size: var(--fs-lg); font-weight: 700; line-height: 1; + color: var(--clr-black); padding: 0.888888888888889em 1.333333333333333em; border-radius: 400px; } @@ -238,6 +239,71 @@ main { color: var(--clr-black); } + +.reveal__container { + background-color: var(--clr-black); + border-radius: 400px; + position: relative; + height: 62px; + --opacity: 1.0; + + + &::before { + content: attr(data-label); + color: var(--clr-white); + position: absolute; + font-size: var(--fs-lg); + font-weight: 700; + top: 50%; + left: 50%; + z-index: inherit; + transform: translate(-50%, -50%); + opacity: var(--opacity); + } + + & input { + position: absolute; + inset: 0 0 0 0; + margin: 0; + } +} +input[type=range] { + appearance: none; + width: 100%; + background-color: transparent; + + height: 62px; + box-sizing: border-box; + border: 8px solid transparent; +} + +::-webkit-slider-thumb { + appearance: none; + width: 46px; + height: 46px; + border-radius: 50%; + background-color: var(--clr-white); + cursor: pointer; + background-image: url('ico-arrow-right.svg'); + background-repeat: no-repeat; + background-position: center center; + background-size: 42px 42px; + border: none; +} + +::-moz-range-thumb { + width: 46px; + height: 46px; + border-radius: 50%; + background-color: var(--clr-white); + cursor: pointer; + background-image: url('ico-arrow-right.svg'); + background-repeat: no-repeat; + background-position: center center; + background-size: 42px 42px; + border: none; +} + .icon__container { position: absolute; z-index: -1; @@ -356,7 +422,7 @@ ul.card__stack { & img { display: block; width: 100%; - aspect-ratio: 0.754545454545455; + aspect-ratio: 0.731818181818182; height: auto; border-radius: 8px; } @@ -460,7 +526,7 @@ ul.card__stack { margin-bottom: 40px; & img { - aspect-ratio: 0.754545454545455; + aspect-ratio: 0.725; } } diff --git a/app/javascript/application.js b/app/javascript/application.js index ede3994..e72658d 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,4 +1,3 @@ - // Choose language confirmation button document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => { confirm_btn.addEventListener('click', (e) => { @@ -7,19 +6,73 @@ document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => { }) // Copy link to clipboard -document.querySelectorAll('[data-share-url]').forEach((share_btn) => { - - share_btn.addEventListener('click', (e) => { - +document.querySelectorAll('[data-share-url]').forEach((share_btn) => { + share_btn.addEventListener('click', (e) => { navigator.clipboard.writeText(e.currentTarget.getAttribute('data-share-url')) alert('URL copied to clipboard!') }) }) - // Open all external links in ny tab for (const link of document.links) { if (link.hostname.replace(/^www\./i, "") != window.location.hostname.replace(/^www\./i, "") && (link.protocol == 'https:' || link.protocol == 'http:')) link.target = '_blank' } + +const input_range = document.getElementsByClassName('reveal')[0] +const max_value = 200 +const speed = 12 + +var curr_value +var raf_id + +if (input_range) { + input_range.min = 0; + input_range.max = max_value; +} + +function unlockStartHandler() { + window.cancelAnimationFrame(raf_id); + curr_value = +this.value; +} + +function unlockEndHandler() { + curr_value = +this.value; + + if (curr_value >= this.max) { + alert('Unlocked'); + + // reset + this.value = 0; + this.closest('.reveal__container').style.setProperty('--opacity', 1); + } else { + raf_id = window.requestAnimationFrame(animateHandler); + } +} + +// handle range animation +function animateHandler() { + + input_range.value = curr_value; + input_range.closest('.reveal__container').style.setProperty('--opacity', 1 - (input_range.value/input_range.max)); + + // continue? + if (curr_value > -1) { + window.requestAnimationFrame(animateHandler); + } + + // decrement + curr_value = curr_value - speed; +} + +if (input_range) { + input_range.addEventListener('mousedown', unlockStartHandler, false) + input_range.addEventListener('mousestart', unlockStartHandler, false) + input_range.addEventListener('mouseup', unlockEndHandler, false) + input_range.addEventListener('touchend', unlockEndHandler, false) + + input_range.addEventListener("input", (e) => { + e.currentTarget.closest('.reveal__container').style.setProperty('--opacity', 1 - (e.currentTarget.value/e.currentTarget.max)) + }) +} \ No newline at end of file diff --git a/app/views/site/tmpl_article.html.erb b/app/views/site/tmpl_article.html.erb index f5f2545..e191f6a 100644 --- a/app/views/site/tmpl_article.html.erb +++ b/app/views/site/tmpl_article.html.erb @@ -10,8 +10,13 @@ <% asset = attachment.asset %> <%= tag.figure class: 'link__image' do %> - <%= image_tag rails_storage_proxy_url(asset.file.variant(resize_to_fill: [355,440])), - alt: asset.title, + <%= image_tag rails_storage_proxy_url(asset.file.variant(resize_to_fill: [334,456])), + alt: asset.title, + srcset: " + #{rails_storage_proxy_url(asset.file.variant(resize_to_fill: [668,913]))} 668w, + #{rails_storage_proxy_url(asset.file.variant(resize_to_fill: [1002,1369]))} 1002w + ", + sizes: "", loading: 'lazy' if asset&.file&.image? %> <% end %> diff --git a/app/views/site/tmpl_list.html.erb b/app/views/site/tmpl_list.html.erb index e1ec5de..3a60156 100644 --- a/app/views/site/tmpl_list.html.erb +++ b/app/views/site/tmpl_list.html.erb @@ -18,13 +18,13 @@