Compactify level/reset/copy box, touch up mobile UI

This commit is contained in:
hppeng 2022-07-25 00:41:02 -07:00
parent f441236531
commit dbc69ab874
2 changed files with 25 additions and 12 deletions

View file

@ -45,7 +45,7 @@
<div class="col-xl-6"> <div class="col-xl-6">
<div class="row row-cols-1 mb-3 gy-3"> <div class="row row-cols-1 mb-3 gy-3">
<div class="col"> <div class="col">
<div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 gy-2 justify-content-center"> <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input">
<div class="col-auto rounded order-xl-0 order-0"> <div class="col-auto rounded order-xl-0 order-0">
<div class="row h-100 px-1" id="helmet-dropdown"> <div class="row h-100 px-1" id="helmet-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
@ -286,7 +286,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1 level-input">
<div class="row h-100 px-1"> <div class="row h-100 px-1">
<div class="col"> <div class="col">
<div class="row align-items-center justify-content-left"> <div class="row align-items-center justify-content-left">
@ -301,8 +301,10 @@
</div> </div>
</div> </div>
<div class="row align-items-left justify-content-left my-1"> <div class="row align-items-left justify-content-left my-1">
<button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=copy-button onclick="copyBuild()">Copy short</button> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button"
<button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button> id=copy-button onclick="copyBuild()">Copy short</button>
<button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button"
id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -106,11 +106,9 @@ input.equipment-input {
font-size: var(--scaled-fontsize); font-size: var(--scaled-fontsize);
} }
.my-container { .equipment-input {
position: fixed; /* Stay in place */ --bs-gutter-y: 1rem;
left: var(--sidebar-width); --bs-gutter-x: 3rem
overflow-y: scroll;
height: 100%;
} }
.text-right { .text-right {
@ -176,7 +174,7 @@ input.equipment-input {
} }
.scaled-item-icon img { .scaled-item-icon img {
width: 5.5rem; width: 6rem;
} }
.scaled-bckgrd { .scaled-bckgrd {
@ -185,7 +183,7 @@ input.equipment-input {
} }
.scaled-bckgrd img { .scaled-bckgrd img {
width: 6.5rem; width: 7rem;
} }
.overall-box { .overall-box {
@ -200,6 +198,13 @@ input.equipment-input {
padding-left: var(--sidebar-width); padding-left: var(--sidebar-width);
max-width: 100%; max-width: 100%;
} }
.equipment-input {
--bs-gutter-y: 0.5rem;
--bs-gutter-x: 1.5rem;
}
.level-input {
margin-top: 0
}
.scaled-font { .scaled-font {
font-size: 1rem; font-size: 1rem;
} }
@ -258,7 +263,13 @@ input.equipment-input {
padding-left: var(--sidebar-width); padding-left: var(--sidebar-width);
max-width: 100%; max-width: 100%;
} }
.equipment-input {
--bs-gutter-y: 0.5rem;
--bs-gutter-x: 1.5rem
}
.level-input {
margin-top: 0
}
.scaled-font { .scaled-font {
font-size: 1rem; font-size: 1rem;
} }