Some fixes for new site (#929)

* menu fix

* hybrid cloud partners overlay fix

* pricing adjustment

* email form error message fix

* marketplaces overlay fix

* body's scroll over the mobile menu fix

* pricing fix

* benchmarks plot labels fix

qdrant-landing/themes/qdrant-2024/assets/css/base.scss

@@ -43,6 +43,12 @@ html {
   }
 }
 
+body {
+  &.no-scroll {
+    overflow: hidden;
+  }
+}
+
 @import 'components';
 @import 'syntax-highlight';
 @import 'mathjax';

qdrant-landing/themes/qdrant-2024/assets/css/benchmarks.scss

@@ -12,6 +12,48 @@
   &__plot-wrapper {
     margin-bottom: $spacer * 2;
   }
+  &__plot-labels {
+    display: flex;
+    border-left: 1px solid $neutral-80;
+    border-right: 1px solid $neutral-80;
+    @include media-breakpoint-up(lg) {
+      border-left: 0;
+      border-right: 0;
+    }
+    &_stretch {
+      justify-content: space-between;
+
+      & .benchmark__plot-label {
+        flex-grow: 1;
+      }
+    }
+  }
+  &__plot-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-right: $spacer;
+    &:first-of-type {
+      padding-left: $spacer;
+    }
+    &:not(:last-of-type) {
+      margin-right: $spacer;
+      border-right: 1px solid $neutral-80;
+    }
+
+    @include media-breakpoint-up(lg) {
+      flex-direction: row;
+      &:first-of-type {
+        padding-left: 0;
+      }
+      &:not(:last-of-type) {
+        margin-right: $spacer;
+      }
+      input {
+        margin-right: $spacer * 0.5;
+      }
+    }
+  }
   .table-striped {
     th,
     td {

qdrant-landing/themes/qdrant-2024/assets/css/mixins/_marketplaces.scss

@@ -30,7 +30,6 @@
     flex-direction: column;
     gap: rem(32);
     position: relative;
-    z-index: 2;
   }
 
   &__card {
@@ -92,7 +91,6 @@
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
-      z-index: 1;
     }
   }
 }

qdrant-landing/themes/qdrant-2024/assets/css/partials/_hero.scss

@@ -88,7 +88,6 @@
 
     background-color: $neutral-10;
     transition: bottom 1s ease-in-out;
-    z-index: 2;
   }
 
   &__stars svg {
@@ -157,6 +156,7 @@
       right: $spacer * 1.5;
       bottom: $spacer * 1.5;
       transition: background-color 0.2s;
+      z-index: 2;
 
       &:hover {
         background-color: $neutral-100;

qdrant-landing/themes/qdrant-2024/assets/css/partials/_hybrid-cloud-partners.scss

@@ -21,14 +21,12 @@
     flex-direction: column;
     gap: $spacer * 1.5;
     padding: rem(92) 0;
-    z-index: 2;
   }
 
   &__cards {
     @include marquee.base(96px, 264px, 20, 20, 12px, $neutral-94, false, 50s, none);
 
     &__container {
-      z-index: 2;
     }
 
     &__item {
@@ -62,7 +60,6 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    z-index: 1;
   }
 
   @include media-breakpoint-up(xl) {

qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-doors-b.scss

@@ -23,7 +23,6 @@
 
     &__door {
       width: calc((100% / 3) - 20px);
-      height: rem(896);
 
       .pricing-door__description {
         height: rem(42);

qdrant-landing/themes/qdrant-2024/assets/css/partials/_subscribe-form.scss

@@ -4,10 +4,10 @@
   display: flex;
   justify-content: flex-end;
   gap: calc($spacer / 2);
+  position: relative;
 
   .hs_email {
     width: 100%;
-    position: relative;
     @include media-breakpoint-up(lg) {
       max-width: rem(414);
     }
@@ -43,4 +43,14 @@
       }
     }
   }
+  .hs_error_rollup {
+    position: absolute;
+    width: 100%;
+    top: rem(-30);
+    right: 0;
+    text-align: right;
+    .hs-error-msgs {
+      position: static;
+    }
+  }
 }

qdrant-landing/themes/qdrant-2024/assets/js/index.js

@@ -40,4 +40,39 @@ document.addEventListener('DOMContentLoaded', function () {
       removeScrollStateFromPage();
     }
   });
+
+  // Mobile menu
+
+  const closeBtn = document.querySelector('.menu-mobile__close');
+  const menuTrigger = document.querySelector('.main-menu__trigger');
+  const menu = document.querySelector('.menu-mobile');
+  menuTrigger.addEventListener('click', () => {
+    menu.classList.add('menu-mobile--visible');
+    body.classList.add('no-scroll');
+  });
+  closeBtn.addEventListener('click', () => {
+    menu.classList.remove('menu-mobile--visible');
+    body.classList.remove('no-scroll');
+  });
+  function toggleMenu(id) {
+    const menuItem = document.querySelector(`[data-path=${id}]`);
+    if (menuItem) {
+      menuItem.classList.toggle('menu-mobile__item--active');
+    }
+  }
+
+  document.querySelectorAll('.menu-mobile__item').forEach((item) => {
+    item.addEventListener('click', () => {
+      console.log(item.dataset.path);
+      toggleMenu(item.dataset.path);
+    });
+  });
+
+  // close mobile menu on resize
+  window.addEventListener('resize', () => {
+    if (window.innerWidth >= XXL_BREAKPOINT) {
+      menu.classList.remove('menu-mobile--visible');
+    }
+  });
+
 });

