Merge pull request #37 from MartinsOnuoha/CHORE-23

✨ feat(appscrolltop.vue): add scroll to top btn (closes #23)

src/App.vue

@@ -3,5 +3,5 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <RouterView ref="el" />
 </template>

src/components/AppAddUrl/_AppAddUrl.scss

@@ -1,9 +1,12 @@
 .AppAddUrl {
-  @apply flex mb-5 text-sm items-baseline;
+  @apply flex flex-col md:flex-row mb-5 text-sm items-baseline;
   input {
     @apply p-3 rounded-lg border transition-all w-full;
     max-height: 44px;
   }
+  label {
+    @apply w-full;
+  }
   button {
     @apply p-3 bg-black text-white mt-3 rounded-lg w-44;
   }

src/components/AppFilter/AppFilter.vue

@@ -49,7 +49,7 @@ const filterCategories = () => {
 </script>
 
 <template>
-  <div v-click-outside="closeDropdown" class="AppFilter">
+  <div v-click-outside="closeDropdown" class="AppFilter" id="AppFilter">
     <label for="category-dropdown">
       <input
         ref="categorySearch"

src/components/AppFilter/_AppFilter.scss

@@ -1,6 +1,6 @@
 .AppFilter {
   font-family: 'Fira Mono', sans-serif;
-  @apply rounded-lg w-2/5 cursor-pointer relative bg-transparent border text-sm;
+  @apply rounded-lg w-full md:w-2/5 mr-2 cursor-pointer relative bg-transparent border text-sm;
 
   input {
     @apply w-full h-full p-3 rounded-lg relative bg-white;

src/components/AppScrollTop/AppScrollTop.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import MdiArrowUpThin from '@/components/Icons/MdiChevronUp.vue'
+
+const scrollToTop = () => {
+  document.getElementById('AppFilter')?.scrollIntoView({ behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <button @click="scrollToTop" class="AppScrollTop">
+    <MdiArrowUpThin />
+  </button>
+</template>
+
+<style lang="scss">
+.AppScrollTop {
+  @apply p-2 rounded-full shadow-lg text-3xl absolute bottom-5 right-5 bg-amber-100 transition-all;
+}
+</style>

src/components/AppSideBanner/_AppSideBanner.scss

@@ -1,5 +1,5 @@
 .AppSideBanner {
-  @apply h-screen bg-contain relative;
+  @apply h-screen bg-contain relative hidden md:block;
   background-image: url('@/assets/banner.webp');
 
   &__overlay {

src/components/AppSidePanel/AppSidePanelSamples.vue

@@ -21,7 +21,7 @@ defineProps({
 <style lang="scss">
 .AppSidePanelSamples {
   &__links {
-    @apply grid grid-cols-2 gap-4;
+    @apply grid grid-cols-1 md:grid-cols-2 3xl:grid-cols-3 gap-4;
   }
   &__nolinks {
     @apply flex flex-col items-center p-5 w-full;

src/components/AppSidePanel/_AppSidePanel.scss

@@ -1,11 +1,11 @@
 .AppSidePanel {
-  @apply h-screen w-full absolute flex z-50 transition-all duration-200 ease-in;
+  @apply min-h-screen w-full absolute flex z-50 transition-all duration-200 ease-in;
 
   &__overlay {
-    @apply w-full bg-gradient-to-bl from-purple-800 to-transparent bg-opacity-70 flex justify-center items-center;
+    @apply w-full hidden md:flex justify-center items-center bg-gradient-to-bl from-purple-800 to-transparent bg-opacity-70;
   }
   &__content {
-    @apply w-3/6 bg-[var(--color-ghostwhite)] shadow-2xl text-gray-800 p-8;
+    @apply w-full md:w-3/6 bg-[var(--color-ghostwhite)] shadow-2xl text-gray-800 p-8;
   }
   &__header {
     button {

src/components/Icons/MdiChevronUp.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z"></path>
+  </svg>
+</template>

src/views/HomeView.vue

@@ -11,6 +11,25 @@ import { GET_STATEMENTS } from '@/graphql/queries/statements'
 import { useQuery } from '@vue/apollo-composable'
 import type { Category } from '@/entities/Category'
 
+import { useScroll, watchThrottled } from '@vueuse/core'
+import AppScrollTop from '@/components/AppScrollTop/AppScrollTop.vue'
+
+const el = ref<HTMLElement | null>(null)
+const { y } = useScroll(el, { behavior: () => 'smooth' })
+const showScrollToTop = ref(false)
+
+watchThrottled(
+  y,
+  (n) => {
+    if (n > 800) {
+      showScrollToTop.value = true
+    } else {
+      showScrollToTop.value = false
+    }
+  },
+  { throttle: 1000 }
+)
+
 const selectedStatement: Ref<Statement | null> = ref(null)
 const filter = ref({})
 
@@ -42,9 +61,9 @@ const deselectStatement = () => {
 </script>
 
 <template>
-  <section class="HomeView">
+  <section class="HomeView" id="HomeView">
     <AppSideBanner class="w-2/4" />
-    <main>
+    <main ref="el">
       <header class="HomeView__header">
         <AppFilter @category:selected="setSelectedCategory" />
         <HeaderActions />
@@ -53,6 +72,7 @@ const deselectStatement = () => {
         <AppStatementCard
           v-for="(statement, index) in statements"
           :key="index"
+          :id="index"
           :statement="statement"
           @click="selectStatement(statement)"
         />
@@ -61,6 +81,7 @@ const deselectStatement = () => {
         <AppStatementCard v-for="x in 10" :key="x" />
       </section>
     </main>
+    <AppScrollTop :class="showScrollToTop ? 'opacity-100' : 'opacity-0'" />
     <AppSidePanel
       :open="!!selectedStatement"
       @panel:close="deselectStatement"

src/views/_HomeView.scss

@@ -3,14 +3,14 @@
   background-color: var(--color-ghostwhite);
 
   main {
-    @apply w-2/4 p-5 max-h-screen overflow-y-scroll;
+    @apply w-full md:w-2/4 p-5 max-h-screen overflow-y-scroll;
   }
 
   &__header {
     @apply pt-4 pb-4 flex items-center justify-between mb-10;
   }
 
   &__content {
-    @apply grid grid-cols-2 gap-4;
+    @apply grid grid-cols-1 md:grid-cols-2 3xl:grid-cols-3 gap-4;
   }
 }

tailwind.config.js

@@ -3,7 +3,11 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        '3xl': '1921px',
+      }
+    },
   },
   plugins: [],
 }