feat(site): better mobile spacing

kestra-io · Oct 5, 2023 · bed4c68 · bed4c68
1 parent 79702db
commit bed4c68
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/components/home/Header.vue b/components/home/Header.vue
@@ -109,5 +109,16 @@
                 background: var(--bs-pink);
             }
         }
+
+        @include media-breakpoint-down(lg) {
+            .hero {
+                padding-top: 6rem;
+                padding-bottom: 2rem;
+
+                .text-block {
+                    margin-bottom: 0;
+                }
+            }
+        }
     }
 </style>
diff --git a/components/layout/Companies.vue b/components/layout/Companies.vue
@@ -16,13 +16,32 @@
 
 <script>
     export default defineComponent({
-
+        mounted() {
+            window.addEventListener("resize", this.autoScrollIfNeeded);
+            this.autoScrollIfNeeded();
+        },
+        unmounted() {
+            window.removeEventListener("resize", this.autoScrollIfNeeded)
+        },
         props: {
             inverted: {
                 type: Boolean,
                 default: false
             }
         },
+        methods: {
+            autoScrollIfNeeded() {
+                if (this.$refs && this.$refs.companies) {
+                    const companies = this.$refs.companies;
+                    const classes = companies.classList;
+                    if (companies.clientWidth >= this.$refs.container.parentElement.offsetWidth) {
+                        classes.add("scrolling");
+                    } else {
+                        classes.remove("scrolling")
+                    }
+                }
+            }
+        },
         computed: {
             companies() {
                 return [
@@ -65,4 +84,37 @@
             }
         }
     }
+
+    @keyframes auto-scroll {
+        0% {
+            margin-left: 0;
+        }
+        50% {
+            margin-left: -25%;
+        }
+        100% {
+            margin-left: 0;
+        }
+    }
+
+    @include media-breakpoint-down(lg) {
+        .container {
+            width: fit-content;
+            max-width: unset;
+
+            .companies {
+                display: flex;
+                flex-wrap: nowrap;
+                overflow-x: auto;
+                overflow-y: hidden;
+                width: fit-content;
+                margin: auto;
+
+                &.scrolling {
+                    animation: auto-scroll 30s infinite linear;
+                }
+            }
+        }
+    }
+
 </style>