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

Fix unit styles

Browse source
This commit is contained in:
Justin Edmund 2023-06-23 19:49:25 -07:00
parent 8f124c0f9a
commit c092566c03
6 changed files with 67 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/character/CharacterUnit/index.module.scss
View file

@ -1,4 +1,4 @@
.CharacterUnit { .unit {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -8,7 +8,7 @@
position: relative; position: relative;
margin-bottom: $unit * 4; margin-bottom: $unit * 4;
&.editable .CharacterImage:hover { &.editable .image:hover {
border: $hover-stroke; border: $hover-stroke;
box-shadow: $hover-shadow; box-shadow: $hover-shadow;
cursor: pointer; cursor: pointer;
@ -60,7 +60,7 @@
z-index: 2; z-index: 2;
} }
.CharacterImage { .image {
aspect-ratio: 131 / 273; aspect-ratio: 131 / 273;
background: var(--card-bg); background: var(--card-bg);
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
@ -92,7 +92,7 @@
} }
} }
.CharacterName { .name {
@include breakpoint(phone) { @include breakpoint(phone) {
font-size: $font-tiny; font-size: $font-tiny;
} }
@ -102,7 +102,7 @@
opacity: 1; opacity: 1;
} }
.Perpetuity { .perpetuity {
position: absolute; position: absolute;
background-image: url('/icons/perpetuity/filled.svg'); background-image: url('/icons/perpetuity/filled.svg');
background-size: $unit-4x $unit-4x; background-size: $unit-4x $unit-4x;
@ -118,7 +118,7 @@
cursor: pointer; cursor: pointer;
} }
&.Empty { &.empty {
background-image: url('/icons/perpetuity/empty.svg'); background-image: url('/icons/perpetuity/empty.svg');
opacity: 0; opacity: 0;

20
components/character/CharacterUnit/index.tsx
View file

@ -72,14 +72,14 @@ const CharacterUnit = ({
// Classes // Classes
const classes = classNames({ const classes = classNames({
CharacterUnit: true, [styles.unit]: true,
editable: editable, [styles.editable]: editable,
filled: gridCharacter !== undefined, [styles.filled]: gridCharacter !== undefined,
}) })
const buttonClasses = classNames({ const buttonClasses = classNames({
Options: true, options: true,
Clicked: contextMenuOpen, clicked: contextMenuOpen,
}) })
// Other // Other
@ -278,8 +278,8 @@ const CharacterUnit = ({
const perpetuity = () => { const perpetuity = () => {
if (gridCharacter) { if (gridCharacter) {
const classes = classNames({ const classes = classNames({
Perpetuity: true, [styles.perpetuity]: true,
Empty: !gridCharacter.perpetuity, [styles.empty]: !gridCharacter.perpetuity,
}) })
return <i className={classes} onClick={handlePerpetuityClick} /> return <i className={classes} onClick={handlePerpetuityClick} />
@ -297,13 +297,13 @@ const CharacterUnit = ({
const content = ( const content = (
<div <div
className="CharacterImage" className={styles.image}
tabIndex={gridCharacter ? gridCharacter.position * 7 : 0} tabIndex={gridCharacter ? gridCharacter.position * 7 : 0}
onClick={openSearchModal} onClick={openSearchModal}
> >
{image} {image}
{editable ? ( {editable ? (
<span className="icon"> <span className={styles.icon}>
<PlusIcon /> <PlusIcon />
</span> </span>
) : ( ) : (
@ -346,7 +346,7 @@ const CharacterUnit = ({
) : ( ) : (
'' ''
)} )}
<h3 className="CharacterName">{character?.name[locale]}</h3> <h3 className={styles.name}>{character?.name[locale]}</h3>
</div> </div>
{searchModal()} {searchModal()}
</> </>

26
components/summon/SummonUnit/index.module.scss
View file

@ -1,4 +1,4 @@
.SummonUnit { .unit {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
@ -26,7 +26,7 @@
min-height: 15.9vw; min-height: 15.9vw;
} }
.SummonImage { .image {
list-style-type: none; list-style-type: none;
width: 100%; width: 100%;
} }
@ -36,19 +36,19 @@
margin-right: 0; margin-right: 0;
} }
&.main.editable .SummonImage:hover, &.main.editable .image:hover,
&.friend.editable .SummonImage:hover { &.friend.editable .image:hover {
transform: $scale-tall; transform: $scale-tall;
} }
&.editable .SummonImage:hover { &.editable .image:hover {
border: $hover-stroke; border: $hover-stroke;
box-shadow: $hover-shadow; box-shadow: $hover-shadow;
cursor: pointer; cursor: pointer;
transform: $scale-wide; transform: $scale-wide;
} }
.SummonImage { .image {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
border-radius: $unit; border-radius: $unit;
@ -75,7 +75,7 @@
} }
} }
.SummonName { .name {
@include breakpoint(phone) { @include breakpoint(phone) {
font-size: $font-tiny; font-size: $font-tiny;
} }
@ -113,11 +113,11 @@
} }
} }
&:hover .QuickSummon.Empty { &:hover .quickSummon.empty {
opacity: 1; opacity: 1;
} }
&.main .QuickSummon { &.main .quickSummon {
$diameter: $unit-6x; $diameter: $unit-6x;
background-size: $diameter $diameter; background-size: $diameter $diameter;
top: -2%; top: -2%;
@ -126,11 +126,11 @@
height: $diameter; height: $diameter;
} }
&.friend .QuickSummon { &.friend .quickSummon {
display: none; display: none;
} }
&.grid .QuickSummon { &.grid .quickSummon {
$diameter: $unit-5x; $diameter: $unit-5x;
background-size: $diameter $diameter; background-size: $diameter $diameter;
top: -5%; top: -5%;
@ -139,7 +139,7 @@
height: $diameter; height: $diameter;
} }
.QuickSummon { .quickSummon {
position: absolute; position: absolute;
background-image: url('/icons/quick_summon/filled.svg'); background-image: url('/icons/quick_summon/filled.svg');
z-index: 20; z-index: 20;
@ -150,7 +150,7 @@
cursor: pointer; cursor: pointer;
} }
&.Empty { &.empty {
background-image: url('/icons/quick_summon/empty.svg'); background-image: url('/icons/quick_summon/empty.svg');
opacity: 0; opacity: 0;

26
components/summon/SummonUnit/index.tsx
View file

@ -62,17 +62,17 @@ const SummonUnit = ({
// Classes // Classes
const classes = classNames({ const classes = classNames({
SummonUnit: true, [styles.unit]: true,
main: unitType == 0, [styles.main]: unitType == 0,
grid: unitType == 1, [styles.grid]: unitType == 1,
friend: unitType == 2, [styles.friend]: unitType == 2,
editable: editable, [styles.editable]: editable,
filled: gridSummon !== undefined, [styles.filled]: gridSummon !== undefined,
}) })
const buttonClasses = classNames({ const buttonClasses = classNames({
Options: true, options: true,
Clicked: contextMenuOpen, clicked: contextMenuOpen,
}) })
// Other // Other
@ -273,8 +273,8 @@ const SummonUnit = ({
const quickSummon = () => { const quickSummon = () => {
if (gridSummon) { if (gridSummon) {
const classes = classNames({ const classes = classNames({
QuickSummon: true, [styles.quickSummon]: true,
Empty: !gridSummon.quick_summon, [styles.empty]: !gridSummon.quick_summon,
}) })
return <i className={classes} onClick={handleQuickSummonClick} /> return <i className={classes} onClick={handleQuickSummonClick} />
@ -294,10 +294,10 @@ const SummonUnit = ({
) )
const content = ( const content = (
<div className="SummonImage" onClick={openSearchModal}> <div className={styles.image} onClick={openSearchModal}>
{image} {image}
{editable ? ( {editable ? (
<span className="icon"> <span className={styles.icon}>
<PlusIcon /> <PlusIcon />
</span> </span>
) : ( ) : (
@ -338,7 +338,7 @@ const SummonUnit = ({
) : ( ) : (
'' ''
)} )}
<h3 className="SummonName">{summon?.name[locale]}</h3> <h3 className={styles.name}>{summon?.name[locale]}</h3>
</div> </div>
{searchModal()} {searchModal()}
</> </>

18
components/weapon/WeaponUnit/index.module.scss
View file

@ -1,4 +1,4 @@
.WeaponUnit { .unit {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -65,20 +65,20 @@
} }
} }
&.grid { &.weapon {
.WeaponImage { .image {
list-style-type: none; list-style-type: none;
width: 100%; width: 100%;
height: auto; height: auto;
.Awakening { .awakening {
width: 30%; width: 30%;
height: auto; height: auto;
top: 14%; top: 14%;
left: -3.5%; left: -3.5%;
} }
.Modifiers > .Skills { .modifiers > .skills {
bottom: 12%; bottom: 12%;
left: -3.5%; left: -3.5%;
@ -112,7 +112,7 @@
text-align: center; text-align: center;
} }
.WeaponImage { .image {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
border-radius: $unit; border-radius: $unit;
@ -128,14 +128,14 @@
fill: var(--icon-secondary-hover); fill: var(--icon-secondary-hover);
} }
.Awakening { .awakening {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
} }
.Modifiers { .modifiers {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
width: 100%; width: 100%;
@ -143,7 +143,7 @@
position: absolute; position: absolute;
z-index: 3; z-index: 3;
.Skills { .skills {
display: flex; display: flex;
gap: $unit-fourth; gap: $unit-fourth;
justify-content: flex-end; justify-content: flex-end;

32
components/weapon/WeaponUnit/index.tsx
View file

@ -60,12 +60,12 @@ const WeaponUnit = ({
// Classes // Classes
const classes = classNames({ const classes = classNames({
WeaponUnit: true, [styles.unit]: true,
mainhand: unitType == 0, [styles.mainhand]: unitType == 0,
grid: unitType == 1, [styles.weapon]: unitType == 1,
editable: editable, [styles.editable]: editable,
filled: gridWeapon !== undefined, [styles.filled]: gridWeapon !== undefined,
empty: gridWeapon == undefined, [styles.empty]: gridWeapon == undefined,
}) })
const buttonClasses = classNames({ const buttonClasses = classNames({
@ -197,7 +197,7 @@ const WeaponUnit = ({
return ( return (
<img <img
alt={`${awakening.type.name[locale]} Lv${gridWeapon.awakening.level}`} alt={`${awakening.type.name[locale]} Lv${gridWeapon.awakening.level}`}
className="Awakening" className={styles.awakening}
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/${gridWeapon.awakening.type.slug}.png`} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/${gridWeapon.awakening.type.slug}.png`}
/> />
) )
@ -229,7 +229,7 @@ const WeaponUnit = ({
<img <img
alt={altText} alt={altText}
key={altText} key={altText}
className="Skill" className={styles.skill}
src={`${baseUrl}${filename}`} src={`${baseUrl}${filename}`}
/> />
) )
@ -288,7 +288,7 @@ const WeaponUnit = ({
<img <img
alt={altText} alt={altText}
key={altText} key={altText}
className="Skill" className={styles.skill}
src={`${baseUrl}${filename}`} src={`${baseUrl}${filename}`}
/> />
) )
@ -362,7 +362,7 @@ const WeaponUnit = ({
<img <img
alt={altText} alt={altText}
key={altText} key={altText}
className="Skill" className={styles.skill}
src={`${baseUrl}${filename}`} src={`${baseUrl}${filename}`}
/> />
) )
@ -401,7 +401,7 @@ const WeaponUnit = ({
<img <img
alt={altText} alt={altText}
key={altText} key={altText}
className="Skill" className={styles.skill}
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`}
/> />
) )
@ -516,10 +516,10 @@ const WeaponUnit = ({
) )
const content = ( const content = (
<div className="WeaponImage" onClick={openSearchModal}> <div className={styles.image} onClick={openSearchModal}>
<div className="Modifiers"> <div className={styles.modifiers}>
{awakeningImage()} {awakeningImage()}
<div className="Skills"> <div className={styles.skills}>
{axImages()} {axImages()}
{telumaImages()} {telumaImages()}
{opusImages()} {opusImages()}
@ -528,7 +528,7 @@ const WeaponUnit = ({
</div> </div>
{image} {image}
{editable ? ( {editable ? (
<span className="icon"> <span className={styles.icon}>
<PlusIcon /> <PlusIcon />
</span> </span>
) : ( ) : (
@ -564,7 +564,7 @@ const WeaponUnit = ({
) : ( ) : (
'' ''
)} )}
<h3 className="WeaponName">{weapon?.name[locale]}</h3> <h3 className={styles.name}>{weapon?.name[locale]}</h3>
</div> </div>
{searchModal()} {searchModal()}
</> </>