feat: warped grid

packages/fe/assets/scss/main.scss

@@ -493,8 +493,8 @@ span.error {
   }
 }
 
-.warp-image-double {
-  margin-top: -3px;
+.warped-grid-column {
+  transform: translateY(-3px);
 }
 
 .z-index-100 {

packages/fe/components/form/fields/range.vue

@@ -193,6 +193,24 @@ $borderWidth: 2px;
 }
 
 // /////////////////////////////////////////////////////////////////////// Thumb
+@mixin thumb {
+  &:active {
+    background-color: $mandysPink;
+  }
+}
+
+:deep(.range) {
+  &::-webkit-slider-thumb {
+    @include thumb;
+  }
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+  &::-ms-thumb {
+    @include thumb;
+  }
+}
+
 .thumb {
   position: relative;
   left: calc(#{math.div($trackHeight, 2)} - #{math.div($thumbWidth, 2)});

packages/fe/components/hero-b.vue

@@ -30,7 +30,7 @@
 
         <div class="col-4_sm-3_mi-2">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -46,14 +46,16 @@ import ButtonX from '@/components/buttons/button-x'
 import Chevron from '@/components/icons/chevron'
 
 // import IconQuestionMark from '@/components/icons/question-mark'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 // ====================================================================== Export
 export default {
   name: 'HeroB',
 
   components: {
     ButtonX,
-    Chevron
+    Chevron,
+    WarpedGridColumn
     // IconQuestionMark
   },
 
@@ -192,17 +194,7 @@ export default {
   }
 }
 
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 45rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 45rem;
-  @include tiny {
-    width: calc(100% + 100vw * 0.041665 + 2rem);
-  }
+::v-deep .warped-grid-column {
+  overflow: visible;
 }
 </style>

packages/fe/components/notaries-table.vue

@@ -25,13 +25,13 @@
         root-html-tag="tbody"
         class="table-body">
         <tr
-          v-for="notary in filteredNotaries"
-          :key="notary.sp_id"
+          v-for="(notary, i) in filteredNotaries"
+          :key="`${notary.sp_id}-${i}`"
           class="row row-body">
 
           <td
-            v-for="cell in columns"
-            :key="cell.slug"
+            v-for="(cell, j) in columns"
+            :key="`${cell.slug}-${j}`"
             :class="['cell cell-body', cell.slug]">
             <div :class="['cell-inner-wrapper', `cell-${cell.slug}`]">
 
@@ -50,14 +50,14 @@
                   </div>
                   <div class="github-handles">
                     <ButtonX
-                      v-for="(handle, index) in notary.github_user"
-                      :key="handle"
+                      v-for="(handle, k) in notary.github_user"
+                      :key="`${handle}-${k}`"
                       :to="`https://github.com/${handle}`"
                       :data-tooltip="`https://github.com/${handle}`"
                       tag="a"
                       target="_blank"
                       class="github-handle">
-                      {{ handle }}<template v-if="index !== notary.github_user.length - 1">,</template>
+                      {{ handle }}<template v-if="k !== notary.github_user.length - 1">,</template>
                     </ButtonX>
                   </div>
                 </div>
@@ -88,8 +88,8 @@
                   </ButtonX>
                   <template v-if="notary.email.length > 0">
                     <ButtonX
-                      v-for="email in notary.email"
-                      :key="email"
+                      v-for="(email, l) in notary.email"
+                      :key="`${email}-${l}`"
                       :to="`mailto:${email}`"
                       :data-tooltip="`mailto:${email}`"
                       tag="a"

packages/fe/components/page-index/roadmap.vue

@@ -203,7 +203,6 @@ export default {
         const entry = roadmap[i]
         const date = entry.date
         const parsedDate = this.$moment(date)
-        console.log(parsedDate)
         entry.date = {
           original: date,
           quarter: `Q${parsedDate.format('Q YYYY')}`

packages/fe/components/warped-grid-column.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    ref="column"
+    class="warped-grid-column">
+    <WarpedGrid
+      v-for="(grid, i) in grids"
+      ref="canvases"
+      :key="`warped-grid-canvas-${i}`"
+      :animation-active="activeGrids.includes(i)"
+      v-bind="params"
+      :style="{ top: `${i * gridHeight}px` }"
+      class="warp-animation" />
+  </div>
+</template>
+
+<script>
+// ====================================================================== Import
+import WarpedGrid from '@/components/warped-grid'
+
+// =================================================================== Functions
+const calculateColumnHeight = (instance) => {
+  const column = instance.$refs.column
+  const grids = Math.ceil(column.clientHeight / instance.gridHeight)
+  if (instance.grids !== grids) {
+    instance.grids = grids
+  }
+  const canvases = instance.$refs.canvases
+  const active = instance.activeGrids
+  if (Array.isArray(canvases)) {
+    const len = instance.grids || 0
+    for (let i = 0; i < len; i++) {
+      const canvas = canvases[i]
+      if (canvas) {
+        const rect = canvas.$el.getBoundingClientRect()
+        const top = rect.top
+        const bottom = top + rect.height
+        if (bottom > 0 && top < window.innerHeight) {
+          if (!active.includes(i)) {
+            active.push(i)
+            instance.activeGrids = active
+          }
+        } else {
+          if (active.includes(i)) {
+            instance.activeGrids = active.filter(n => n !== i)
+          }
+        }
+      }
+    }
+  }
+}
+
+// ====================================================================== Export
+export default {
+  name: 'WarpedGridColumn',
+
+  components: {
+    WarpedGrid
+  },
+
+  props: {
+    params: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+
+  data () {
+    return {
+      scroll: false,
+      gridHeight: 1121,
+      grids: false,
+      activeGrids: [0]
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      calculateColumnHeight(this)
+      this.scroll = this.$throttle(() => { calculateColumnHeight(this) }, 50)
+      window.addEventListener('scroll', this.scroll)
+    })
+  },
+
+  beforeDestroy () {
+    if (this.scroll) { window.removeEventListener('scroll', this.scroll) }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.warped-grid-column {
+  position: relative;
+  height: calc(100% + 1rem + 3px);
+  width: 1121px;
+  overflow: hidden;
+}
+
+.warp-animation {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>