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

Fix z-index on entity units to fix hovercards

Browse source
This commit is contained in:
Justin Edmund 2023-01-02 06:53:20 -08:00
parent 1c555c99e2
commit 3b670032c3
6 changed files with 149 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
components/CharacterHovercard/index.tsx
View file

@ -69,53 +69,55 @@ const CharacterHovercard = (props: Props) => {
return ( return (
<HoverCard.Root> <HoverCard.Root>
<HoverCard.Trigger>{props.children}</HoverCard.Trigger> <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
<HoverCard.Content className="Weapon Hovercard"> <HoverCard.Portal>
<div className="top"> <HoverCard.Content className="Weapon Hovercard">
<div className="title"> <div className="top">
<h4>{props.gridCharacter.object.name[locale]}</h4> <div className="title">
<img <h4>{props.gridCharacter.object.name[locale]}</h4>
alt={props.gridCharacter.object.name[locale]} <img
src={characterImage()} alt={props.gridCharacter.object.name[locale]}
/> src={characterImage()}
</div>
<div className="subInfo">
<div className="icons">
<WeaponLabelIcon
labelType={Element[props.gridCharacter.object.element]}
/> />
<WeaponLabelIcon </div>
labelType={ <div className="subInfo">
Proficiency[ <div className="icons">
props.gridCharacter.object.proficiency.proficiency1 <WeaponLabelIcon
] labelType={Element[props.gridCharacter.object.element]}
} />
/>
{props.gridCharacter.object.proficiency.proficiency2 ? (
<WeaponLabelIcon <WeaponLabelIcon
labelType={ labelType={
Proficiency[ Proficiency[
props.gridCharacter.object.proficiency.proficiency2 props.gridCharacter.object.proficiency.proficiency1
] ]
} }
/> />
) : ( {props.gridCharacter.object.proficiency.proficiency2 ? (
'' <WeaponLabelIcon
)} labelType={
Proficiency[
props.gridCharacter.object.proficiency.proficiency2
]
}
/>
) : (
''
)}
</div>
<UncapIndicator
type="character"
ulb={props.gridCharacter.object.uncap.ulb || false}
flb={props.gridCharacter.object.uncap.flb || false}
special={false}
/>
</div> </div>
<UncapIndicator
type="character"
ulb={props.gridCharacter.object.uncap.ulb || false}
flb={props.gridCharacter.object.uncap.flb || false}
special={false}
/>
</div> </div>
</div>
<a className={`Button ${tintElement}`} href={wikiUrl} target="_new"> <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
{t('buttons.wiki')} {t('buttons.wiki')}
</a> </a>
<HoverCard.Arrow /> <HoverCard.Arrow />
</HoverCard.Content> </HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root> </HoverCard.Root>
) )
} }

52
components/SummonHovercard/index.tsx
View file

@ -62,34 +62,36 @@ const SummonHovercard = (props: Props) => {
return ( return (
<HoverCard.Root> <HoverCard.Root>
<HoverCard.Trigger>{props.children}</HoverCard.Trigger> <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
<HoverCard.Content className="Weapon Hovercard"> <HoverCard.Portal>
<div className="top"> <HoverCard.Content className="Weapon Hovercard">
<div className="title"> <div className="top">
<h4>{props.gridSummon.object.name[locale]}</h4> <div className="title">
<img <h4>{props.gridSummon.object.name[locale]}</h4>
alt={props.gridSummon.object.name[locale]} <img
src={summonImage()} alt={props.gridSummon.object.name[locale]}
/> src={summonImage()}
</div> />
<div className="subInfo"> </div>
<div className="icons"> <div className="subInfo">
<WeaponLabelIcon <div className="icons">
labelType={Element[props.gridSummon.object.element]} <WeaponLabelIcon
labelType={Element[props.gridSummon.object.element]}
/>
</div>
<UncapIndicator
type="summon"
ulb={props.gridSummon.object.uncap.ulb || false}
flb={props.gridSummon.object.uncap.flb || false}
special={false}
/> />
</div> </div>
<UncapIndicator
type="summon"
ulb={props.gridSummon.object.uncap.ulb || false}
flb={props.gridSummon.object.uncap.flb || false}
special={false}
/>
</div> </div>
</div> <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
<a className={`Button ${tintElement}`} href={wikiUrl} target="_new"> {t('buttons.wiki')}
{t('buttons.wiki')} </a>
</a> <HoverCard.Arrow />
<HoverCard.Arrow /> </HoverCard.Content>
</HoverCard.Content> </HoverCard.Portal>
</HoverCard.Root> </HoverCard.Root>
) )
} }

2
components/SummonUnit/index.scss
View file

