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

Make CharacterGrid responsive

Browse source
This commit is contained in:
Justin Edmund 2022-02-02 23:58:01 -08:00
parent d5332ccee5
commit bbc97d8e55
3 changed files with 71 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/CharacterGrid/index.scss
View file

@ -5,15 +5,21 @@
#grid_characters { #grid_characters {
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 761px; max-width: 761px;
@media (max-width: $medium-screen) {
justify-content: space-between;
width: 100%;
}
& > * { & > * {
margin-bottom: 24px; margin-right: $unit * 3;
margin-right: 24px;
@media (max-width: $medium-screen) {
margin-right: inherit;
}
} }
& > li:last-child { & > li:last-child {

114
components/CharacterUnit/index.scss
View file

@ -3,68 +3,74 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
max-width: 200px; max-width: 200px;
}
.CharacterUnit .CharacterImage { &.editable .CharacterImage:hover {
background: white; border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
border-radius: 8px; cursor: pointer;
display: flex; transform: $scale-tall;
align-items: center; }
justify-content: center;
overflow: hidden;
transition: all 0.18s ease-in-out;
height: 268px;
width: 131px;
}
.CharacterUnit.editable .CharacterImage:hover { &.filled h3 {
border: 1px solid rgba(0, 0, 0, 0.1); display: block;
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; }
cursor: pointer;
transform: $scale-tall;
}
.CharacterUnit.filled h3 { &.filled ul {
display: block; display: flex;
} }
.CharacterUnit.filled ul { h3,
display: flex; ul {
} display: none;
}
.CharacterUnit h3, h3 {
.CharacterUnit ul { color: #333;
display: none; font-size: $font-regular;
} font-weight: 500;
margin: 0;
max-width: 131px;
text-align: center;
word-wrap: normal;
}
.CharacterUnit h3 { img {
color: #333; position: relative;
font-size: $font-regular; width: 100%;
font-weight: 500; z-index: 2;
margin: 0; }
max-width: 131px;
text-align: center;
word-wrap: normal;
}
.CharacterUnit img {
position: relative;
width: 100%;
z-index: 2;
}
.CharacterImage .icon { .CharacterImage {
position: absolute; aspect-ratio: 131 / 238;
height: 20px; background: white;
width: 20px; border: 1px solid rgba(0, 0, 0, 0);
z-index: 1; border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.18s ease-in-out;
height: auto;
width: 131px;
svg { @media (max-width: $medium-screen) {
fill: #c9c9c9; width: 17vw;
}
&:hover .icon {
color: #555;
}
.icon {
position: absolute;
height: 20px;
width: 20px;
z-index: 1;
svg {
fill: #c9c9c9;
}
}
} }
} }
.CharacterImage:hover .icon {
color: #555;
}

4
components/WeaponGrid/index.scss
View file

@ -2,10 +2,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
@media (max-width: $medium-screen) {
}
.grid_weapons { .grid_weapons {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;