From c3fa085ec161bfe765e8ef4afab3f9ec27e5e5f1 Mon Sep 17 00:00:00 2001 From: Yuriy Date: Fri, 30 May 2025 09:19:14 +0300 Subject: [PATCH 1/4] updated bottom space between sections --- website/modules/asset/ui/src/scss/_base.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/modules/asset/ui/src/scss/_base.scss b/website/modules/asset/ui/src/scss/_base.scss index c8d7b412..37b6cd9c 100644 --- a/website/modules/asset/ui/src/scss/_base.scss +++ b/website/modules/asset/ui/src/scss/_base.scss @@ -32,9 +32,9 @@ position: relative; } .sf-section { - margin-bottom: 80px; + margin-bottom: 64px; @include breakpoint-medium { - margin-bottom: 120px; + margin-bottom: 72px; } } From 14e4770721c9291c221fcee45f6cdc73308cf65e Mon Sep 17 00:00:00 2001 From: Yuriy Date: Fri, 30 May 2025 12:27:30 +0300 Subject: [PATCH 2/4] Update responsive styles for case studies page --- website/modules/asset/ui/src/index.js | 61 +++++++++++++++++++ website/modules/asset/ui/src/scss/_cases.scss | 38 ++++++++++++ 2 files changed, 99 insertions(+) diff --git a/website/modules/asset/ui/src/index.js b/website/modules/asset/ui/src/index.js index f599b879..91d35169 100644 --- a/website/modules/asset/ui/src/index.js +++ b/website/modules/asset/ui/src/index.js @@ -58,6 +58,66 @@ function initCaseStudiesTagFilter({ ); } +// Case Studies sticky functionality +function initCaseStudiesSticky() { + const csList = document.querySelector('.cs_list'); + const filterInfo = document.querySelector('.cs_filter-info'); + const csGrid = document.querySelector('.cs_grid'); + const footer = document.querySelector('footer'); + + if (!csList || !csGrid) return; + + // Create placeholder element + const placeholder = document.createElement('div'); + placeholder.style.display = 'none'; + csList.parentNode.insertBefore(placeholder, csList.nextSibling); + + // Get initial position of cs_list + const csListRect = csList.getBoundingClientRect(); + const initialTop = csListRect.top + window.scrollY; + + // Function to update the fixed position based on scroll + const updatePosition = () => { + const { scrollY } = window; + // Default header height + const headerHeight = 100; + const filterInfoHeight = filterInfo ? filterInfo.offsetHeight : 0; + const offset = Math.max(headerHeight, filterInfoHeight); + + if (scrollY >= initialTop - offset) { + csList.classList.add('is-fixed'); + csList.style.top = `${offset}px`; + + // Show placeholder with the same height as cs_list + placeholder.style.display = 'block'; + placeholder.style.height = `${csList.offsetHeight}px`; + + // Calculate available height for grid + const viewportHeight = window.innerHeight; + const footerHeight = footer ? footer.offsetHeight : 0; + const footerTop = footer + ? footer.getBoundingClientRect().top + : viewportHeight; + const availableHeight = footerTop - offset - 32; // 32px for margin + + // Update grid max height + csGrid.style.maxHeight = `${availableHeight}px`; + } else { + csList.classList.remove('is-fixed'); + csList.style.top = 'auto'; + placeholder.style.display = 'none'; + csGrid.style.maxHeight = 'none'; + } + }; + + // Initial calculation + updatePosition(); + + // Update on scroll and resize + window.addEventListener('scroll', updatePosition); + window.addEventListener('resize', updatePosition); +} + // Wrapper function function initializeAllComponents() { initImageLozad(); @@ -65,6 +125,7 @@ function initializeAllComponents() { initSmoothCounters(); initFontChanger(); initCaseStudiesTagFilter(); + initCaseStudiesSticky(); } // Barba pages diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss index 0fcdd464..5fb6b07f 100644 --- a/website/modules/asset/ui/src/scss/_cases.scss +++ b/website/modules/asset/ui/src/scss/_cases.scss @@ -71,6 +71,18 @@ border-top: 1px solid $gray-border; padding-top: 24px; align-items: center; + position: relative; + z-index: 10; + transition: all 0.3s ease; + max-width: 1200px; + width: 100%; + margin: 0 auto; + + &.is-fixed { + position: fixed; + left: 0; + right: 0; + } @include breakpoint-medium { flex-direction: row; @@ -78,6 +90,28 @@ align-items: flex-start; } } + + &_grid { + margin-top: 32px; + flex: 1; + overflow-y: auto; + transition: max-height 0.3s ease; + padding-right: 20px; + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-track { + background: $gray-100; + border-radius: 3px; + } + + &::-webkit-scrollbar-thumb { + background: $gray-300; + border-radius: 3px; + } + } } // Tags styling @@ -87,6 +121,10 @@ font-style: $font-style-normal; max-width: 262px; width: 100%; + position: sticky; + top: 0; + max-height: calc(100vh - 300px); + overflow-y: auto; .filter-section { &:first-of-type { From 9edae0cea572962481cebca02764982fe9a9b181 Mon Sep 17 00:00:00 2001 From: Yuriy Date: Fri, 30 May 2025 12:28:10 +0300 Subject: [PATCH 3/4] Revert "updated bottom space between sections" This reverts commit c3fa085ec161bfe765e8ef4afab3f9ec27e5e5f1. --- website/modules/asset/ui/src/scss/_base.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/modules/asset/ui/src/scss/_base.scss b/website/modules/asset/ui/src/scss/_base.scss index ac48c8b3..f33b4ff1 100644 --- a/website/modules/asset/ui/src/scss/_base.scss +++ b/website/modules/asset/ui/src/scss/_base.scss @@ -32,9 +32,9 @@ position: relative; } .sf-section { - margin-bottom: 64px; + margin-bottom: 80px; @include breakpoint-medium { - margin-bottom: 72px; + margin-bottom: 120px; } } From 9ae935c6450223124e61f11e2fa846bf39385c7a Mon Sep 17 00:00:00 2001 From: Yuriy Date: Thu, 5 Jun 2025 15:06:10 +0300 Subject: [PATCH 4/4] Update responsive styles for case studies page --- website/modules/asset/ui/src/index.js | 61 ------------------- website/modules/asset/ui/src/scss/_cases.scss | 49 +++------------ .../case-studies-page/views/index.html | 6 +- 3 files changed, 11 insertions(+), 105 deletions(-) diff --git a/website/modules/asset/ui/src/index.js b/website/modules/asset/ui/src/index.js index e3001e06..bb4059c1 100644 --- a/website/modules/asset/ui/src/index.js +++ b/website/modules/asset/ui/src/index.js @@ -60,66 +60,6 @@ function initCaseStudiesTagFilter({ ); } -// Case Studies sticky functionality -function initCaseStudiesSticky() { - const csList = document.querySelector('.cs_list'); - const filterInfo = document.querySelector('.cs_filter-info'); - const csGrid = document.querySelector('.cs_grid'); - const footer = document.querySelector('footer'); - - if (!csList || !csGrid) return; - - // Create placeholder element - const placeholder = document.createElement('div'); - placeholder.style.display = 'none'; - csList.parentNode.insertBefore(placeholder, csList.nextSibling); - - // Get initial position of cs_list - const csListRect = csList.getBoundingClientRect(); - const initialTop = csListRect.top + window.scrollY; - - // Function to update the fixed position based on scroll - const updatePosition = () => { - const { scrollY } = window; - // Default header height - const headerHeight = 100; - const filterInfoHeight = filterInfo ? filterInfo.offsetHeight : 0; - const offset = Math.max(headerHeight, filterInfoHeight); - - if (scrollY >= initialTop - offset) { - csList.classList.add('is-fixed'); - csList.style.top = `${offset}px`; - - // Show placeholder with the same height as cs_list - placeholder.style.display = 'block'; - placeholder.style.height = `${csList.offsetHeight}px`; - - // Calculate available height for grid - const viewportHeight = window.innerHeight; - const footerHeight = footer ? footer.offsetHeight : 0; - const footerTop = footer - ? footer.getBoundingClientRect().top - : viewportHeight; - const availableHeight = footerTop - offset - 32; // 32px for margin - - // Update grid max height - csGrid.style.maxHeight = `${availableHeight}px`; - } else { - csList.classList.remove('is-fixed'); - csList.style.top = 'auto'; - placeholder.style.display = 'none'; - csGrid.style.maxHeight = 'none'; - } - }; - - // Initial calculation - updatePosition(); - - // Update on scroll and resize - window.addEventListener('scroll', updatePosition); - window.addEventListener('resize', updatePosition); -} - // Wrapper function function initializeAllComponents() { initImageLozad(); @@ -127,7 +67,6 @@ function initializeAllComponents() { initSmoothCounters(); initFontChanger(); initCaseStudiesTagFilter(); - initCaseStudiesSticky(); } // Barba pages diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss index 0ae2d384..ad177e73 100644 --- a/website/modules/asset/ui/src/scss/_cases.scss +++ b/website/modules/asset/ui/src/scss/_cases.scss @@ -68,50 +68,13 @@ display: flex; flex-direction: column; gap: 32px; - border-top: 1px solid $gray-border; - padding-top: 24px; align-items: center; - position: relative; - z-index: 10; - transition: all 0.3s ease; - max-width: 1200px; - width: 100%; - margin: 0 auto; - - &.is-fixed { - position: fixed; - left: 0; - right: 0; - } @include breakpoint-medium { flex-direction: row; - padding-top: 32px; align-items: flex-start; } } - - &_grid { - margin-top: 32px; - flex: 1; - overflow-y: auto; - transition: max-height 0.3s ease; - padding-right: 20px; - - &::-webkit-scrollbar { - width: 6px; - } - - &::-webkit-scrollbar-track { - background: $gray-100; - border-radius: 3px; - } - - &::-webkit-scrollbar-thumb { - background: $gray-300; - border-radius: 3px; - } - } } // Tags styling @@ -121,10 +84,6 @@ font-style: $font-style-normal; max-width: 262px; width: 100%; - position: sticky; - top: 0; - max-height: calc(100vh - 300px); - overflow-y: auto; .filter-section { &:first-of-type { @@ -310,11 +269,19 @@ flex-wrap: wrap; gap: 16px; justify-content: space-between; + min-height: 28px; + background: $white; + border-bottom: 1px solid $gray-border; + padding-bottom: 32px; + position: sticky; + z-index: 1; + top: $mobile-header-height; @include breakpoint-medium { flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; + top: $desktop-header-height; } } diff --git a/website/modules/case-studies-page/views/index.html b/website/modules/case-studies-page/views/index.html index 673bbc00..f396c948 100644 --- a/website/modules/case-studies-page/views/index.html +++ b/website/modules/case-studies-page/views/index.html @@ -8,9 +8,9 @@
- {% set hasActiveFilters = data.query.industry or data.query.stack or - data.query.caseStudyType %} {% if hasActiveFilters %}
+ {% set hasActiveFilters = data.query.industry or data.query.stack or + data.query.caseStudyType %} {% if hasActiveFilters %}

{{ data.totalPieces }} Ite{% if data.totalPieces == 1 %}m{% else %}ms{% endif %} found @@ -71,8 +71,8 @@ {% endif %} {% endfor %} {% endif %} {% endfor %}

+ {% endif %} - {% endif %}