fix: add tooltip, misc bug fixes, a11y fixes

packages/fe/assets/scss/variables.scss

@@ -28,6 +28,10 @@ $athensGray: #E7E9ED;
 $capeCod: #3C4748;
 $grayNurse2: #E0E7E0;
 $dodgerBlue: #3DA2FF;
+$blue: #001AFF;
+$neptune: #74C3B5;
+$iron: #DDDFE3;
+
 
 // ----------------------------------------------------------------- Breakpoints
 $breakpoint_Tiny: 25.9375rem; // 415px
@@ -57,7 +61,7 @@ $duration: 300ms;
   width: 2.1875rem;
   height: 2.1875rem;
   border-radius: 50%;
-  border: solid 1px #DDDFE3;
+  border: solid 1px $iron;
   display: flex;
   flex-direction: column;
   justify-content: center;

packages/fe/components/block-builder.vue

@@ -70,6 +70,7 @@ import TextBlock from '@/components/blocks/text-block'
 import ImageBlock from '@/components/blocks/image-block'
 import MarkdownBlock from '@/components/blocks/markdown-block'
 import CategorySliderBlock from '@/components/blocks/category-slider-block'
+import CardListBlock from '@/components/blocks/card-list-block'
 import CategoryTicker from '@/components/category-ticker'
 import BlockBuilder from '@/components/block-builder'
 
