Merge branch 'increment-component' into release
This commit is contained in:
SabreCat
@@ -126,7 +126,7 @@
|
||||
|
||||
<!-- the word "total" -->
|
||||
<div class="buy-gem-total">
|
||||
{{ $t('sendGiftTotal') }}
|
||||
{{ $t('sendTotal') }}
|
||||
</div>
|
||||
|
||||
<!-- the actual dollar amount -->
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="item-cost">
|
||||
<span
|
||||
class="cost"
|
||||
:class="getPriceClass()"
|
||||
>
|
||||
<span
|
||||
class="svg-icon inline icon-24"
|
||||
aria-hidden="true"
|
||||
v-html="icons[getPriceClass()]"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
:class="getPriceClass()"
|
||||
>{{ item.value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
@import '~@/assets/scss/mixins.scss';
|
||||
|
||||
.item-cost {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
height: 40px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
vertical-align: middle;
|
||||
|
||||
&.gems {
|
||||
color: $gems-color;
|
||||
border-radius: 20px;
|
||||
padding: 8px 20px 8px 20px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: rgba(36, 204, 143, 0.15);
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $gold-color;
|
||||
border-radius: 20px;
|
||||
padding: 8px 20px 8px 20px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: rgba(255, 190, 93, 0.15);
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
color: $hourglass-color;
|
||||
border-radius: 20px;
|
||||
padding: 8px 20px 8px 20px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: rgba(41, 149, 205, 0.15);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gems: svgGem,
|
||||
}),
|
||||
selectedAmountToBuy: 1,
|
||||
selectedAmount: 1,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getPriceClass () {
|
||||
if (this.priceType && this.icons[this.priceType]) {
|
||||
return this.priceType;
|
||||
} if (this.item.currency && this.icons[this.item.currency]) {
|
||||
return this.item.currency;
|
||||
}
|
||||
return 'gold';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="d-flex flex-row align-items-center justify-content-center number-increment">
|
||||
<!-- buy modal -->
|
||||
<div
|
||||
class="gray-circle"
|
||||
@click="quantity <= 0
|
||||
? quantity = 0
|
||||
: quantity--"
|
||||
>
|
||||
<div
|
||||
class="icon-negative"
|
||||
v-html="icons.svgNegative"
|
||||
></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="align-items-center">
|
||||
</div>
|
||||
<input
|
||||
v-model="quantity"
|
||||
class="form-control alignment"
|
||||
step="1"
|
||||
type="number"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="gray-circle"
|
||||
@click="quantity++"
|
||||
>
|
||||
<div
|
||||
class="icon-positive"
|
||||
v-html="icons.svgPositive"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.number-increment {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.alignment {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 94px;
|
||||
height: 32px;
|
||||
width: 48px;
|
||||
margin: 0px 16px 0px 16px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border: solid 1px $gray-400;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.gray-circle {
|
||||
border-radius: 100%;
|
||||
border: solid 2px $gray-300;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $purple-300;
|
||||
}
|
||||
}
|
||||
|
||||
.gray-circle:hover{
|
||||
.icon-positive, .icon-negative {
|
||||
& ::v-deep svg path {
|
||||
fill: $purple-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-positive, .icon-negative {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 4px auto;
|
||||
|
||||
& ::v-deep svg path {
|
||||
fill: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// icons
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgPositive from '@/assets/svg/positive.svg';
|
||||
import svgNegative from '@/assets/svg/negative.svg';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
svgGem,
|
||||
svgGold,
|
||||
svgPositive,
|
||||
svgNegative,
|
||||
}),
|
||||
item: { },
|
||||
quantity: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
quantity () {
|
||||
this.$emit('updateQuantity', this.quantity);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setDefaults () {
|
||||
this.input = 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -22,10 +22,11 @@
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
color: $gray-100;
|
||||
margin-bottom: 16px;
|
||||
margin-top: -4px;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</span>
|
||||
<div>
|
||||
<span
|
||||
class="svg-icon icon-12 close-icon"
|
||||
class="svg-icon close-icon icon-16 color"
|
||||
aria-hidden="true"
|
||||
tabindex="0"
|
||||
@click="hideDialog()"
|
||||
@@ -45,6 +45,13 @@
|
||||
:sprites-margin="'0px auto 0px -24px'"
|
||||
/>
|
||||
</div>
|
||||
<item
|
||||
v-else-if="item.key === 'gem'"
|
||||
class="flat bordered-item"
|
||||
:item="item"
|
||||
:item-content-class="item.class"
|
||||
:show-popover="false"
|
||||
/>
|
||||
<item
|
||||
v-else-if="item.key != 'gem'"
|
||||
class="flat bordered-item"
|
||||
@@ -53,10 +60,20 @@
|
||||
:show-popover="false"
|
||||
/>
|
||||
</slot>
|
||||
<div
|
||||
v-if="!showAvatar && user.items[item.purchaseType]"
|
||||
class="owned"
|
||||
:class="totalOwned"
|
||||
>
|
||||
<!-- eslint-disable-next-line max-len -->
|
||||
<span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
|
||||
</div>
|
||||
<h4 class="title">
|
||||
{{ itemText }}
|
||||
</h4>
|
||||
<div v-html="itemNotes"></div>
|
||||
<div class="item-notes">
|
||||
{{ itemNotes }}
|
||||
</div>
|
||||
<slot
|
||||
name="additionalInfo"
|
||||
:item="item"
|
||||
@@ -69,60 +86,61 @@
|
||||
/>
|
||||
</slot>
|
||||
<div
|
||||
v-if="item.value > 0"
|
||||
v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
|
||||
class="purchase-amount"
|
||||
>
|
||||
<div
|
||||
v-if="showAmountToBuy(item)"
|
||||
class="how-many-to-buy"
|
||||
>
|
||||
<strong>{{ $t('howManyToBuy') }}</strong>
|
||||
</div>
|
||||
<div v-if="showAmountToBuy(item)">
|
||||
<div class="box">
|
||||
<input
|
||||
v-model.number="selectedAmountToBuy"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
>
|
||||
</div>
|
||||
<span :class="{'notEnough': notEnoughCurrency}">
|
||||
<!-- this is where the pretty item cost element lives -->
|
||||
<div class="item-cost">
|
||||
<span
|
||||
class="cost"
|
||||
:class="getPriceClass()"
|
||||
>
|
||||
<span
|
||||
class="svg-icon inline icon-32"
|
||||
class="svg-icon inline icon-24"
|
||||
aria-hidden="true"
|
||||
v-html="icons[getPriceClass()]"
|
||||
></span>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="cost"
|
||||
:class="getPriceClass()"
|
||||
>{{ item.value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="d-flex align-items-middle"
|
||||
v-if="showAmountToBuy(item)"
|
||||
class="how-many-to-buy"
|
||||
>
|
||||
<span
|
||||
class="svg-icon inline icon-32 ml-auto my-auto"
|
||||
aria-hidden="true"
|
||||
v-html="icons[getPriceClass()]"
|
||||
></span>
|
||||
<span
|
||||
class="cost mr-auto my-auto"
|
||||
:class="getPriceClass()"
|
||||
>{{ item.value }}</span>
|
||||
{{ $t('howManyToBuy') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="showAmountToBuy(item)"
|
||||
>
|
||||
<number-increment
|
||||
class="number-increment"
|
||||
@updateQuantity="selectedAmountToBuy = $event"
|
||||
/>
|
||||
<div
|
||||
:class="{'notEnough': notEnoughCurrency}"
|
||||
class="total"
|
||||
>
|
||||
<span class="total-text">{{ $t('sendTotal') }}</span>
|
||||
<span
|
||||
class="svg-icon total icon-24"
|
||||
aria-hidden="true"
|
||||
v-html="icons[getPriceClass()]"
|
||||
></span>
|
||||
<span
|
||||
class="total-text"
|
||||
:class="getPriceClass()"
|
||||
>{{ item.value * selectedAmountToBuy }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.key === 'gem'"
|
||||
class="gems-left"
|
||||
v-if="item.key === 'gem' && gemsLeft < 1"
|
||||
class="no-more-gems"
|
||||
>
|
||||
<strong v-if="gemsLeft > 0">{{ gemsLeft }} {{ $t('gemsRemaining') }}</strong>
|
||||
<strong v-if="gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
|
||||
</div>
|
||||
<div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
|
||||
{{ $t('notEnoughGemsToBuy') }}
|
||||
</div>
|
||||
<div
|
||||
@@ -147,7 +165,7 @@
|
||||
{{ $t('viewSubscriptions') }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
|
||||
class="btn btn-primary"
|
||||
:disabled="item.key === 'gem' && gemsLeft === 0 ||
|
||||
attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
|
||||
@@ -165,6 +183,7 @@
|
||||
<countdown-banner
|
||||
v-if="item.event && item.owned == null"
|
||||
:end-date="endDate"
|
||||
class="limitedTime available"
|
||||
/>
|
||||
<div
|
||||
v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
|
||||
@@ -179,12 +198,31 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="modal-footer"
|
||||
class="d-flex"
|
||||
v-if="item.key === 'gem'"
|
||||
class="d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<span class="balance mr-auto">{{ $t('yourBalance') }}</span>
|
||||
<div
|
||||
v-if="gemsLeft > 0"
|
||||
class="gems-left d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<strong>{{ $t('monthlyGems') }} </strong>
|
||||
{{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="gemsLeft === 0"
|
||||
class="out-of-gems-banner d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<strong>{{ $t('monthlyGems') }} </strong>
|
||||
{{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="modal-footer"
|
||||
class="clearfix"
|
||||
>
|
||||
<span class="user-balance float-left">{{ $t('yourBalance') }}</span>
|
||||
<balanceInfo
|
||||
class="ml-auto"
|
||||
class="currency-totals"
|
||||
:currency-needed="getPriceClass()"
|
||||
:amount-needed="item.value"
|
||||
/>
|
||||
@@ -200,11 +238,47 @@
|
||||
@include centeredModal();
|
||||
|
||||
.modal-body {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 48px;
|
||||
background-color: $gray-700;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
display: block;
|
||||
margin: 24px 0 0 0;
|
||||
padding: 16px 24px;
|
||||
align-content: center;
|
||||
|
||||
.user-balance {
|
||||
width: 150px;
|
||||
height: 16px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: $gray-100;
|
||||
margin-bottom: 16px;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.currency-totals {
|
||||
margin-right: -8px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 330px;
|
||||
width: 448px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.badge-dialog {
|
||||
left: -8px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -212,8 +286,71 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.owned {
|
||||
height: 32px;
|
||||
width: 141px;
|
||||
margin-top: -36px;
|
||||
margin-left: 153px;
|
||||
padding-top: 6px;
|
||||
background-color: $gray-600;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.owned-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
}
|
||||
|
||||
.user-amount {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 141px;
|
||||
height: 147px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
transform: scale(1.45, 1.45);
|
||||
top: -25.67px;
|
||||
left: 1px;
|
||||
|
||||
&.shop_gem {
|
||||
transform: scale(1.45, 1.45);
|
||||
top: -2px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 28px;
|
||||
color: $gray-10;
|
||||
font-size: 1.25rem;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.item-notes {
|
||||
margin-top: 8px;
|
||||
padding-left: 48.5px;
|
||||
padding-right: 48.5px;
|
||||
line-height: 1.71;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
@@ -221,15 +358,22 @@
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
margin: 33px auto auto;
|
||||
width: 282px;
|
||||
margin: 32px auto auto;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.purchase-amount {
|
||||
margin-top: 24px;
|
||||
margin-top: 0px;
|
||||
|
||||
.how-many-to-buy {
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.number-increment {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.box {
|
||||
@@ -255,31 +399,105 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-more-gems {
|
||||
color: $yellow-5;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.33;
|
||||
margin: 16px 48px 0 48px;
|
||||
}
|
||||
|
||||
span.svg-icon.inline.icon-32 {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
// for cost icon of a single item
|
||||
span.svg-icon.inline.icon-24 {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
// for the total user cost
|
||||
span.svg-icon.total.icon-24 {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-left: 6px;
|
||||
margin-right: 8px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
vertical-align: middle;
|
||||
span.svg-icon.icon-16 {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: $gray-200;
|
||||
stroke-width: 0px;
|
||||
|
||||
&:hover {
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-group {
|
||||
margin: 32px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.71;
|
||||
font-size: 0.875;
|
||||
}
|
||||
|
||||
.attributesGrid {
|
||||
margin-top: 28px;
|
||||
border-radius: 2px;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
.item-cost {
|
||||
display: inline-flex;
|
||||
margin: 16px 0;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
width: 28px;
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
|
||||
vertical-align: middle;
|
||||
padding: 6px 20px;
|
||||
line-height: 1.4;
|
||||
border-radius: 20px;
|
||||
|
||||
&.gems {
|
||||
color: $gems-color;
|
||||
color: $green-10;
|
||||
background-color: rgba(36, 204, 143, 0.15);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $gold-color;
|
||||
color: $yellow-5;
|
||||
background-color: rgba(255, 190, 93, 0.15);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
color: $hourglass-color;
|
||||
background-color: rgba(41, 149, 205, 0.15);
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
padding-top: 2px;
|
||||
margin-top: 4px;
|
||||
|
||||
&.gems {
|
||||
color: $green-10;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
@@ -287,62 +505,84 @@
|
||||
}
|
||||
}
|
||||
|
||||
.total-text {
|
||||
color: $gray-50;
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.71;
|
||||
|
||||
&.gems {
|
||||
color: $green-10;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
color: $hourglass-color;
|
||||
}
|
||||
}
|
||||
|
||||
button.btn.btn-primary {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
min-width: 6rem;
|
||||
margin-top: 16px;
|
||||
padding: 4px 16px;
|
||||
height: 32px;
|
||||
|
||||
&:focus {
|
||||
border: 2px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
.balance {
|
||||
width: 74px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
}
|
||||
.notEnough {
|
||||
pointer-events: none;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 48px;
|
||||
background-color: $gray-700;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
.free-rebirth {
|
||||
background-color: $yellow-5;
|
||||
color: $white;
|
||||
height: 2rem;
|
||||
line-height: 16px;
|
||||
margin: auto -1rem -1rem;
|
||||
}
|
||||
|
||||
.notEnough {
|
||||
pointer-events: none;
|
||||
opacity: 0.55;
|
||||
}
|
||||
// .pt-015 {
|
||||
// padding-top: 0.15rem;
|
||||
// }
|
||||
|
||||
.attributesGrid {
|
||||
margin-top: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: $gray-500;
|
||||
|
||||
margin: 10px 0 24px;
|
||||
}
|
||||
|
||||
.gems-left {
|
||||
margin-top: .5em;
|
||||
height: 32px;
|
||||
background-color: $green-100;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 24px;
|
||||
color: $green-1;
|
||||
width: 100%;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
|
||||
.free-rebirth {
|
||||
background-color: $yellow-5;
|
||||
.out-of-gems-banner {
|
||||
height: 32px;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 24px;
|
||||
background-color: $yellow-100;
|
||||
color: $yellow-1;
|
||||
width: 100%;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
|
||||
.limitedTime {
|
||||
height: 32px;
|
||||
width: 446px;
|
||||
font-size: 0.75rem;
|
||||
margin: 24px 0 0 0;
|
||||
background-color: $purple-300;
|
||||
color: $white;
|
||||
height: 2rem;
|
||||
line-height: 16px;
|
||||
margin: auto -1rem -1rem;
|
||||
}
|
||||
|
||||
.pt-015 {
|
||||
padding-top: 0.15rem;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -370,6 +610,8 @@ import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgClock from '@/assets/svg/clock.svg';
|
||||
import svgWhiteClock from '@/assets/svg/clock-white.svg';
|
||||
import svgPositive from '@/assets/svg/positive.svg';
|
||||
import svgNegative from '@/assets/svg/negative.svg';
|
||||
|
||||
import BalanceInfo from './balanceInfo.vue';
|
||||
import PinBadge from '@/components/ui/pinBadge';
|
||||
@@ -377,6 +619,7 @@ import CountdownBanner from './countdownBanner';
|
||||
import currencyMixin from './_currencyMixin';
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import numberIncrement from '@/components/shared/numberIncrement';
|
||||
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
@@ -407,14 +650,17 @@ export default {
|
||||
Avatar,
|
||||
PinBadge,
|
||||
CountdownBanner,
|
||||
numberIncrement,
|
||||
},
|
||||
mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
priceType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
withPin: {
|
||||
type: Boolean,
|
||||
@@ -433,10 +679,14 @@ export default {
|
||||
hourglasses: svgHourglasses,
|
||||
clock: svgClock,
|
||||
whiteClock: svgWhiteClock,
|
||||
positive: svgPositive,
|
||||
negative: svgNegative,
|
||||
}),
|
||||
|
||||
selectedAmountToBuy: 1,
|
||||
selectedAmount: 1,
|
||||
isPinned: false,
|
||||
quantity: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -474,6 +724,11 @@ export default {
|
||||
return planGemLimits.convCap
|
||||
+ this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
|
||||
},
|
||||
totalGems () {
|
||||
if (!this.user.purchased.plan) return 0;
|
||||
return planGemLimits.convCap
|
||||
+ this.user.purchased.plan.consecutive.gemCapExtra;
|
||||
},
|
||||
attemptingToPurchaseMoreGemsThanAreLeft () {
|
||||
if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
|
||||
return false;
|
||||
@@ -490,6 +745,9 @@ export default {
|
||||
endDate () {
|
||||
return moment(this.item.event.end);
|
||||
},
|
||||
totalOwned () {
|
||||
return this.user.items[this.item.purchaseType][this.item.key] || 0;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
item: function itemChanged () {
|
||||
@@ -500,7 +758,9 @@ export default {
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.$emit('change', $event);
|
||||
this.selectedAmountToBuy = 1;
|
||||
},
|
||||
|
||||
buyItem () {
|
||||
// @TODO: I think we should buying to the items.
|
||||
// Turn the items into classes, and use polymorphism
|
||||
@@ -597,6 +857,7 @@ export default {
|
||||
}
|
||||
},
|
||||
hideDialog () {
|
||||
this.selectedAmountToBuy = 1;
|
||||
this.$root.$emit('bv::hide::modal', 'buy-modal');
|
||||
},
|
||||
getPriceClass () {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
:hide-header="true"
|
||||
@change="onChange($event)"
|
||||
>
|
||||
<div class="close">
|
||||
<div>
|
||||
<span
|
||||
class="svg-icon inline icon-10"
|
||||
class="svg-icon close-icon icon-16 color"
|
||||
aria-hidden="true"
|
||||
@click="hideDialog()"
|
||||
v-html="icons.close"
|
||||
@@ -14,60 +14,73 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="item"
|
||||
class="content"
|
||||
class="content bordered-item"
|
||||
>
|
||||
<div class="inner-content">
|
||||
<item
|
||||
class="flat"
|
||||
class="flat bordered-item"
|
||||
:item="item"
|
||||
:item-content-class="itemContextToSell.itemClass"
|
||||
:show-popover="false"
|
||||
>
|
||||
<countBadge
|
||||
slot="itemBadge"
|
||||
:show="true"
|
||||
:count="itemContextToSell.itemCount"
|
||||
/>
|
||||
</item>
|
||||
/>
|
||||
<span class="owned">
|
||||
{{ $t('owned') }}: <span class="user-amount">{{ itemContextToSell.itemCount }}</span>
|
||||
</span>
|
||||
<h4 class="title">
|
||||
{{ itemContextToSell.itemName }}
|
||||
</h4>
|
||||
<div v-if="item.key === 'Saddle'">
|
||||
<div class="text">
|
||||
<div class="item-notes">
|
||||
{{ item.sellWarningNote() }}
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<div class="text">
|
||||
<div class="item-notes">
|
||||
{{ item.notes() }}
|
||||
</div>
|
||||
<div>
|
||||
<b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
|
||||
<div class="item-cost">
|
||||
<span class="cost gold">
|
||||
<span
|
||||
class="svg-icon inline icon-24"
|
||||
aria-hidden="true"
|
||||
v-html="icons.gold"
|
||||
></span>
|
||||
<span>{{ item.value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<b-input
|
||||
v-model="selectedAmountToSell"
|
||||
class="itemsToSell"
|
||||
type="number"
|
||||
:max="itemContextToSell.itemCount"
|
||||
min="1"
|
||||
step="1"
|
||||
@keyup.native="preventNegative($event)"
|
||||
/>
|
||||
<span
|
||||
class="svg-icon inline icon-32"
|
||||
class="how-many-to-sell"
|
||||
>
|
||||
{{ $t('howManyToSell') }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<number-increment
|
||||
@updateQuantity="selectedAmountToSell = $event"
|
||||
/>
|
||||
</div>
|
||||
<div class="total-row">
|
||||
<span class="total-text">
|
||||
{{ $t('sendTotal') }}
|
||||
</span>
|
||||
<span
|
||||
class="svg-icon total icon-24"
|
||||
aria-hidden="true"
|
||||
v-html="icons.gold"
|
||||
></span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
<span class="total-text gold">
|
||||
{{ item.value * selectedAmountToSell }}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="selectedAmountToSell > itemContextToSell.itemCount"
|
||||
@click="sellItems()"
|
||||
>
|
||||
{{ $t('sell') }}
|
||||
{{ $t('sellItems') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,8 +90,10 @@
|
||||
slot="modal-footer"
|
||||
class="clearfix"
|
||||
>
|
||||
<span class="balance float-left">{{ $t('yourBalance') }}</span>
|
||||
<balanceInfo class="float-right" />
|
||||
<span class="user-balance float-left">{{ $t('yourBalance') }}</span>
|
||||
<balanceInfo
|
||||
class="float-right currency-totals"
|
||||
/>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
@@ -95,51 +110,13 @@
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 330px;
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.inner-content {
|
||||
margin: 33px auto auto;
|
||||
width: 282px;
|
||||
}
|
||||
|
||||
span.svg-icon.inline.icon-32 {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
margin-left: 24px;
|
||||
margin-right: 8px;
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 28px;
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: #df911e;
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button.btn.btn-primary {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.balance {
|
||||
width: 74px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
.modal-body {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@@ -148,29 +125,215 @@
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
display: block;
|
||||
margin: 24px 0 0;
|
||||
padding: 16px 24px;
|
||||
align-content: center;
|
||||
|
||||
.user-balance {
|
||||
width: 150px;
|
||||
height: 16px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: $gray-100;
|
||||
margin-bottom: 16px;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.currency-totals {
|
||||
margin-right: -8px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.how-many-to-sell {
|
||||
margin-bottom: 16px;
|
||||
.content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
margin: 33px auto auto;
|
||||
width: 282px;
|
||||
}
|
||||
|
||||
.owned {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
background-color: $gray-600;
|
||||
padding: 8px 8px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
display: block;
|
||||
width: 141px;
|
||||
margin-left: 71px;
|
||||
margin-top: -48px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.user-amount {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 141px;
|
||||
height: 147px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
cursor: default;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
transform: scale(1.45, 1.45);
|
||||
top: -25px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $gray-10;
|
||||
font-size: 1.25rem;
|
||||
margin-top: 26px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.item-notes {
|
||||
margin-top: 12px;
|
||||
line-height: 1.71;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// for cost icon of a single item
|
||||
span.svg-icon.inline.icon-24 {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
// for the total user cost
|
||||
span.svg-icon.total.icon-24 {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-left: 6px;
|
||||
margin-right: 8px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
span.svg-icon.icon-16 {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: $gray-200;
|
||||
stroke-width: 0px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
.item-cost {
|
||||
display: inline-flex;
|
||||
margin: 16px 0;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
display: inline-block;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
padding: 6px 20px;
|
||||
line-height: 1.4;
|
||||
border-radius: 20px;
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
background-color: rgba(255, 190, 93, 0.15);
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.how-many-to-sell {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.number-increment {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 16px;
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
}
|
||||
}
|
||||
|
||||
.total-text {
|
||||
color: $gray-50;
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.71;
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
}
|
||||
}
|
||||
|
||||
button.btn.btn-primary {
|
||||
margin-top: 16px;
|
||||
padding: 4px 16px;
|
||||
height: 32px;
|
||||
|
||||
&:focus {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
.balance {
|
||||
width: 74px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgPositive from '@/assets/svg/positive.svg';
|
||||
import svgNegative from '@/assets/svg/negative.svg';
|
||||
|
||||
import BalanceInfo from '../balanceInfo.vue';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import numberIncrement from '@/components/shared/numberIncrement';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BalanceInfo,
|
||||
Item,
|
||||
CountBadge,
|
||||
numberIncrement,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -181,6 +344,8 @@ export default {
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gem: svgGem,
|
||||
svgPositive,
|
||||
svgNegative,
|
||||
}),
|
||||
};
|
||||
},
|
||||
@@ -211,6 +376,10 @@ export default {
|
||||
this.selectedAmountToSell = 0;
|
||||
}
|
||||
},
|
||||
maxOwned () {
|
||||
const maxOwned = this.itemContextToSell.itemCount;
|
||||
return maxOwned;
|
||||
},
|
||||
sellItems () {
|
||||
if (!Number.isInteger(Number(this.selectedAmountToSell))) {
|
||||
this.selectedAmountToSell = 0;
|
||||
|
||||
@@ -33,6 +33,22 @@
|
||||
v-if="!item.locked"
|
||||
class="purchase-amount"
|
||||
>
|
||||
<div class="item-cost">
|
||||
<span
|
||||
class="cost"
|
||||
:class="priceType"
|
||||
>
|
||||
<span
|
||||
class="svg-icon inline icon-24"
|
||||
aria-hidden="true"
|
||||
v-html="icons[priceType]"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
:class="priceType"
|
||||
>{{ item.value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="how-many-to-buy">
|
||||
<strong>{{ $t('howManyToBuy') }}</strong>
|
||||
</div>
|
||||
@@ -42,24 +58,25 @@
|
||||
>
|
||||
{{ item.addlNotes }}
|
||||
</div>
|
||||
<div class="box">
|
||||
<input
|
||||
v-model.number="selectedAmountToBuy"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
>
|
||||
<div>
|
||||
<number-increment
|
||||
@updateQuantity="selectedAmountToBuy = $event"
|
||||
/>
|
||||
</div>
|
||||
<div class="total-row">
|
||||
<span class="total-text">
|
||||
{{ $t('sendTotal') }}
|
||||
</span>
|
||||
<span
|
||||
class="svg-icon inline icon-20"
|
||||
aria-hidden="true"
|
||||
v-html="currencyIcon"
|
||||
></span>
|
||||
<span
|
||||
class="total"
|
||||
:class="priceType"
|
||||
>{{ item.value * selectedAmountToBuy }}</span>
|
||||
</div>
|
||||
<span
|
||||
class="svg-icon inline icon-32"
|
||||
aria-hidden="true"
|
||||
v-html="currencyIcon"
|
||||
></span>
|
||||
<span
|
||||
class="value"
|
||||
:class="priceType"
|
||||
>{{ item.value }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="priceType === 'gems'
|
||||
@@ -112,6 +129,40 @@
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 48px;
|
||||
background-color: $gray-700;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
padding: 16px 24px;
|
||||
align-content: center;
|
||||
|
||||
.user-balance {
|
||||
width: 150px;
|
||||
height: 16px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
color: $gray-100;
|
||||
margin-bottom: 16px;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.currency-totals {
|
||||
margin-right: -8px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
margin-top: 8%;
|
||||
width: 448px !important;
|
||||
@@ -129,8 +180,13 @@
|
||||
margin: 33px auto auto;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding-bottom: 0px;
|
||||
.item-notes {
|
||||
height: 48px;
|
||||
margin-top: 8px;
|
||||
padding-left: 48.5px;
|
||||
padding-right: 48.5px;
|
||||
line-height: 1.71;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.questInfo {
|
||||
@@ -152,16 +208,14 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
span.svg-icon.inline.icon-32 {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button.btn.btn-primary {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 14px;
|
||||
padding: 4px 16px;
|
||||
height: 32px;
|
||||
|
||||
&:focus {
|
||||
border: 2px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
.balance {
|
||||
@@ -173,19 +227,6 @@
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 48px;
|
||||
background-color: $gray-700;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
&> * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notEnough {
|
||||
pointer-events: none;
|
||||
opacity: 0.55;
|
||||
@@ -198,30 +239,108 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
margin-right: 24px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
.item-cost {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
input::-webkit-contacts-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.cost {
|
||||
height: 40px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
padding: 8px 20px 8px 20px;
|
||||
|
||||
&.gems {
|
||||
color: $green-10;
|
||||
background-color: rgba(36, 204, 143, 0.15);
|
||||
line-height: 1.4;
|
||||
margin: 0 0 0 -4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
background-color: rgba(255, 190, 93, 0.15);
|
||||
line-height: 1.4;
|
||||
margin: 0 0 0 -4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
color: $hourglass-color;
|
||||
background-color: rgba(41, 149, 205, 0.15);
|
||||
line-height: 1.4;
|
||||
margin: 0 0 0 -4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.total-row {
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 16px;
|
||||
|
||||
&.gems {
|
||||
color: $green-10;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
color: $hourglass-color;
|
||||
}
|
||||
}
|
||||
|
||||
.total-text {
|
||||
color: $gray-50;
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
height: 24px;
|
||||
line-height: 1.71;
|
||||
padding-right: 4px;
|
||||
|
||||
&.gems {
|
||||
color: $green-10;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: $yellow-5;
|
||||
}
|
||||
|
||||
&.hourglasses {
|
||||
color: $hourglass-color;
|
||||
}
|
||||
}
|
||||
|
||||
span.svg-icon.inline.icon-20 {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.svg-icon.inline.icon-24 {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.svg-icon.inline.icon-32 {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.modal-dialog {
|
||||
max-width: 80%;
|
||||
@@ -234,9 +353,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<!-- <style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.value {
|
||||
@@ -260,7 +380,7 @@
|
||||
color: $hourglass-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
@@ -272,6 +392,8 @@ import svgExperience from '@/assets/svg/experience.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgPositive from '@/assets/svg/positive.svg';
|
||||
import svgNegative from '@/assets/svg/negative.svg';
|
||||
|
||||
import BalanceInfo from '../balanceInfo.vue';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
@@ -280,6 +402,7 @@ import buyMixin from '@/mixins/buy';
|
||||
import numberInvalid from '@/mixins/numberInvalid';
|
||||
import PinBadge from '@/components/ui/pinBadge';
|
||||
import CountdownBanner from '../countdownBanner';
|
||||
import numberIncrement from '@/components/shared/numberIncrement';
|
||||
|
||||
import questDialogContent from './questDialogContent';
|
||||
import QuestRewards from './questRewards';
|
||||
@@ -293,6 +416,7 @@ export default {
|
||||
PinBadge,
|
||||
questDialogContent,
|
||||
CountdownBanner,
|
||||
numberIncrement,
|
||||
},
|
||||
mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
|
||||
props: {
|
||||
@@ -301,6 +425,7 @@ export default {
|
||||
},
|
||||
priceType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
withPin: {
|
||||
type: Boolean,
|
||||
@@ -312,9 +437,11 @@ export default {
|
||||
clock: svgClock,
|
||||
close: svgClose,
|
||||
experience: svgExperience,
|
||||
gem: svgGem,
|
||||
gems: svgGem,
|
||||
gold: svgGold,
|
||||
hourglass: svgHourglasses,
|
||||
hourglasses: svgHourglasses,
|
||||
positive: svgPositive,
|
||||
negative: svgNegative,
|
||||
}),
|
||||
|
||||
isPinned: false,
|
||||
@@ -339,8 +466,8 @@ export default {
|
||||
},
|
||||
currencyIcon () {
|
||||
if (this.priceType === 'gold') return this.icons.gold;
|
||||
if (this.priceType === 'hourglasses') return this.icons.hourglass;
|
||||
return this.icons.gem;
|
||||
if (this.priceType === 'hourglasses') return this.icons.hourglasses;
|
||||
return this.icons.gems;
|
||||
},
|
||||
endDate () {
|
||||
return moment(this.item.event.end);
|
||||
|
||||
@@ -33,17 +33,17 @@
|
||||
|
||||
h3 {
|
||||
color: $gray-10;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 4pxrem;
|
||||
}
|
||||
|
||||
.quest-image {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 1rem;
|
||||
margin: 16px 16px;
|
||||
overflow-y: auto;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -54,10 +54,10 @@
|
||||
line-height: 1.71;
|
||||
color: $gray-50;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 8px;
|
||||
|
||||
::v-deep .user-label {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -177,9 +177,6 @@ export default {
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.quest-rewards {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
|
||||
background-color: $gray-700;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
export default {
|
||||
computed: {
|
||||
numberInvalid () {
|
||||
return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy);
|
||||
const inputNumber = Number(this.selectedAmountToBuy);
|
||||
return inputNumber < 1
|
||||
|| !Number.isInteger(inputNumber);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -132,5 +132,5 @@
|
||||
"subscriptionBenefit6": "Earn Mystic Hourglasses for use in the Time Travelers' Shop!",
|
||||
"purchaseAll": "Purchase Set",
|
||||
"gemsRemaining": "gems remaining",
|
||||
"notEnoughGemsToBuy": "You are unable to buy that amount of gems"
|
||||
"notEnoughGemsToBuy": "You are unable to buy that amount of gems",
|
||||
}
|
||||
|
||||
@@ -208,7 +208,7 @@
|
||||
"userSentMessage": "<span class=\"notification-bold\"><%- user %></span> sent you a message",
|
||||
"letsgo": "Let's Go!",
|
||||
"selected": "Selected",
|
||||
"howManyToBuy": "How many would you like to buy?",
|
||||
"howManyToBuy": "How many would you like to purchase?",
|
||||
"contactForm": "Contact the Moderation Team",
|
||||
"loadEarlierMessages": "Load Earlier Messages",
|
||||
"askQuestion": "Ask a Question",
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
"sendGiftHeading": "Send Gift to <%= name %>",
|
||||
"sendGiftGemsBalance": "From <%= number %> Gems",
|
||||
"sendGiftCost": "Total: $<%= cost %> USD",
|
||||
"sendGiftTotal": "Total:",
|
||||
"sendTotal": "Total:",
|
||||
"sendGiftFromBalance": "From Balance",
|
||||
"sendGiftPurchase": "Purchase",
|
||||
"sendGiftLabel": "Would you like to send a gift message?",
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
"howManyToSell": "How many would you like to sell?",
|
||||
"yourBalance": "Your balance:",
|
||||
"sell": "Sell",
|
||||
"sellItems": "Sell Items",
|
||||
"buyNow": "Buy Now",
|
||||
"sortByNumber": "Number",
|
||||
"featuredItems": "Featured Items!",
|
||||
|
||||
@@ -194,8 +194,8 @@
|
||||
"subscriptionBenefit5": "Receive the Royal Purple Jackalope pet when you become a new subscriber.",
|
||||
"subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!",
|
||||
"purchaseAll": "Purchase Set",
|
||||
"gemsRemaining": "Gems remaining",
|
||||
"notEnoughGemsToBuy": "You are unable to buy that amount of Gems",
|
||||
"gemsRemaining": "remaining",
|
||||
"notEnoughGemsToBuy": "No more Gems available for purchase this month. More will become available within the first 3 days of each month.",
|
||||
"subscribersReceiveBenefits": "Subscribers receive these useful benefits!",
|
||||
"monthlyMysteryItems": "Monthly Mystery Items",
|
||||
"doubleDropCap": "Double the Drops",
|
||||
@@ -217,5 +217,6 @@
|
||||
"haveNonRecurringSub": "You have a non-recurring gift subscription.",
|
||||
"switchToRecurring": "Switch to a recurring subscription?",
|
||||
"continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.",
|
||||
"subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled."
|
||||
"subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled.",
|
||||
"monthlyGems": "Monthly Gems:"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user