qdrant-landing/themes/qdrant-2024/layouts/partials/benchmark_chart.html

@@ -19,12 +19,12 @@
         onchange="renderSelected('{{ .Params.id }}')"
       ></select>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-lg-6">
       <label class="mb-2">Plot values:</label>
 
       <!-- Radio button group to select values to render -->
-      <div class="d-flex justify-content-between">
-        <label>
+      <div class="benchmark__plot-labels benchmark__plot-labels_stretch">
+        <label class="benchmark__plot-label">
           <input
             type="radio"
             name="plot-value-{{ .Params.id }}"
@@ -33,9 +33,8 @@
           />
           RPS
         </label>
-        |
 
-        <label>
+        <label class="benchmark__plot-label">
           <input
             type="radio"
             name="plot-value-{{ .Params.id }}"
@@ -44,9 +43,8 @@
           />
           Latency
         </label>
-        |
 
-        <label>
+        <label class="benchmark__plot-label">
           <input
             type="radio"
             name="plot-value-{{ .Params.id }}"
@@ -55,9 +53,8 @@
           />
           p95 latency
         </label>
-        |
 
-        <label>
+        <label class="benchmark__plot-label">
           <input
             type="radio"
             name="plot-value-{{ .Params.id }}"

qdrant-landing/themes/qdrant-2024/layouts/partials/benchmark_filter_chart.html

@@ -13,9 +13,9 @@
     <div class="col-8">
       <label class="mb-2">Plot values:</label>
 
-      <div class="d-flex gap-3">
+      <div class="benchmark__plot-labels">
         <!-- Radio button group to select values to render -->
-        <label>
+        <label class="benchmark__plot-label">
           <input
             checked
             type="radio"
@@ -25,9 +25,8 @@
           />
           Regular search
         </label>
-        |
 
-        <label>
+        <label class="benchmark__plot-label">
           <input
             type="radio"
             name="plot-value-{{ .Params.id }}"
@@ -36,7 +35,6 @@
           />
           Filter search
         </label>
-        |
       </div>
     </div>
 

qdrant-landing/themes/qdrant-2024/layouts/partials/hybrid-cloud-partners.html

@@ -4,11 +4,14 @@
 
 
   <section class="hybrid-cloud-partners">
+
     <div class="container">
       <h5 class="hybrid-cloud-partners__title">{{ .Params.title }}</h5>
     </div>
 
     <div class="hybrid-cloud-partners__content">
+      <div class="hybrid-cloud-partners__square-grid-overlay"></div>
+
       <div class="hybrid-cloud-partners__cards__container">
         <div class="hybrid-cloud-partners__cards__block">
           <div class="hybrid-cloud-partners__cards__inner hybrid-cloud-partners__cards__inner_to-left">
@@ -35,7 +38,6 @@
         </div>
       </div>
 
-      <div class="hybrid-cloud-partners__square-grid-overlay"></div>
     </div>
   </section>
 {{ end }}

qdrant-landing/themes/qdrant-2024/layouts/partials/marketplaces.html

@@ -1,5 +1,6 @@
 {{ $class := .class }}
 <section class="{{ $class }}">
+  <div class="{{ $class }}__square-grid-overlay"></div>
   <div class="container">
     <h2 class="{{ $class }}__title">{{ .context.Params.title }}</h2>
     <div class="{{ $class }}__cards">
@@ -12,5 +13,4 @@
       {{ end }}
     </div>
   </div>
-  <div class="{{ $class }}__square-grid-overlay"></div>
 </section>

qdrant-landing/themes/qdrant-2024/layouts/partials/menu-mobile.html

@@ -6,7 +6,7 @@
     </div>
     <ul class="menu-mobile__items">
       {{ range .Params.menuItems }}
-        <li class="menu-mobile__item" data-path="{{ .id }}" onclick="toggleMenu('{{ .id }}')">
+        <li class="menu-mobile__item" data-path="{{ .id }}">
           <div class="menu-mobile__item-content">
             {{ if .url }}
               <a href="{{ .url }}">{{ .name }}</a>
@@ -34,27 +34,9 @@
     </ul>
     <div class="menu-mobile__controls">
       <a href="{{ .Params.logIn.url }}" class="button button_outlined button_lg menu-mobile__login"
-        >{{ .Params.logIn.text }}</a
-      >
+        >{{ .Params.logIn.text }}</a>
       <a href="{{ .Params.startFree.url }}" class="button button_contained button_lg">{{ .Params.startFree.text }}</a>
     </div>
   </div>
 
-  <script>
-    const closeBtn = document.querySelector('.menu-mobile__close');
-    const menuTrigger = document.querySelector('.main-menu__trigger');
-    const menu = document.querySelector('.menu-mobile');
-    menuTrigger.addEventListener('click', () => {
-      menu.classList.add('menu-mobile--visible');
-    });
-    closeBtn.addEventListener('click', () => {
-      menu.classList.remove('menu-mobile--visible');
-    });
-    function toggleMenu(id) {
-      const menuItem = document.querySelector(`[data-path=${id}]`);
-      if (menuItem) {
-        menuItem.classList.toggle('menu-mobile__item--active');
-      }
-    }
-  </script>
 {{ end }}