diff --git a/app/assets/styles.css b/app/assets/styles.css index 78312d99..48bd2ae4 100644 --- a/app/assets/styles.css +++ b/app/assets/styles.css @@ -335,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) { 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}}