@ -91,7 +91,7 @@
img { img {
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 2; z-index: 0;
&.Placeholder { &.Placeholder {
opacity: 0; opacity: 0;

62
components/WeaponHovercard/index.scss
View file

@ -1,45 +1,41 @@
.Hovercard { .Weapon.Hovercard {
z-index: 99; .skills {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-right: $unit * 2;
.Weapon.HovercardContent { .axSkill {
.skills { align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
padding-right: $unit * 2;
.axSkill { &.primary img {
align-items: center; height: 64px;
display: flex; width: 64px;
flex-direction: row; }
&.primary img { &.secondary {
height: 64px; gap: $unit * 1.5;
width: 64px;
}
&.secondary { img {
gap: $unit * 1.5; height: 36px;
width: 36px;
img {
height: 36px;
width: 36px;
}
}
span {
font-size: $font-small;
font-weight: $medium;
text-align: center;
} }
} }
}
.weaponKeys { span {
display: flex; font-size: $font-small;
flex-direction: column; font-weight: $medium;
font-size: $normal; text-align: center;
gap: calc($unit / 2); }
} }
} }
.weaponKeys {
display: flex;
flex-direction: column;
font-size: $normal;
gap: calc($unit / 2);
}
} }

101
components/WeaponHovercard/index.tsx
View file

@ -189,60 +189,63 @@ const WeaponHovercard = (props: Props) => {
) )
return ( return (
<HoverCard.Root className="Hovercard"> <HoverCard.Root>
<HoverCard.Trigger>{props.children}</HoverCard.Trigger> <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
<HoverCard.Content className="Weapon HovercardContent" side={hovercardSide()}> <HoverCard.Portal>
<div className="top"> <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
<div className="title"> <div className="top">
<h4>{props.gridWeapon.object.name[locale]}</h4> <div className="title">
<img <h4>{props.gridWeapon.object.name[locale]}</h4>
alt={props.gridWeapon.object.name[locale]} <img
src={weaponImage()} alt={props.gridWeapon.object.name[locale]}
/> src={weaponImage()}
</div> />
<div className="subInfo"> </div>
<div className="icons"> <div className="subInfo">
{props.gridWeapon.object.element !== 0 || <div className="icons">
(props.gridWeapon.object.element === 0 && {props.gridWeapon.object.element !== 0 ||
props.gridWeapon.element != null) ? ( (props.gridWeapon.object.element === 0 &&
<WeaponLabelIcon props.gridWeapon.element != null) ? (
labelType={ <WeaponLabelIcon
props.gridWeapon.object.element === 0 && labelType={
props.gridWeapon.element !== 0 props.gridWeapon.object.element === 0 &&
? Element[props.gridWeapon.element] props.gridWeapon.element !== 0
: Element[props.gridWeapon.object.element] ? Element[props.gridWeapon.element]
} : Element[props.gridWeapon.object.element]
/> }
) : ( />
'' ) : (
)} ''
<WeaponLabelIcon )}
labelType={Proficiency[props.gridWeapon.object.proficiency]} <WeaponLabelIcon
labelType={Proficiency[props.gridWeapon.object.proficiency]}
/>
</div>
<UncapIndicator
type="weapon"
ulb={props.gridWeapon.object.uncap.ulb || false}
flb={props.gridWeapon.object.uncap.flb || false}
special={false}
/> />
</div> </div>
<UncapIndicator
type="weapon"
ulb={props.gridWeapon.object.uncap.ulb || false}
flb={props.gridWeapon.object.uncap.flb || false}
special={false}
/>
</div> </div>
</div>
{props.gridWeapon.object.ax > 0 && {props.gridWeapon.object.ax > 0 &&
props.gridWeapon.ax && props.gridWeapon.ax &&
props.gridWeapon.ax[0].modifier && props.gridWeapon.ax[0].modifier &&
props.gridWeapon.ax[0].strength props.gridWeapon.ax[0].strength
? axSection ? axSection
: ''} : ''}
{props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0 {props.gridWeapon.weapon_keys &&
? keysSection props.gridWeapon.weapon_keys.length > 0
: ''} ? keysSection
<a className={`Button ${tintElement}`} href={wikiUrl} target="_new"> : ''}
{t('buttons.wiki')} <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
</a> {t('buttons.wiki')}
<HoverCard.Arrow /> </a>
</HoverCard.Content> <HoverCard.Arrow />
</HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root> </HoverCard.Root>
) )
} }

1
components/WeaponUnit/index.scss
View file

@ -6,6 +6,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: auto; height: auto;
z-index: 0;
@include breakpoint(tablet) { @include breakpoint(tablet) {
min-height: auto; min-height: auto;