Sarah/mobile carousel (#12494)

* create static flag for stacked carousel * update carousel speed on homepage, create mobile version
pulumi · Aug 9, 2024 · f304e4e · f304e4e
1 parent a338dba
commit f304e4e
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 11 deletions.
diff --git a/assets/css/bundle.css b/assets/css/bundle.css
@@ -20550,6 +20550,15 @@ body.section-workshop-signup .header-btn-primary::after:focus{
   height:240px
 }
 
+.stacked-carousel-container .carousel-static{
+  width:100%;
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  display:flex;
+  justify-content:space-around
+}
+
 .stacked-carousel-container .carousel-left-initial,.stacked-carousel-container .carousel-left-primary,.stacked-carousel-container .carousel-left-secondary{
   left:100%;
   width:100%;
@@ -20655,12 +20664,12 @@ body.section-workshop-signup .header-btn-primary::after:focus{
 
 .stacked-carousel-container-single .carousel-left-primary{
   left:0;
-  animation:single-scroll-horizontal-middle 30s linear infinite
+  animation:single-scroll-horizontal-middle 60s linear infinite
 }
 
 .stacked-carousel-container-single .carousel-left-secondary{
   left:300%;
-  animation:single-scroll-horizontal 30s linear infinite
+  animation:single-scroll-horizontal 60s linear infinite
 }
 
 @keyframes single-scroll-horizontal{
@@ -20683,6 +20692,49 @@ body.section-workshop-signup .header-btn-primary::after:focus{
   }
 }
 
+.stacked-carousel-container-single-mobile{
+  height:80px
+}
+
+.stacked-carousel-container-single-mobile .carousel-left-primary-mobile,.stacked-carousel-container-single-mobile .carousel-left-secondary-mobile{
+  width:300%;
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  display:flex;
+  justify-content:space-around
+}
+
+.stacked-carousel-container-single-mobile .carousel-left-primary-mobile{
+  left:0;
+  animation:single-scroll-horizontal-middle 30s linear infinite
+}
+
+.stacked-carousel-container-single-mobile .carousel-left-secondary-mobile{
+  left:300%;
+  animation:single-scroll-horizontal 30s linear infinite
+}
+
+@keyframes single-scroll-horizontal-mobile{
+  0%{
+    left:300%
+  }
+
+  100%{
+    left:0%
+  }
+}
+
+@keyframes single-scroll-horizontal-middle-mobile{
+  0%{
+    left:0
+  }
+
+  100%{
+    left:-300%
+  }
+}
+
 a.pulumi-ai-badge{
   display:inline-block
 }

diff --git a/layouts/case-studies/list.html b/layouts/case-studies/list.html
@@ -4,7 +4,7 @@
 
 {{ define "main" }}
     <div class="my-12">
-        {{ partial "stacked-carousel.html" (dict "logos" .Params.customer_logos.logos ) }}
+        {{ partial "stacked-carousel.html" (dict "logos" .Params.customer_logos.logos "static" true ) }}
     </div>
 
     <div class="container mx-auto text-center pb-8">

diff --git a/layouts/partials/stacked-carousel.html b/layouts/partials/stacked-carousel.html
@@ -13,6 +13,14 @@
 optional flags:
     single_row: makes the carousel just one row, with gray hover behavior and (optional) links
 -->
+<!-- divide the list into thirds to make the 3 rows -->
+{{ $length := .logos | len }}
+{{ $row_size := div $length 3 }}
+{{ $first_row := first $row_size .logos }}
+{{ $second_row := first $row_size (after $row_size .logos) }}
+{{ $third_row := after (mul 2 $row_size) .logos }}
+
+
 {{ if .single_row }}
     <div class="hidden md:block stacked-carousel-container stacked-carousel-container-single relative mx-auto">
         <div class="carousel-left-primary">
@@ -38,13 +46,49 @@
             {{ end }}
         </div>
     </div>
+    <div class="md:hidden stacked-carousel-container stacked-carousel-container-single-mobile relative mx-auto">
+        <div class="carousel-left-primary-mobile">
+            {{ range .logos }}
+                {{ if .link }}
+                    <a href="{{ .link }}">
+                        <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                    </a>
+                {{ else }}
+                    <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                {{ end }}
+            {{ end }}
+        </div>
+        <div class="carousel-left-primary-mobile carousel-left-secondary-mobile">
+            {{ range .logos }}
+                {{ if .link }}
+                    <a href="{{ .link }}">
+                        <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                    </a>
+                {{ else }}
+                    <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                {{ end }}
+            {{ end }}
+        </div>
+    </div>
+{{ else if .static }}
+    <div class="hidden md:block stacked-carousel-container relative mx-auto">
+        <div class="carousel-static">
+            {{ range $first_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-static top-20">
+            {{ range $second_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-static top-40">
+            {{ range $third_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+    </div>
 {{ else }}
-    <!-- divide the list into thirds to make the 3 rows -->
-    {{ $length := .logos | len }}
-    {{ $row_size := div $length 3 }}
-    {{ $first_row := first $row_size .logos }}
-    {{ $second_row := first $row_size (after $row_size .logos) }}
-    {{ $third_row := after (mul 2 $row_size) .logos }}
     <div class="hidden md:block stacked-carousel-container relative mx-auto">
         <div class="carousel-left-initial">
             {{ range $first_row }}

diff --git a/theme/src/scss/marketing/_stacked-carousel.scss b/theme/src/scss/marketing/_stacked-carousel.scss
@@ -1,6 +1,15 @@
 .stacked-carousel-container {
     height: 240px;
 
+    .carousel-static {
+        width: 100%;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        display: flex;
+        justify-content: space-around;
+    }
+
     .carousel-left-initial, .carousel-left-primary, .carousel-left-secondary {
         left: 100%;
         width: 100%;
@@ -106,12 +115,12 @@
 
     .carousel-left-primary {
         left: 0;
-        animation: single-scroll-horizontal-middle 30s linear infinite;
+        animation: single-scroll-horizontal-middle 60s linear infinite;
     }
 
     .carousel-left-secondary {
         left: 300%;
-        animation: single-scroll-horizontal 30s linear infinite;
+        animation: single-scroll-horizontal 60s linear infinite;
     }
 
     @keyframes single-scroll-horizontal {
@@ -129,6 +138,49 @@
             left: 0;
         }
 
+        100% {
+            left: -300%;
+        }
+    }
+}
+
+.stacked-carousel-container-single-mobile {
+    height: 80px;
+
+    .carousel-left-primary-mobile, .carousel-left-secondary-mobile {
+        width: 300%;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        display: flex;
+        justify-content: space-around;
+    }
+
+    .carousel-left-primary-mobile {
+        left: 0;
+        animation: single-scroll-horizontal-middle 30s linear infinite;
+    }
+
+    .carousel-left-secondary-mobile {
+        left: 300%;
+        animation: single-scroll-horizontal 30s linear infinite;
+    }
+
+    @keyframes single-scroll-horizontal-mobile {
+        0% {
+            left: 300%;
+        }
+
+        100% {
+            left: 0%
+        }
+    }
+
+    @keyframes single-scroll-horizontal-middle-mobile {
+        0% {
+            left: 0;
+        }
+
         100% {
             left: -300%;
         }