atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

remove duplicate styling and improve mobile for GridMotion

Browse Source
This commit is contained in:
David Haz
2025-07-12 14:35:43 +03:00
parent 0359d8043c
commit 5d97fb34d9
2 changed files with 10 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/content/Backgrounds/GridMotion/GridMotion.vue
View File

@@ -16,7 +16,7 @@ const gridRef = ref<HTMLElement | null>(null);
const rowRefs = ref<HTMLElement[]>([]); const rowRefs = ref<HTMLElement[]>([]);
const mouseX = ref(window.innerWidth / 2); const mouseX = ref(window.innerWidth / 2);
const totalItems = 70; const totalItems = 150;
const combinedItems = computed(() => { const combinedItems = computed(() => {
if (props.items.length === 0) { if (props.items.length === 0) {
return []; return [];
@@ -87,35 +87,35 @@ onMounted(() => {
<div <div
v-for="rowIndex in 10" v-for="rowIndex in 10"
:key="rowIndex" :key="rowIndex"
class="gap-4 grid grid-cols-7" class="gap-4 flex"
:style="{ willChange: 'transform, filter' }" :style="{ willChange: 'transform, filter' }"
ref="rowRefs" ref="rowRefs"
> >
<div <div
v-for="itemIndex in 7" v-for="itemIndex in 15"
:key="itemIndex" :key="itemIndex"
class="relative h-[200px]" class="relative h-[250px] min-w-[300px] flex-shrink-0"
v-show="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]" v-show="combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)]"
> >
<div <div
class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white" class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
> >
<div <div
v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" v-if="isImage(combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)])"
class="top-0 left-0 absolute bg-cover bg-center w-full h-full" class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
:style="{ :style="{
backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})` backgroundImage: `url(${combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)]})`
}" }"
></div> ></div>
<div <div
v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" v-else-if="isTag(combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)])"
class="z-[2] p-4 text-center" class="z-[2] p-4 text-center"
v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]" v-html="combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)]"
></div> ></div>
<div v-else class="z-[1] p-4 text-center"> <div v-else class="z-[1] p-4 text-center">
{{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }} {{ combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)] }}
</div> </div>
</div> </div>
</div> </div>

24
src/css/sidebar.css
View File

@@ -374,30 +374,6 @@
border: 1px solid #333; border: 1px solid #333;
} }
.cta-button-docs {
font-weight: 500;
font-size: 12px;
padding: 0 0 0 1rem;
height: 40px;
background: linear-gradient(135deg, rgb(30, 160, 63), rgba(24, 47, 255, 0.6));
background-size: 200% 200%;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.07);
color: #fff;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
white-space: nowrap;
justify-content: space-between;
transition: 0.3s ease;
}
.cta-button-docs:hover {
transform: scale(0.98);
}
.star-count { .star-count {
background-color: #0b0b0b; background-color: #0b0b0b;
margin-left: 1em; margin-left: 1em;