atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-04-22 01:54:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: atridad/vue-bits:copilot/bug-cant-compile-typescript-components
Branches Tags
atridad/vue-bits:main atridad/vue-bits:copilot/fix-flowing-menu-whitespace atridad/vue-bits:copilot/bug-cant-compile-typescript-components
...
compare: atridad/vue-bits:d1c65883a4783837a9e01b7a2b3bc5b02d537024
Branches Tags
atridad/vue-bits:main atridad/vue-bits:copilot/fix-flowing-menu-whitespace atridad/vue-bits:copilot/bug-cant-compile-typescript-components

5 Commits
copilot/bug-cant-compile-typescript-components ... d1c65883a4

Author SHA1 Message Date
David d1c65883a4 Merge pull request #149 from DavidHDev/copilot/fix-flowing-menu-whitespace 
Fix FlowingMenu marquee trailing whitespace on wide screens
 2026-03-15 13:54:48 +02:00
copilot-swe-agent[bot] 7bd8509413 Fix FlowingMenu trailing whitespace on wide screens 
Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>
 2026-03-15 11:19:26 +00:00
copilot-swe-agent[bot] bbd0f9c948 Initial plan 2026-03-15 11:17:28 +00:00
David 2f96ec7384 Merge pull request #148 from DavidHDev/copilot/bug-cant-compile-typescript-components 
Fix TypeScript build error: type `shape` ref as `OrbitShape` in OrbitImagesDemo
 2026-03-15 13:17:07 +02:00
David Haz aef640afd7 update shape type to OrbitShape for better type safety 2026-03-15 12:35:13 +02:00
1 changed files with 14 additions and 12 deletions
Expand all files Collapse all files
src/content/Components/FlowingMenu/FlowingMenu.vue
+14 -12
View File
@@ -20,18 +20,20 @@
class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none bg-white translate-y-[101%]"
:ref="el => (marqueeRefs[idx] = el as HTMLDivElement)"
>
<div class="h-full w-[200%] flex" :ref="el => (marqueeInnerRefs[idx] = el as HTMLDivElement)">
<div class="flex items-center relative h-full w-[200%] will-change-transform animate-marquee">
<template v-for="i in 4" :key="`${idx}-${i}`">
<span class="text-[#0b0b0b] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0]">
{{ item.text }}
</span>
<div class="h-full flex" :ref="el => (marqueeInnerRefs[idx] = el as HTMLDivElement)">
<div class="flex items-center relative h-full w-max will-change-transform animate-marquee">
<div v-for="g in 2" :key="`${idx}-g${g}`" class="flex items-center h-full shrink-0">
<template v-for="i in 8" :key="`${idx}-g${g}-${i}`">
<span class="text-[#0b0b0b] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0] whitespace-nowrap">
{{ item.text }}
</span>
<div
class="w-[200px] h-[7vh] my-[2em] mx-[2vw] p-[1em_0] rounded-[50px] bg-cover bg-center"
:style="{ backgroundImage: `url(${item.image})` }"
/>
</template>
<div
class="w-[200px] h-[7vh] my-[2em] mx-[2vw] p-[1em_0] rounded-[50px] bg-cover bg-center shrink-0"
:style="{ backgroundImage: `url(${item.image})` }"
/>
</template>
</div>
</div>
</div>
</div>
@@ -121,6 +123,6 @@ const handleMouseLeave = (ev: MouseEvent, idx: number) => {
}
.animate-marquee {
animation: marquee 15s linear infinite;
animation: marquee 30s linear infinite;
}
</style>