From 0d722f8129b334eab5bc19d231bf21f972206422 Mon Sep 17 00:00:00 2001 From: Katie Gengler Date: Thu, 11 Sep 2025 02:04:56 -0400 Subject: [PATCH 1/2] Add a scroll to top button. I got tired of scrolling. --- app/assets/styles.css | 42 +++++++++++++++++++++++++ app/components/scroll-to-top-button.gjs | 33 +++++++++++++++++++ app/controllers/project-version.js | 3 ++ app/templates/project-version.hbs | 4 +++ 4 files changed, 82 insertions(+) create mode 100644 app/components/scroll-to-top-button.gjs diff --git a/app/assets/styles.css b/app/assets/styles.css index 78312d99..2d1237bf 100644 --- a/app/assets/styles.css +++ b/app/assets/styles.css @@ -262,6 +262,48 @@ section.event { border: 0; } +.scroll-to-top { + position: fixed; + bottom: 50px; + right: 30px; + z-index: 10; + display: block; + background: var(--color-gray-500); + border-width: 0; + height: 50px; + width: 50px; + border-radius: 50%; + transition: + all 0.2s linear, + opacity 0.3s; + cursor: pointer; + opacity: 0; + pointer-events: none; +} + +.scroll-to-top.is-visible { + opacity: 1; + pointer-events: auto; +} + +.scroll-to-top:hover { + transform: scale(1.1); +} + +.scroll-to-top::after { + content: ""; + position: absolute; + left: 16px; + z-index: 11; + display: block; + width: 15px; + height: 15px; + border-top: 4px solid var(--color-gray-100); + border-left: 4px solid var(--color-gray-100); + transform: rotate(45deg); + top: 20px; +} + /* Ember data uses styled elements in markdown blocks that conflict with the default styles for blockquotes (because of ::before block that has an absolutely positioned quote mark). diff --git a/app/components/scroll-to-top-button.gjs b/app/components/scroll-to-top-button.gjs new file mode 100644 index 00000000..22e416e0 --- /dev/null +++ b/app/components/scroll-to-top-button.gjs @@ -0,0 +1,33 @@ +import { modifier } from 'ember-modifier'; +import { on } from '@ember/modifier'; + +const showOnScroll = modifier(function showOnScroll(element) { + function toggleVisibility() { + if (window.scrollY > window.innerHeight) { + element.classList.add('is-visible'); + } else { + element.classList.remove('is-visible'); + } + } + + toggleVisibility(); + window.addEventListener('scroll', toggleVisibility); + + return () => { + window.removeEventListener('scroll', toggleVisibility); + }; +}); + +function scrollToTopOfPageOnClick() { + window.scrollTo({ top: 0, behavior: 'smooth' }); +} + + diff --git a/app/controllers/project-version.js b/app/controllers/project-version.js index 15eeb117..01cbedcc 100644 --- a/app/controllers/project-version.js +++ b/app/controllers/project-version.js @@ -19,6 +19,9 @@ export default class ProjectVersionController extends Controller { @service project; + @service + fastboot; + @service router; @service('project') projectService; diff --git a/app/templates/project-version.hbs b/app/templates/project-version.hbs index 1dd4227d..45eaca99 100644 --- a/app/templates/project-version.hbs +++ b/app/templates/project-version.hbs @@ -31,5 +31,9 @@
{{outlet}} + + {{#unless this.fastboot.isFastBoot}} + + {{/unless}}
From 52bc9aa55faccb2cb4638a15f9e7fcc581c09d90 Mon Sep 17 00:00:00 2001 From: Katie Gengler Date: Fri, 12 Sep 2025 14:03:11 -0400 Subject: [PATCH 2/2] Only show the scroll to top button on desktop (when no menu button) --- app/assets/styles.css | 84 +++++++++++++++++++++---------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/app/assets/styles.css b/app/assets/styles.css index 2d1237bf..48bd2ae4 100644 --- a/app/assets/styles.css +++ b/app/assets/styles.css @@ -262,48 +262,6 @@ section.event { border: 0; } -.scroll-to-top { - position: fixed; - bottom: 50px; - right: 30px; - z-index: 10; - display: block; - background: var(--color-gray-500); - border-width: 0; - height: 50px; - width: 50px; - border-radius: 50%; - transition: - all 0.2s linear, - opacity 0.3s; - cursor: pointer; - opacity: 0; - pointer-events: none; -} - -.scroll-to-top.is-visible { - opacity: 1; - pointer-events: auto; -} - -.scroll-to-top:hover { - transform: scale(1.1); -} - -.scroll-to-top::after { - content: ""; - position: absolute; - left: 16px; - z-index: 11; - display: block; - width: 15px; - height: 15px; - border-top: 4px solid var(--color-gray-100); - border-left: 4px solid var(--color-gray-100); - transform: rotate(45deg); - top: 20px; -} - /* Ember data uses styled elements in markdown blocks that conflict with the default styles for blockquotes (because of ::before block that has an absolutely positioned quote mark). @@ -377,6 +335,48 @@ table td { .content { margin-top: var(--spacing-4); } + + .scroll-to-top { + position: fixed; + bottom: 50px; + right: 30px; + z-index: 10; + display: block; + background: var(--color-gray-500); + border-width: 0; + height: 50px; + width: 50px; + border-radius: 50%; + transition: + all 0.2s linear, + opacity 0.3s; + cursor: pointer; + opacity: 0; + pointer-events: none; + } + + .scroll-to-top.is-visible { + opacity: 1; + pointer-events: auto; + } + + .scroll-to-top:hover { + transform: scale(1.1); + } + + .scroll-to-top::after { + content: ""; + position: absolute; + left: 16px; + z-index: 11; + display: block; + width: 15px; + height: 15px; + border-top: 4px solid var(--color-gray-100); + border-left: 4px solid var(--color-gray-100); + transform: rotate(45deg); + top: 20px; + } } @media (width <= 450px) {