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

Fix CharacterGrid

Browse source
This commit is contained in:
Justin Edmund 2022-12-28 22:18:02 -08:00
parent 7bc872644a
commit 7e1c65a862
2 changed files with 11 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/CharacterGrid/index.scss
View file

@ -7,7 +7,9 @@
} }
#grid_characters { #grid_characters {
display: flex; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: $unit;
margin: 0; margin: 0;
padding: 0; padding: 0;
max-width: 761px; max-width: 761px;
@ -18,14 +20,6 @@
width: 100%; width: 100%;
} }
& > * {
margin-right: $unit * 3;
@include breakpoint(tablet) {
margin-right: inherit;
}
}
& > li:last-child { & > li:last-child {
margin: 0; margin: 0;
} }

15
components/CharacterUnit/index.scss
View file

@ -1,9 +1,10 @@
.CharacterUnit { .CharacterUnit {
align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc($unit / 2); gap: calc($unit / 2);
min-height: 320px; // min-height: 320px;
max-width: 200px; // max-width: 200px;
margin-bottom: $unit * 4; margin-bottom: $unit * 4;
&.editable .CharacterImage:hover { &.editable .CharacterImage:hover {
@ -35,6 +36,10 @@
max-width: 131px; max-width: 131px;
text-align: center; text-align: center;
word-wrap: normal; word-wrap: normal;
@include breakpoint(phone) {
font-size: $font-small;
}
} }
img { img {
@ -54,11 +59,7 @@
overflow: hidden; overflow: hidden;
transition: all 0.18s ease-in-out; transition: all 0.18s ease-in-out;
height: auto; height: auto;
width: 131px; // width: 131px;
@include breakpoint(tablet) {
width: 17vw;
}
&:hover .icon svg { &:hover .icon svg {
fill: var(--icon-secondary-hover); fill: var(--icon-secondary-hover);