krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

tightening up spacing on buyModal, fixing footer

Browse Source
This commit is contained in:
CuriousMagpie
2023-03-22 13:15:11 -04:00
parent bfc13bc21b
commit 83dcf8d56a
3 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/client/src/components/shops/balanceInfo.vue
View File

@@ -22,10 +22,11 @@
@import '~@/assets/scss/colors.scss'; @import '~@/assets/scss/colors.scss';
span { span {
font-weight: bold; font-size: 0.75rem;
font-size: 12px;
line-height: 1.33; line-height: 1.33;
color: $gray-200; color: $gray-100;
margin-bottom: 16px;
margin-top: -4px;
display: inline-block; display: inline-block;
} }

8
website/client/src/components/shops/buyModal.vue
View File

@@ -221,11 +221,11 @@
</div> </div>
<div <div
slot="modal-footer" slot="modal-footer"
class="d-flex" class="clearfix"
> >
<span class="balance mr-auto">{{ $t('yourBalance') }}</span> <span class="balance float-left">{{ $t('yourBalance') }}</span>
<balanceInfo <balanceInfo
class="ml-auto balance" class="float-right"
:currency-needed="getPriceClass()" :currency-needed="getPriceClass()"
:amount-needed="item.value" :amount-needed="item.value"
/> />
@@ -455,7 +455,7 @@
} }
&.gold { &.gold {
color: $gold-color; color: $yellow-5;
} }
&.hourglasses { &.hourglasses {

34
website/client/src/components/shops/market/sellModal.vue
View File

@@ -62,12 +62,12 @@
@updateQuantity="selectedAmountToSell = $event" @updateQuantity="selectedAmountToSell = $event"
/> />
</div> </div>
<div> <div class="total-row">
<span class="total-text"> <span class="total-text">
{{ $t('sendTotal') }} {{ $t('sendTotal') }}
</span> </span>
<span <span
class="svg-icon inline icon-20" class="svg-icon inline icon-24"
aria-hidden="true" aria-hidden="true"
v-html="icons.gold" v-html="icons.gold"
></span> ></span>
@@ -90,7 +90,9 @@
class="clearfix" class="clearfix"
> >
<span class="balance float-left">{{ $t('yourBalance') }}</span> <span class="balance float-left">{{ $t('yourBalance') }}</span>
<balanceInfo class="float-right" /> <balanceInfo
class="float-right"
/>
</div> </div>
</b-modal> </b-modal>
</template> </template>
@@ -112,12 +114,12 @@
.content { .content {
text-align: center; text-align: center;
} }
.title { .title {
color: $gray-10; color: $gray-10;
font-size: 1.25rem; font-size: 1.25rem;
margin-top: 28px;
} }
.inner-content { .inner-content {
@@ -141,6 +143,10 @@
z-index: 1; z-index: 1;
} }
.item-wrapper {
margin-top: -10px;
}
.item { .item {
width: 141px; width: 141px;
height: 147px; height: 147px;
@@ -201,6 +207,7 @@
.item-cost { .item-cost {
padding-bottom: 16px; padding-bottom: 16px;
padding-top: 8px;
} }
.cost { .cost {
@@ -220,28 +227,36 @@
} }
} }
.total-row {
padding-top: 4px;
padding-bottom: 4px;
}
.total { .total {
font-size: 0.825rem; font-size: 0.875rem;
line-height: 1.71; line-height: 1.71;
font-weight: bold; font-weight: bold;
&.gold { &.gold {
color: $gold-color; color: $yellow-5;
margin-left: -4px;
} }
} }
.total-text { .total-text {
color: $gray-50;
font-size: 0.825rem; font-size: 0.825rem;
line-height: 1.71;
font-weight: bold; font-weight: bold;
line-height: 1.71;
height: 24px; height: 24px;
width: 37px; width: 37px;
padding-right: 4px; padding-right: 4px;
// margin-left: -4px;
} }
button.btn.btn-primary { button.btn.btn-primary {
margin-top: 24px; margin-top: 16px;
margin-bottom: 24px; margin-bottom: 0px;
} }
.balance { .balance {
@@ -263,6 +278,7 @@
.how-many-to-sell { .how-many-to-sell {
margin-bottom: 16px; margin-bottom: 16px;
margin-top: 8px;
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: bold; font-weight: bold;