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

summon grid: remove labels, align grid rows with main/friend summons

Browse source
This commit is contained in:
Justin Edmund 2025-12-22 23:32:50 -08:00
parent 9a34e19d48
commit ac583c3382
1 changed files with 7 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/grids/SummonGrid.svelte
View file

@ -38,12 +38,10 @@
<div class="wrapper"> <div class="wrapper">
<div class="grid"> <div class="grid">
<div class="LabeledUnit"> <div class="LabeledUnit">
<div class="label">Main</div>
<SummonUnit item={main} position={-1} /> <SummonUnit item={main} position={-1} />
</div> </div>
<section> <section>
<div class="label">Summons</div>
<ul class="summons"> <ul class="summons">
{#each subSummonSlots as summon, i} {#each subSummonSlots as summon, i}
<li <li
@ -77,7 +75,6 @@
</section> </section>
<div class="LabeledUnit"> <div class="LabeledUnit">
<div class="label friend">Friend</div>
<SummonUnit item={friend} position={6} /> <SummonUnit item={friend} position={6} />
</div> </div>
</div> </div>
@ -95,6 +92,7 @@
grid-template-columns: 1.17fr 2fr 1.17fr; grid-template-columns: 1.17fr 2fr 1.17fr;
gap: $unit-3x; gap: $unit-3x;
justify-content: center; justify-content: center;
align-items: stretch;
margin: 0 auto; margin: 0 auto;
max-width: $grid-width; max-width: $grid-width;
@ -106,35 +104,20 @@
gap: $unit; gap: $unit;
} }
& .label {
color: $grey-55;
font-size: $font-tiny;
font-weight: $medium;
margin-bottom: $unit;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@include breakpoint(phone) {
&.friend {
max-width: 78px;
}
}
}
.summons { .summons {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto);
gap: $unit-3x; align-content: space-between;
column-gap: $unit-3x;
height: 100%;
@include breakpoint(tablet) { @include breakpoint(tablet) {
gap: $unit-2x; column-gap: $unit-2x;
} }
@include breakpoint(phone) { @include breakpoint(phone) {
gap: $unit; column-gap: $unit;
} }
& > li { & > li {