granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix nested <a> in GridRep

Browse source
This commit is contained in:
Justin Edmund 2024-04-22 05:56:56 -07:00
parent 2eaaf1baae
commit 8f132e7f51
2 changed files with 73 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/reps/GridRep/index.module.scss
View file

@ -6,8 +6,8 @@
display: grid;
grid-template-rows: 1fr 1fr;
gap: $unit;
padding: $unit-2x $unit-2x 0 $unit-2x;
min-width: 320px;
position: relative;
width: 100%;
opacity: 1;
@ -54,6 +54,22 @@
}
}
a {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 8px;
gap: 8px;
padding: $unit-2x $unit-2x 0 $unit-2x;
}
button {
position: absolute;
z-index: 2;
right: $unit;
top: $unit;
width: 44px;
}
.gridContainer {
aspect-ratio: 2/0.95;
width: 100%;

113
components/reps/GridRep/index.tsx
View file

@ -501,19 +501,17 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
)
const favoriteButton = (
<Link href="#">
<Button
className={classNames({
save: true,
saved: party.favorited,
})}
leftAccessoryIcon={<SaveIcon className="stroke" />}
active={party.favorited}
bound={true}
size="small"
onClick={sendSaveData}
/>
</Link>
<Button
className={classNames({
save: true,
saved: party.favorited,
})}
leftAccessoryIcon={<SaveIcon className="stroke" />}
active={party.favorited}
bound={true}
size="small"
onClick={sendSaveData}
/>
)
const renderFavoriteButton =
@ -566,7 +564,6 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
<div className={styles.buttonArea}>
{renderPrivateIcon}
{renderVisibilityIcon}
{renderFavoriteButton}
</div>
</div>
<div className={styles.attributed}>
@ -587,49 +584,51 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
}
return (
<Link
href={`/p/${party.shortcode}`}
className={gridRepClasses}
onMouseLeave={() => changeView('weapons')}
>
{detailsWithUsername}
<div className={styles.gridContainer}>
{currentView === 'characters'
? renderCharacterGrid
: currentView === 'summons'
? renderSummonGrid
: renderWeaponGrid}
</div>
<ul className={styles.indicators}>
<li
className={classNames({
[styles.active]: currentView === 'characters',
})}
onMouseEnter={() => changeView('characters')}
>
<div className={styles.indicator} />
<span>Characters</span>
</li>
<li
className={classNames({
[styles.active]: currentView === 'weapons',
})}
onMouseEnter={() => changeView('weapons')}
>
<div className={styles.indicator} />
<span>Weapons</span>
</li>
<li
className={classNames({
[styles.active]: currentView === 'summons',
})}
onMouseEnter={() => changeView('summons')}
>
<div className={styles.indicator} />
<span>Summons</span>
</li>
</ul>
</Link>
<div className={gridRepClasses}>
{renderFavoriteButton}
<Link
href={`/p/${party.shortcode}`}
onMouseLeave={() => changeView('weapons')}
>
{detailsWithUsername}
<div className={styles.gridContainer}>
{currentView === 'characters'
? renderCharacterGrid
: currentView === 'summons'
? renderSummonGrid
: renderWeaponGrid}
</div>
<ul className={styles.indicators}>
<li
className={classNames({
[styles.active]: currentView === 'characters',
})}
onMouseEnter={() => changeView('characters')}
>
<div className={styles.indicator} />
<span>Characters</span>
</li>
<li
className={classNames({
[styles.active]: currentView === 'weapons',
})}
onMouseEnter={() => changeView('weapons')}
>
<div className={styles.indicator} />
<span>Weapons</span>
</li>
<li
className={classNames({
[styles.active]: currentView === 'summons',
})}
onMouseEnter={() => changeView('summons')}
>
<div className={styles.indicator} />
<span>Summons</span>
</li>
</ul>
</Link>
</div>
)
}