fix(): Sources catalog

js/anchors-indicator/index.js

@@ -2,9 +2,6 @@
 const COMPONENT_SELECTOR = '[data-anchors-indicator]'
 const ACTIVE_CLASS = 'data-active-class'
 const SECTION_ATTR= 'data-sections'
-const options = {
-  rootMargin: 50
-}
 
 const throttle = (fn, wait) => {
   var time = Date.now()
@@ -30,7 +27,15 @@ export default () => {
         let currentElementOffset = current.offsetTop
         let scrollPosition = document.documentElement.scrollTop || document.body.scrollTop
 
-        if (currentElementOffset <= scrollPosition + options.rootMargin) {
+        let position = null
+
+        if (window.innerWidth >= 768) {
+          position = scrollPosition + (window.innerHeight * 0.2)
+        } else {
+          position = scrollPosition + (window.innerHeight * 0.6)
+        }
+
+        if (currentElementOffset <= position) {
           allLinks.forEach(currentLink => {
             currentLink.classList.remove(activeClass)
           })
@@ -49,7 +54,7 @@ export default () => {
       })
     }
 
-    scrollspy()
-    window.addEventListener('scroll', throttle(scrollspy, 200))
+    window.addEventListener('load', scrollspy())
+    window.addEventListener("scroll", throttle(scrollspy, 50))
   })
 }

src/_includes/sidebar/destination-menu-mobile.html

@@ -1,9 +1,9 @@
 {% assign categories = site.data.catalogV2.destination_categories.items %}
 
-<div class="destination-menu-mobile" data-dropdown-menu data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu-mobile__item--active">
+<div class="destination-menu-mobile" data-dropdown-menu data-active-class="destination-menu-mobile__item--active">
   <div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
     <div class="destination-menu-mobile__select-inner">
-      <span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
+      <span data-ref="dropdown-menu[head-inner]">
         Choose category
       </span>
 

src/_includes/sidebar/source-menu-mobile.html

@@ -1,9 +1,9 @@
 {% assign destination_categories = site.data.catalogV2.source_categories.items | sort: "name" %}
 
-<div class="destination-menu-mobile" data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu-mobile__item--active">
+<div class="destination-menu-mobile" data-dropdown-menu data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu-mobile__item--active">
   <div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
     <div class="destination-menu-mobile__select-inner">
-      <span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
+      <span data-ref="dropdown-menu[head-inner]">
         Choose category
       </span>
 

src/_layouts/catalog.html

@@ -32,49 +32,7 @@ <h1 id="{{ page.title | downcase }}" class="destinations__heading page__heading"
           {% include sidebar/{{ page.integration_type }}-menu-mobile.html %}
 
           <div class="destinations__body" data-headings-anchors>
-            <div class="destinations-catalog">
-              {% assign categories = site.data.catalogV2.destination_categories.items %}
-
-              {% for category in categories %}
-                <div class="destinations-catalog__section markdown" id="{{ category.slug | slugify }}">
-                  {% assign category_icon = category.slug | slugify %}
-
-                  <h2 class="destinations-catalog__title" id="{{ category.slug | slugify }}">
-                    {% include icons/destinations-catalog/{{ category_icon }}.svg %}
-
-                    {{ category.display_name }}
-                  </h2>
-
-                  <div class="flex flex--wrap waffle waffle--large">
-                    {% assign destinations = site.data.catalogV2.destinations.items | where: "categories", category.display_name %}
-
-                    {% for destination in destinations %}
-                      {% if destination.status contains "PUBLIC" or destination.status contains "BETA" %}
-                        <div class="flex__column flex__column--6 flex__column--4@medium">
-                          <a class="thumbnail-integration" href="{{ site.baseurl }}/{{ destination.url }}/">
-                            <div class="thumbnail-integration__content flex flex--stack flex--center flex--middle">
-                              <div class="thumbnail-integration__logo">
-                                {% if destination.mark.url != '' %}
-                                  <img class="image" alt="{{ destination.display_name }}" src="{{ destination.mark.url }}">
-                                {% else %}
-                                  <img class="image" alt="{{ destination.display_name }}" src="{{ destination.logo.url }}">
-                                {% endif %}
-                              </div>
-
-                              <h5>{{ destination.display_name }}</h5>
-                            </div>
-
-                            {% if destination.status == 'PUBLIC_BETA' %}
-                              <p class="thumbnail-integration__label">Beta</p>
-                            {% endif %}
-                          </a>
-                        </div>
-                      {% endif %}
-                    {% endfor %}
-                  </div>
-                </div>
-              {% endfor %}
-            </div>
+            {{ content }}
           </div>
         </article>
       </div>

src/_sass/components/_destination-menu-mobile.scss

@@ -7,6 +7,7 @@
   position: -webkit-sticky;
   top: 0;
   z-index: 1;
+  max-height: 80px;
 
   @include breakpoint(large up) {
     display: none;

src/_sass/components/_destinations-catalog.scss

@@ -13,7 +13,7 @@
     svg {
       width: 24px;
       height: 24px;
-      color: color(secondary);  
+      color: color(secondary);
     }
   }
 }