@@ -83,7 +84,8 @@ export default {
     BlockBuilder,
     MarkdownBlock,
     CategorySliderBlock,
-    CategoryTicker
+    CategoryTicker,
+    CardListBlock
   },
 
   props: {

packages/fe/components/blocks/card-list-block.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :class="['card-list-block', `type__${cardType}`]">
+    <div :class="['card-list', direction]">
+
+      <template v-for="(card, i) in cards">
+        <component
+          :is="cardComponent"
+          :key="`card-${i}`"
+          :index="i + 1"
+          :card="card"
+          class="card" />
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<script>
+// ====================================================================== Import
+import FAQCard from '@/components/faq-card'
+
+// ====================================================================== Export
+export default {
+  name: 'CardListBlock',
+
+  components: {
+    FAQCard
+  },
+
+  props: {
+    block: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    cardType () {
+      return this.block.card_type
+    },
+    direction () {
+      return ['row', 'column', 'row-reverse', 'column-reverse'].includes(this.block.direction) ? this.block.direction : 'row'
+    },
+    cardComponent () {
+      switch (this.cardType) {
+        case 'faq': return 'FAQCard'
+        default : return 'FAQCard'
+      }
+    },
+    cards () {
+      return this.block.cards
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.card-list {
+  display: flex;
+  &.row {
+    flex-direction: row;
+  }
+  &.column {
+    flex-direction: column;
+  }
+  &.row-reverse {
+    flex-direction: row-reverse;
+  }
+  &.column-reverse {
+    flex-direction: column-reverse;
+  }
+}
+</style>

packages/fe/components/breadcrumbs.vue

@@ -46,7 +46,8 @@ export default {
 
   data () {
     return {
-      links: false
+      links: false,
+      hidden: false
     }
   },
 
@@ -60,9 +61,6 @@ export default {
         return this.siteContent.general.breadcrumbs_mapping
       }
       return false
-    },
-    hidden () {
-      return this.links.length < 2
     }
   },
 
@@ -90,9 +88,11 @@ export default {
           url: '/',
           text: breadcrumbs.index
         }]
+        this.hidden = true
         items.forEach((item, i) => {
           const routeName = items.slice(0, i + 1).join('-')
           if (breadcrumbs.hasOwnProperty(routeName)) {
+            this.hidden = false
             const url = `/${items.slice(0, i + 1).join('/')}`
             if (i !== items.length - 1 && routeName !== 'dataset') {
               links.push({ type: 'default', url, text: breadcrumbs[routeName] })
@@ -101,6 +101,7 @@ export default {
             }
           } else {
             if (this.dataset) {
+              // single dataset
               links.push({ text: this.dataset.name })
             }
           }

packages/fe/components/cid-card.vue

@@ -93,6 +93,8 @@
               @click="toggleBottomPanel">
               {{ open ? 'Less' : 'More' }}
             </ButtonToggle>
+            <!-- desktop -->
+            <Tooltip :btn="tooltipBtn" :text="tooltipText"></Tooltip>
           </div>
 
           <div v-if="mobile" class="mobile-sp-section-heading">
@@ -188,6 +190,11 @@
         </div>
       </div>
 
+      <!-- mobile -->
+      <div class="inspect-file-mobile">
+        <Tooltip v-if="mobile" class="inspect-file-mobile" :btn="tooltipBtn" :text="tooltipText" align="right"></Tooltip>
+      </div>
+
     </div>
   </CardCutout>
 </template>
@@ -202,6 +209,7 @@ import Accordion from '@/components/accordion/accordion'
 import AccordionSection from '@/components/accordion/accordion-section'
 import AccordionHeader from '@/components/accordion/accordion-header'
 import AccordionContent from '@/components/accordion/accordion-content'
+import Tooltip from '@/components/tooltip'
 
 // ====================================================================== Export
 export default {
@@ -212,6 +220,7 @@ export default {
     ButtonToggle,
     CopyIcon,
     CIDSlider,
+    Tooltip,
     Accordion,
     AccordionSection,
     AccordionHeader,
@@ -259,6 +268,12 @@ export default {
     },
     storageProviders () {
       return this.cidData.storage_providers
+    },
+    tooltipText () {
+      return `You can access a preview of the files within this CID, however at this time it must be downloaded and unpacked from the zst format. <a target='_blank' href='https://${this.hash}.ipfs.w3s.link'>Learn more</a>`
+    },
+    tooltipBtn () {
+      return 'Inspect files'
     }
   },
 
@@ -284,10 +299,10 @@ export default {
 // ///////////////////////////////////////////////////////////////////// General
 .panel-top {
   transition: border 200ms ease;
-  border-bottom: solid 1px rgba(#DDDFE3, 0);
+  border-bottom: solid 1px rgba($iron, 0);
   &.open,
   &.mobile {
-    border-bottom: solid 1px rgba(#DDDFE3, 1);
+    border-bottom: solid 1px rgba($iron, 1);
   }
   &:not(.mobile) {
     .mobile-row,
@@ -335,7 +350,7 @@ export default {
 
 .bottom-content {
   @include medium {
-    padding-top: 1.125rem;
+    padding: 0;
   }
 }
 
@@ -354,6 +369,17 @@ export default {
 .label {
   @include medium {
     width: 40%;
+    min-width: toRem(120);
+    flex-shrink: 0;
+  }
+}
+
+.inspect-file-mobile {
+  padding-bottom: toRem(10);
+  .tooltip-c {
+    display: flex;
+    justify-content: right;
+    padding-right: 1.875rem;
   }
 }
 
@@ -424,6 +450,10 @@ export default {
     &:not(:last-child) {
       margin-right: 0.375rem;
     }
+    @include medium {
+      @include fontSize_14;
+      @include fontWeight_Bold;
+    }
   }
 }
 
@@ -433,11 +463,15 @@ export default {
   margin-top: 0.4375rem;
   @include medium {
     margin-top: 0;
+    @include fontWeight_Bold;
   }
 }
 
 .replica-list {
   margin: 0.875rem 0;
+  @include medium {
+    margin: 0;
+  }
 }
 .replica {
   width: 0.8125rem;
@@ -467,14 +501,23 @@ export default {
   .date {
     @include fontSize_16;
     @include fontWeight_Medium;
-    margin-bottom: 0.375rem;
+    margin-bottom: 0.70rem;
     @include medium {
       margin-bottom: 0;
+      order: 2;
+      @include fontWeight_Bold;
     }
   }
   .more {
     @include fontSize_14;
     @include fontWeight_Regular;
+    @include medium {
+      margin-bottom: 0;
+      order: 1;
+      width: 40%;
+      min-width: toRem(120);
+      flex-shrink: 0;
+    }
   }
 }
 
@@ -484,6 +527,8 @@ export default {
   margin-bottom: auto;
   @include medium {
     margin-top: 0;
+    @include fontSize_14;
+    @include fontWeight_Bold;
   }
   &.active {
     &:before {
@@ -493,17 +538,20 @@ export default {
       width: 1rem;
       height: 1rem;
       top: 0.25rem;
-      background-color: #74C3B5;
+      background-color: $neptune;
       border-radius: 50%;
       margin-right: 0.875rem;
+      @include medium {
+        margin-right: 0.5rem;
+      }
     }
   }
 }
 
 // ///////////////////////////////////////////////////// STORAGE PROVIDERS PANEL
 .mobile-sp-section-heading {
   .heading {
-    @include fontSize_20;
+    @include fontSize_24;
     @include fontWeight_Medium;
     line-height: leading(24, 20);
     margin: 0.625rem 0;
@@ -539,14 +587,22 @@ export default {
       width: 11px;
       height: 7px;
       top: calc(50% - 3.5px);
-      right: 1rem;
+      right: 0;
       transform: rotate(180deg);
       transition: transform 250ms ease;
       background-repeat: no-repeat;
       background-size: contain;
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 6.5L6 1.5L1 6.5' stroke='%231B1F12' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e ");
     }
   }
+  @include medium {
+    border-bottom: 1px solid $iron;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
   &.open {
     .accordion-header {
       &:after {
@@ -572,6 +628,9 @@ export default {
 
 .cell {
   @include fontWeight_Medium;
+  @include medium {
+    @include fontWeight_Bold;
+  }
 }
 
 .retrieval-title,

packages/fe/components/cid-table.vue

@@ -88,6 +88,15 @@ export default {
 }
 
 .table {
+  .card-cutout-wrapper {
+    // reversing z-index based from page render order
+    // so that tooltip for "inspect" shows in front
+    @for $i from 1 through 20 {
+      &:nth-child(#{$i}) {
+        z-index: #{20 - $i};
+      }
+    }
+  }
   &.null-state {
     padding: 1.8125rem 25%;
     @include small {