Merge branch 'main' into 754-add-favicon

Author: Anton-88

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

@@ -249,7 +249,7 @@ function initFilterModal() {
   window.caseStudiesFilterModal = new FilterModal({
     modalSelector: '#filter-modal',
     openBtnSelector: '.filters-cta',
-    closeBtnSelector: '.filter-modal__close',
+    closeBtnSelector: '.filter-modal__button',
     backdropSelector: '.filter-modal__backdrop',
     clearAllSelector: '.clear-all',
     selectedTagsSelector: '.selected-tags',

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

@@ -293,20 +293,20 @@
       background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
+
     &:hover,
     &:focus-visible {
       background-color: rgba($gray-100, 0.6);
       color: $gray-500;
       transform: translateX(4px);
-  
+
       &::before {
         background-color: rgba($gray-200, 0.8);
         transform: scale(1.1);
         box-shadow: 0 2px 4px rgba($gray-300, 0.2);
       }
     }
-  
+
     &::before {
       content: '';
       display: inline-block;
@@ -323,18 +323,18 @@
       border-radius: 2px;
       flex-shrink: 0;
     }
-  
+
     .tag-label {
       @include truncate-lines(2);
     }
-  
+
     .tag-count {
       flex-shrink: 0;
       white-space: nowrap;
       margin-left: 4px;
       color: $gray-300;
     }
-  }  
+  }
 }
 
 .no-tags-message {
@@ -1278,15 +1278,27 @@
     background: #fff;
     transform: translate(-50%, -50%);
     z-index: 2;
-    padding: 24px 16px;
+    padding: 0 16px 24px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 8px 32px rgba($black, 0.18);
   }
 
-  &__close {
-    background-color: transparent;
+  &__button-wrapper {
+    z-index: 3;
+    position: sticky;
+    background: white;
+    top: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 24px 0 14px;
+  }
+
+  &__button {
+    background: transparent;
     border: 0;
+    padding: 4px 6px;
     cursor: pointer;
     font-style: $font-style-normal;
     text-transform: lowercase;
@@ -1295,7 +1307,7 @@
   }
 
   &__body {
-    margin-top: 43px;
+    margin-top: 26px;
   }
 
   .filter-header {

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

@@ -10,6 +10,7 @@
   }
 
   &__content {
+    position: relative;
     width: min(1280px, 100%);
     margin: 0 auto;
     padding: 0 40px;
@@ -101,6 +102,8 @@
   overflow: hidden;
   overflow-y: auto;
   width: 100%;
+  top: $mobile-header-height;
+  right: 0;
 
   @include breakpoint-medium {
     top: 40px;
@@ -109,10 +112,6 @@
     padding-right: 10px;
   }
 
-  @include breakpoint-extra-extra-large {
-    right: 120px;
-  }
-
   &.open {
     transform: translateY(0);
     @include breakpoint-medium {

website/modules/case-studies-page/views/index.html

@@ -273,14 +273,16 @@ <h4 class="portfolio-title">{{ article.portfolioTitle }}</h4>
     <div id="filter-modal" class="filter-modal">
       <div class="filter-modal__backdrop"></div>
       <div class="filter-modal__content">
-        <button
-          type="button"
-          class="filter-modal__close"
-          aria-label="Close filter modal"
-        >
-          <i class="back-icon"></i>
-          back to all projects
-        </button>
+        <div class="filter-modal__button-wrapper">
+          <button
+            type="button"
+            class="filter-modal__button"
+            aria-label="Close filter modal"
+          >
+            <i class="back-icon"></i>
+            back to all projects
+          </button>
+        </div>
         <div class="filter-modal__body"></div>
       </div>
     </div>

website/modules/testimonials-carousel-widget/views/widget.html

@@ -42,10 +42,22 @@ <h5 class="sf-person__position sf-person__organization">
                     {{ card.organization }}
                   </h5>
                 </div>
-                {% endif %} {% if card.url %}
-                <a href="{{ card.url }}" target="_blank" class="sf-person__url"
-                  >{{ card.url }}</a
+                {% endif %} {% if card.url %} {# Remove protocol #} {% set
+                urlWithoutProtocol = card.url %} {% if card.url.split('://') |
+                length > 1 %} {% set urlWithoutProtocol =
+                card.url.split('://')[1] %} {% endif %} {# Remove
+                path/query/fragment #} {% set domainWithOrWithoutWww =
+                urlWithoutProtocol.split('/')[0] %} {# Remove www. if present #}
+                {% set cleanDomain = domainWithOrWithoutWww | trim |
+                replace('www.', '') %}
+                <a
+                  href="{{ card.url }}"
+                  target="_blank"
+                  class="sf-person__url"
+                  rel="noopener noreferrer"
                 >
+                  {{ cleanDomain }}
+                </a>
                 {% endif %}
               </div>
             </div>

website/views/fragments/fragments.html

@@ -13,14 +13,19 @@
       <span></span>
       <span></span>
     </button>
+    <nav
+      id="main-navigation"
+      class="sf-nav"
+      data-menu
+      aria-label="Main navigation"
+    >
+      <ol class="sf-nav__list">
+        {% for item in data.global.primaryNav %}
+        <li>{% render utilities.navLink(item.menuItem) %}</li>
+        {% endfor %}
+      </ol>
+    </nav>
   </div>
-  <nav class="sf-nav" data-menu>
-    <ol class="sf-nav__list">
-      {% for item in data.global.primaryNav %}
-      <li>{% render utilities.navLink(item.menuItem) %}</li>
-      {% endfor %}
-    </ol>
-  </nav>
 </header>
 {% endfragment %} {% fragment footer() %}
 <footer class="sf-container">