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

Make SummonGrid responsive

Browse source
This commit is contained in:
Justin Edmund 2022-02-03 00:10:15 -08:00
parent bbc97d8e55
commit 6ea13cad82
3 changed files with 42 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/ExtraSummons/index.scss
View file

@ -10,6 +10,12 @@
position: relative; position: relative;
left: 9px; left: 9px;
@media (max-width: $medium-screen) {
left: auto;
max-width: auto;
width: 100%;
}
& > span { & > span {
color: #825B39; color: #825B39;
display: flex; display: flex;

1
components/SummonGrid/index.scss
View file

@ -23,7 +23,6 @@
#grid_summons > li { #grid_summons > li {
list-style: none; list-style: none;
min-height: 180px;
} }
#ExtraSummons #grid_summons > li { #ExtraSummons #grid_summons > li {

59
components/SummonUnit/index.scss
View file

@ -3,6 +3,42 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
&.main .SummonImage,
&.friend .SummonImage {
aspect-ratio: 182 / 315;
width: 182px;
height: auto;
@media (max-width: $medium-screen) {
width: 20.3vw;
}
}
&.grid {
// max-width: 148px;
// min-height: 141px;
min-height: 180px;
@media (max-width: $medium-screen) {
min-height: 16.5vw;
}
.SummonImage {
aspect-ratio: 148 / 111;
list-style-type: none;
width: 148px;
height: auto;
@media (max-width: $medium-screen) {
width: 20vw;
}
}
}
&.friend {
margin-right: 0;
}
.SummonImage { .SummonImage {
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
@ -67,26 +103,3 @@
z-index: 2; z-index: 2;
} }
} }
/* Mainhand */
.SummonUnit.friend {
margin-right: 0;
}
.SummonUnit.main .SummonImage,
.SummonUnit.friend .SummonImage {
height: 315px;
width: 182px;
}
/* Grid */
.SummonUnit.grid {
max-width: 148px;
min-height: 141px;
}
.SummonUnit.grid .SummonImage {
list-style-type: none;
height: 111px;
width: 148px;
}