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; display: grid;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: $unit; gap: $unit;
padding: $unit-2x $unit-2x 0 $unit-2x;
min-width: 320px; min-width: 320px;
position: relative;
width: 100%; width: 100%;
opacity: 1; 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 { .gridContainer {
aspect-ratio: 2/0.95; aspect-ratio: 2/0.95;
width: 100%; width: 100%;

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

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