added scroll to top button

resources/cider-ui-tests/style.less

@@ -1613,6 +1613,32 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 // Collection Page
 .collection-page {
+  padding-bottom: 128px;
+  .top-fab {
+    height: 52px;
+    width: 52px;
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    border-radius: 100%;
+    background: rgb(86 86 86 / 50%);
+    border: 0px;
+    appearance: none;
+    backdrop-filter: blur(16px) saturate(180%);
+
+    >svg {
+      height: 50%;
+      color: #eee;
+    }
+
+    &:hover {
+      background: rgb(186 186 186 / 50%);
+    }
+
+    &:active {
+      background: var(--keyColor);
+    }
+  }
   .header-text {
     margin-bottom: 32px;
   }
@@ -2239,6 +2265,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   opacity: 0;
 }
 
+.fabfade-enter-active,
+.fabfade-leave-active {
+  transition: transform .1s var(--appleEase), opacity .1s var(--appleEase);
+}
+
+.fabfade-enter,
+.fabfade-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
 /* Transitions End */
 
 @media (prefers-color-scheme: light) {

resources/cider-ui-tests/views/main.ejs

@@ -131,7 +131,7 @@
                         <input type="search" spellcheck="false" @click="showSearch()"
                                @focus="search.showHints = true"
                                @blur="setTimeout(()=>{search.showHints = false}, 100)"
-                               v-on:keyup.enter="searchQuery()"
+                               v-on:keyup.enter="searchQuery();search.showHints = false"
                                @change="showSearch();" @input="getSearchHints()" placeholder="Search..."
                                v-model="search.term"
                                class="search-input">

resources/cider-ui-tests/views/pages/collection-list.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-collection-list">
     <div class="content-inner collection-page">
-        <h3 class="header-text">{{ title }}</h3>
+        <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
         <div v-if="data['data'] != 'null'" class="well">
             <template v-for="item in data.data">
                 <template v-if="item.type == 'artists'">
@@ -16,7 +16,11 @@
             </template>
             <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
         </div>
-
+        <transition name="fabfade">
+            <button class="top-fab" v-show="showFab" @click="scrollToTop()">
+                <%- include("../svg/arrow-up.svg") %>
+            </button>
+        </transition>
     </div>
 </script>
 <script>
@@ -40,10 +44,15 @@
         data: function () {
             return {
                 triggerEnabled: true,
-                canSeeTrigger: false
+                canSeeTrigger: false,
+                showFab: false
             }
         },
         methods: {
+            scrollToTop() {
+                let target = document.querySelector(".header-text")
+                target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
+            },
             getNext() {
                 // if this.data.next is not null, then we can run this.data.next() and concat to this.data.data to get the next page
                 switch(this.type) {
@@ -79,6 +88,13 @@
                 }
 
             },
+            headerVisibility: function (isVisible, entry) {
+                if(isVisible) {
+                    this.showFab = false;
+                }else{
+                    this.showFab = true;
+                }
+            },
             visibilityChanged: function (isVisible, entry) {
                 if(isVisible) {
                     this.canSeeTrigger = true;

resources/cider-ui-tests/views/svg/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"/></svg>