Merge branch 'main' into 790-make-vacancy-title-clickable

Author: Anton-88

.cursor/rules/common

@@ -12,7 +12,19 @@ import { setupTagSearchForInput } from './searchInputHandler';
 import { FilterModal } from './filterModal';
 import { initClientSideFiltering } from './clientSideFiltering';
 
-/* eslint-enable sort-imports */
+function revealLoaded() {
+  document
+    .querySelectorAll(
+      '.breadcrumb.loading, .sf-container.loading, .page-main_content.loading',
+    )
+    .forEach((el) => {
+      el.classList.remove('loading');
+      el.classList.add('loaded');
+      if (el.hasAttribute('aria-busy')) {
+        el.setAttribute('aria-busy', 'false');
+      }
+    });
+}
 
 function initConfiguration() {
   window.DEFAULT_VISIBLE_TAGS_COUNT = 5;
@@ -57,13 +69,11 @@ function initFontChanger() {
 
   setInterval(() => {
     currentFontIndex = (currentFontIndex + 1) % fonts.length;
-    // Use Array.prototype.at() for safer array access
     const currentFont = fonts.at(currentFontIndex);
     heroContent.style.fontFamily = currentFont;
   }, 500);
 }
 
-// Tag search filter for case studies page
 function initCaseStudiesTagFilter({
   inputSelector = '.tag-search',
   containerSelector = '.filter-section',
@@ -92,30 +102,24 @@ function initializeAllComponents() {
   initClientSideFiltering();
 }
 
-// Barba pages
 function initBarbaPageTransitions() {
   if (!document.querySelector('[data-barba="container"]')) return;
 
   apos.util.onReady(() => {
-    // Initialize case studies filter handler
     initCaseStudiesFilterHandler();
 
-    // Original Barba enter callback
     const originalEnterCallback = function (data, hasFilterAnchor) {
-      // Scroll to the top after page transition (unless we have a filter anchor)
       if (!hasFilterAnchor) {
         window.scrollTo(0, 0);
       }
 
-      // Close menu if it's open
       const menuButton = document.getElementById('nav-icon');
       const menu = document.querySelector('[data-menu]');
       if (menuButton && menu) {
         menu.classList.remove('open');
         menuButton.classList.remove('open');
       }
 
-      // Trigger video play after transition
       const video = data.next.container.querySelector('video');
       if (video) {
         video.play();
@@ -160,7 +164,6 @@ function initBarbaPageTransitions() {
       cacheIgnore: false,
       preventRunning: true,
       timeout: 10000,
-
       transitions: [
         {
           sync: false,
@@ -175,28 +178,27 @@ function initBarbaPageTransitions() {
       ],
     });
 
-    // Add after hook for updating menu state
     barba.hooks.after(() => {
       // Update menu active state
       const currentPath = window.location.pathname;
       const menuLinks = document.querySelectorAll('.sf-nav__list a');
-
-      // First, remove active class from all menu items
       menuLinks.forEach((link) => link.classList.remove('active'));
-
-      // Then, add active class to the current menu item
       menuLinks.forEach((link) => {
         const href = link.getAttribute('href');
         const hrefPath = new URL(href, window.location.origin).pathname;
         if (hrefPath === currentPath) {
           link.classList.add('active');
         }
       });
+
+      revealLoaded();
+      if (!window.caseStudiesFilterModal) {
+        initFilterModal();
+      }
     });
   });
 }
 
-// Anchor Navigation
 function initAnchorNavigation() {
   const anchors = document.querySelectorAll('a[href^="#"]');
   if (!anchors.length) return;
@@ -216,7 +218,6 @@ function initAnchorNavigation() {
 
 function initMenuToggle() {
   apos.util.onReady(() => {
-    // Menu Open
     const menuButton = document.getElementById('nav-icon');
     const menu = document.querySelector('[data-menu]');
 
@@ -227,7 +228,6 @@ function initMenuToggle() {
       menuButton.classList.toggle('open');
     });
 
-    // Close menu when clicking on menu items for non-logged users
     const menuLinks = menu.querySelectorAll('a');
     menuLinks.forEach((link) => {
       link.addEventListener('click', () => {
@@ -240,7 +240,6 @@ function initMenuToggle() {
   });
 }
 
-// Filter Case Studies modal for Case Studies mobile page
 function initFilterModal() {
   if (!document.querySelector('.cs_list')) {
     return;
@@ -257,19 +256,23 @@ function initFilterModal() {
   });
 }
 
-document.addEventListener('DOMContentLoaded', initFilterModal);
-
-if (typeof barba !== 'undefined') {
-  barba.hooks.after(() => {
-    initFilterModal();
-  });
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initFilterModal);
+} else {
+  initFilterModal();
 }
 
 export default () => {
   initConfiguration();
 
   initializeAllComponents();
 
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', revealLoaded);
+  } else {
+    revealLoaded();
+  }
+
   apos.util.onReady(() => {
     initCaseStudiesFilterHandler();
   });
@@ -278,17 +281,15 @@ export default () => {
   initAnchorNavigation();
   initMenuToggle();
 
-  // Case studies anchor fix
   setTimeout(() => {
     const { pathname, search, hash } = window.location;
-    const isCasesPage = pathname.includes('/cases');
-    const hasFilterParams =
-      search.includes('industry') ||
-      search.includes('stack') ||
-      search.includes('caseStudyType') ||
-      hash.includes('filter');
-
-    if (isCasesPage && hasFilterParams) {
+    if (
+      pathname.includes('/cases') &&
+      (search.includes('industry') ||
+        search.includes('stack') ||
+        search.includes('caseStudyType') ||
+        hash.includes('filter'))
+    ) {
       const filterAnchor = document.getElementById('filter');
       if (filterAnchor) filterAnchor.scrollIntoView({ behavior: 'smooth' });
     }

website/modules/asset/ui/src/index.js

@@ -55,3 +55,40 @@
     filter: blur(0);
   }
 }
+
+// Loading/Loaded states for reveal animations
+.loading {
+  opacity: 0;
+  overflow: hidden;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition:
+    opacity 0.6s ease-out,
+    transform 0.6s ease-out;
+}
+
+.loaded {
+  opacity: 1;
+  overflow: visible;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+// Specific loading states for breadcrumbs and containers
+.breadcrumb.loading,
+.sf-container.loading {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  transform: translateY(15px);
+  transition:
+    opacity 0.5s ease-out,
+    visibility 0.5s ease-out,
+    transform 0.5s ease-out;
+}
+
+.breadcrumb.loaded,
+.sf-container.loaded {
+  opacity: 1 !important;
+  visibility: visible !important;
+  transform: translateY(0);
+}

website/modules/asset/ui/src/scss/_animation.scss

@@ -44,17 +44,16 @@
     text-decoration: none;
     @include truncate-lines(2);
   }
-  &__wrapper{
+  &__wrapper {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-bottom: 4px;
     @include breakpoint-medium {
       margin-bottom: 8px;
     }
-    
   }
-  &__container{
+  &__container {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -92,16 +91,13 @@
     @include truncate-lines(1);
   }
   &__content {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 21px;
-      color: $gray-300;
-      margin: 0;
-      @include breakpoint-medium {
-        @include truncate-lines(8);
-      }
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 21px;
+    color: $gray-300;
+    margin: 0;
   }
-  
+
   &__url {
     text-decoration: none;
     font-weight: 700;

website/modules/asset/ui/src/scss/_carousel.scss

@@ -7,7 +7,6 @@
   &_content {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
     margin-bottom: 3rem;
   }
 

website/modules/asset/ui/src/scss/_cases.scss

@@ -71,7 +71,19 @@
       }
       .sf-person__content {
         color: $gray-300;
-        @include truncate-lines(7);
+
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-height: 150px;
+
+        overflow-wrap: anywhere;
+        word-break: break-word;
+
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable both-edges;
+        padding-right: 12px;
+
         @include font-settings(14px, 150%, 400);
       }
     }
@@ -134,7 +146,6 @@
             @include breakpoint-medium {
               height: 400px;
               .sf-person__content {
-                @include truncate-lines(10);
                 @include font-settings(22px, 150%, 400);
               }
             }

website/modules/asset/ui/src/scss/_testimonials.scss

@@ -6,7 +6,13 @@
   data-default-visible-tags="{{ data.defaultVisibleTagsCount }}"
 >
   <div class="cs_content">
-    <div class="page-main_content">{% area data.page, 'main' %}</div>
+    <div
+      class="page-main_content loading"
+      id="page-main_content"
+      aria-busy="true"
+    >
+      {% area data.page, 'main' %}
+    </div>
 
     <div id="filter" class="filter-anchor"></div>
 
@@ -295,6 +301,16 @@ <h4 class="portfolio-title">{{ article.portfolioTitle }}</h4>
 <script>
   window.totalPages = {{ data.totalPages | json }};
 </script>
+
+<noscript>
+  <style>
+    #page-main_content {
+      opacity: 1 !important;
+      overflow: visible !important;
+      visibility: visible !important;
+    }
+  </style>
+</noscript>
 <script src="/js/modules/case-studies-page/infinite-scroll.js"></script>
 
 {% endblock main %}