Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Orden de las cards de las boxeadores. #1268

Closed
wants to merge 2 commits into from
Closed

Orden de las cards de las boxeadores. #1268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ccb751d
Agrega unas pocas clases de Tailwind CSS para corregir el orden en qu…
LuisEduardoFrias Apr 4, 2025
17d5220
Elimine el enlace directo a los detalles de los boxeadores y añadi un…
LuisEduardoFrias Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 37 additions & 15 deletions src/components/BoxerCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,30 +22,20 @@ interface Props {
alt={`Tarjeta del boxeador ${name}`}
/>

<div
class="absolute inset-0 -translate-x-full bg-gradient-to-tr from-transparent via-white/20 to-transparent transition-transform duration-700 ease-in-out group-hover:translate-x-full"
>
<div class="absolute inset-0 -translate-x-full bg-gradient-to-tr from-transparent via-white/20 to-transparent transition-transform duration-700 ease-in-out group-hover:translate-x-full">
</div>

<div
class="border-theme-tickle-me-pink/70 absolute inset-0 rounded-lg border-0 opacity-0 transition-all duration-300 group-hover:border-2 group-hover:opacity-100"
>
<div class="border-theme-tickle-me-pink/70 absolute inset-0 rounded-lg border-0 opacity-0 transition-all duration-300 group-hover:border-2 group-hover:opacity-100" >
</div>
</div>

<div
class="absolute inset-0 flex translate-y-2 flex-col items-center justify-end rounded-lg bg-gradient-to-t from-pink-950/90 via-pink-950/40 to-transparent p-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"
>
<h3
class="text-theme-tickle-me-pink text-xs font-semibold tracking-wide uppercase drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]"
>
<div class="absolute inset-0 flex translate-y-2 flex-col items-center justify-end rounded-lg bg-gradient-to-t from-pink-950/90 via-pink-950/40 to-transparent p-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100" >
<h3 class="text-theme-tickle-me-pink text-white text-xs font-semibold tracking-wide uppercase drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" >
{name}
</h3>
</div>

<div
class="bg-theme-tickle-me-pink absolute -bottom-1 left-1/2 h-1 w-0 -translate-x-1/2 transform rounded-t-md transition-all duration-300 group-hover:w-2/3"
>
<div class="bg-theme-tickle-me-pink absolute -bottom-1 left-1/2 h-1 w-0 -translate-x-1/2 transform rounded-t-md transition-all duration-300 group-hover:w-2/3" >
</div>
</a>

Expand Down Expand Up @@ -113,11 +103,43 @@ interface Props {
</style>

<script>
//import { $ } from '@/lib/dom-selector'

document.addEventListener('astro:page-load', () => {
const boxerCards = document.querySelectorAll('.boxer-card')
let timeoutId: ReturnType<typeof setTimeout> | null = null

function removeHrefInMovil() {
boxerCards.forEach((singleBoxerCard, index) => {
const hasHref = singleBoxerCard.hasAttribute('href');

if (hasHref && window.innerWidth < 768) {
singleBoxerCard.removeAttribute('href')

if (singleBoxerCard.href) {
singleBoxerCard.removeAttribute('href');
}
}

if (!hasHref) {
const id = singleBoxerCard.getAttribute('data-id')
singleBoxerCard.setAttribute("href",`/luchador/${id}`)
}
})
}

function isDiviceMovil() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

if (isDiviceMovil()) {
removeHrefInMovil();
}

window.addEventListener('resize', removeHrefInMovil);

boxerCards.forEach((singleBoxerCard, index) => {

singleBoxerCard.addEventListener('mouseenter', () => {
if (timeoutId) {
clearTimeout(timeoutId)
Expand Down
76 changes: 59 additions & 17 deletions src/sections/Hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
import { FIGHTERS } from '@/consts/fighters'
import BoxerCard from '@/components/BoxerCard.astro'

let idCardClicked = "";

const firstRow = FIGHTERS.slice(0, 6)
const leftRow = firstRow.slice(0, 3)
const rightRow = firstRow.slice(3)
Expand Down Expand Up @@ -72,7 +74,8 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
id="fighter-container"
class="pointer-events-none absolute inset-0 flex flex-col items-center"
>
<div class="relative top-96 z-1 mx-auto flex h-[4.5rem] w-full items-center justify-center">

<div class="relative top-96 z-10 mx-auto flex h-[4.5rem] w-full items-center justify-center">
{
FIGHTERS.map(({ id, name }) => (
<img
Expand All @@ -88,9 +91,7 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
}
</div>

<div
class="mask-fade-bottom relative bottom-0 mx-auto flex h-[80vh] w-full items-center justify-center"
>
<div class="mask-fade-bottom relative bottom-0 mx-auto flex h-[80vh] w-full items-center justify-center" >
{
FIGHTERS.map(({ id, name }) => (
<img
Expand All @@ -107,34 +108,30 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
</div>
</div>

<div class="relative flex h-full w-full max-w-6xl flex-col items-center justify-end gap-8 p-8">
<div class="flex w-full flex-wrap justify-between px-4">
<div class="flex flex-wrap justify-start gap-4">
<div class="relative flex h-full w-full max-w-6xl flex-col items-center justify-end gap-8 -md:p-2 md:p-8">
<div class="flex w-full -md:flex-row md:flex-wrap gap-x-3 justify-between md:px-4">
<div class="flex -md:flex-row flex-wrap justify-start gap-4">
{
leftRow.map(({ id, name, versus }, index) => (
<div
class={`animate-fade-in-right animate-duration-slower animate-delay-${animationDelay[index]}`}
>
<div class={`animate-fade-in-right animate-duration-slower animate-delay-${animationDelay[index]}`} >
<BoxerCard id={id} name={name} class="boxer-left" versus={versus} />
</div>
))
}
</div>

<div class="flex flex-wrap justify-end gap-4">
<div class="flex -md:flex-row flex-wrap justify-end gap-4">
{
rightRow.map(({ id, name, versus }, index) => (
<div
class={`animate-fade-in-left animate-duration-slower animate-delay-${reverseDelay[index]}`}
>
<div class={`animate-fade-in-left animate-duration-slower animate-delay-${reverseDelay[index]}`} >
<BoxerCard id={id} name={name} class="boxer-right" versus={versus} />
</div>
))
}
</div>
</div>

<div class="flex flex-wrap justify-between gap-4">
<div class="flex -md:flex-row md:flex-wrap justify-between gap-4">
<div class="flex flex-wrap justify-start gap-4">
{
leftSecondRow.map(({ id, name, versus }, index) => (
Expand All @@ -154,6 +151,11 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
}
</div>
</div>

<a class="absolute hidden md:hidden btn-details animate-fade-in-up animate-delay-200 font-extrabold w-20 h-10 rounded-xl border-2 border-rose-700 shadow-lg flex items-center justify-center">
Details
</a>

</div>
</div>
</section>
Expand All @@ -162,6 +164,28 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
.mask-fade-text {
mask-image: linear-gradient(to bottom, transparent 5%, black 6%, black 95%, transparent 100%);
}

@keyframes selectedPulse {
0% {
box-shadow:
0 0 0 0 rgba(255, 20, 147, 0.7),
inset 0 0 0 2px rgba(255, 20, 147, 1);
}
70% {
box-shadow:
0 0 0 15px rgba(255, 20, 147, 0),
inset 0 0 0 2px rgba(255, 20, 147, 1);
}
100% {
box-shadow:
0 0 0 0 rgba(255, 20, 147, 0),
inset 0 0 0 2px rgba(255, 20, 147, 1);
}
}

.btn-details {
animation: selectedPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
</style>

<script>
Expand All @@ -172,6 +196,7 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()

let currentFighterId: string | null = null
let hideFighterTimer: ReturnType<typeof setTimeout>
let hideBtnFighterTimer: ReturnType<typeof setTimeout>

document.addEventListener('boxer-card-exit', () => {
$landing?.classList.remove('hidden')
Expand All @@ -194,11 +219,26 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
currentFighterId = null
}, 500)
}


hideBtnFighterTimer = setTimeout(() => {
const btnDetails = $(`.btn-details`)
btnDetails.classList.add('hidden')
currentFighterId = null
}, 500)
})


function activeBtnInfoFighter (id) {
const btnDetails = $(`.btn-details`)

btnDetails.setAttribute("href",`/luchador/${event.detail.id}`)
btnDetails?.classList.remove('hidden')
}

document.addEventListener('boxer-card-hovered', (event: Event) => {
if (currentFighterId) {
clearTimeout(hideFighterTimer)
// clearTimeout(hideBtnFighterTimer)

const heroText = $(`[data-id="hero-text-${currentFighterId}"]`)
const heroImage = $(`[data-id="hero-image-${currentFighterId}"]`)
Expand All @@ -208,6 +248,8 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
currentFighterId = null
}

activeBtnInfoFighter(event.detail.id)

const customEvent = event as CustomEvent<{ id: string }>
const id = customEvent.detail.id

Expand Down