mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
refactor(style): utilize tailwind instead of CSS
This commit is contained in:
Alfarish Fizikri
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="gallery-container">
|
||||
<div class="gallery-gradient gallery-gradient-left"></div>
|
||||
<div class="gallery-gradient gallery-gradient-right"></div>
|
||||
<div class="gallery-content">
|
||||
<div class="relative h-[500px] w-full overflow-hidden">
|
||||
<div class="absolute top-0 left-0 h-full w-12 z-10 bg-gradient-to-l from-transparent to-[#0b0b0b]" />
|
||||
<div class="absolute top-0 right-0 h-full w-12 z-10 bg-gradient-to-r from-transparent to-[#0b0b0b]" />
|
||||
|
||||
<div class="flex h-full items-center justify-center [perspective:1000px] [transform-style:preserve-3d]">
|
||||
<Motion
|
||||
tag="div"
|
||||
class="gallery-track"
|
||||
class="flex min-h-[200px] items-center justify-center w-full cursor-grab select-none will-change-transform [transform-style:preserve-3d] active:cursor-grabbing"
|
||||
:style="trackStyle"
|
||||
:animate="animateProps"
|
||||
:transition="springTransition"
|
||||
@@ -13,8 +14,19 @@
|
||||
@mouseleave="handleMouseLeave"
|
||||
@mousedown="handleMouseDown"
|
||||
>
|
||||
<div v-for="(url, i) in displayImages" :key="`gallery-${i}`" class="gallery-item" :style="getItemStyle(i)">
|
||||
<img :src="url" alt="gallery" class="gallery-img" loading="lazy" decoding="async" />
|
||||
<div
|
||||
v-for="(url, i) in displayImages"
|
||||
:key="`gallery-${i}`"
|
||||
:style="getItemStyle(i)"
|
||||
class="absolute flex items-center justify-center px-[8%] [backface-visibility:hidden] will-change-transform pointer-events-none"
|
||||
>
|
||||
<img
|
||||
:src="url"
|
||||
alt="gallery"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="pointer-events-auto h-[120px] w-[300px] rounded-[15px] border-[3px] border-white object-cover transition-transform duration-300 ease-in-out will-change-transform hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
</Motion>
|
||||
</div>
|
||||
@@ -299,94 +311,3 @@ watch(
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gallery-container {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 48px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.gallery-gradient-left {
|
||||
left: 0;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #060010 100%);
|
||||
}
|
||||
|
||||
.gallery-gradient-right {
|
||||
right: 0;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #060010 100%);
|
||||
}
|
||||
|
||||
.gallery-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.gallery-track {
|
||||
display: flex;
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
transform-style: preserve-3d;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
will-change: transform;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.gallery-track:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8%;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gallery-img {
|
||||
pointer-events: auto;
|
||||
height: 120px;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
border: 3px solid #fff;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gallery-item {
|
||||
padding: 6%;
|
||||
}
|
||||
.gallery-img {
|
||||
height: 100px;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
<template>
|
||||
<div class="rolling-gallery-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="background: #060010; overflow: hidden; position: relative; min-height: 500px;">
|
||||
<div class="flex h-full max-w-[600px] items-center justify-center flex-col">
|
||||
<h2 class="mt-6 text-center absolute font-black top-4 md:top-4 whitespace-nowrap text-2xl md:text-5xl text-white">
|
||||
Your trip to Thailand.
|
||||
</h2>
|
||||
<RollingGallery
|
||||
:autoplay="autoplay"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
:images="customImages.length > 0 ? customImages : undefined"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container relative min-h-[500px] overflow-hidden">
|
||||
<div class="flex h-full max-w-[600px] flex-col items-center justify-center">
|
||||
<h2
|
||||
class="absolute top-4 mt-6 whitespace-nowrap text-center font-black text-2xl text-white md:top-4 md:text-5xl"
|
||||
>
|
||||
Your trip to Thailand.
|
||||
</h2>
|
||||
<RollingGallery
|
||||
:autoplay="autoplay"
|
||||
:pause-on-hover="pauseOnHover"
|
||||
:images="customImages.length > 0 ? customImages : undefined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch
|
||||
title="Autoplay"
|
||||
v-model="autoplay"
|
||||
/>
|
||||
<Customize>
|
||||
<PreviewSwitch
|
||||
title="Autoplay"
|
||||
v-model="autoplay"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Pause on Hover"
|
||||
v-model="pauseOnHover"
|
||||
/>
|
||||
</Customize>
|
||||
<PreviewSwitch
|
||||
title="Pause on Hover"
|
||||
v-model="pauseOnHover"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['motion-v']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="rollingGallery" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="rollingGallery" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="rollingGallery.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="rollingGallery.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -79,16 +79,3 @@ const propData = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rolling-gallery-demo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user