@@ -46,6 +47,10 @@ export default {
type: String,
required: true,
},
+ badgeSize: {
+ type: Number,
+ default: 32,
+ },
},
data () {
return {
diff --git a/website/client/src/components/members/inlineClassBadge.vue b/website/client/src/components/members/inlineClassBadge.vue
new file mode 100644
index 0000000000..f70ae2e25b
--- /dev/null
+++ b/website/client/src/components/members/inlineClassBadge.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
diff --git a/website/client/src/components/payments/selectUserModal.vue b/website/client/src/components/payments/selectUserModal.vue
index 5873f39fbe..b9020e7494 100644
--- a/website/client/src/components/payments/selectUserModal.vue
+++ b/website/client/src/components/payments/selectUserModal.vue
@@ -269,12 +269,12 @@ export default {
result = null;
}
}
- if (!result || !result.data || !result.data.data) {
+ if (!result) {
this.userNotFound = true;
return;
}
this.userNotFound = false;
- this.foundUser = result.data.data;
+ this.foundUser = result;
}, 500),
selectUser () {
this.$root.$emit('habitica::send-gems', this.foundUser);
diff --git a/website/client/src/components/sidebarButton.vue b/website/client/src/components/sectionButton.vue
similarity index 56%
rename from website/client/src/components/sidebarButton.vue
rename to website/client/src/components/sectionButton.vue
index 52ac5a22c7..ad0d009911 100644
--- a/website/client/src/components/sidebarButton.vue
+++ b/website/client/src/components/sectionButton.vue
@@ -1,40 +1,49 @@
@@ -56,5 +65,14 @@ export default {
},
};
},
+ methods: {
+ emitClick ($event) {
+ if ($event.stopPropagation) {
+ $event.stopPropagation();
+ }
+
+ this.$emit('click');
+ },
+ },
};
diff --git a/website/client/src/components/shops/itemWithLabel.vue b/website/client/src/components/shops/itemWithLabel.vue
new file mode 100644
index 0000000000..00519d949a
--- /dev/null
+++ b/website/client/src/components/shops/itemWithLabel.vue
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
diff --git a/website/client/src/components/shops/market/equipmentSection.vue b/website/client/src/components/shops/market/equipmentSection.vue
index cbe37523fe..144e70edfa 100644
--- a/website/client/src/components/shops/market/equipmentSection.vue
+++ b/website/client/src/components/shops/market/equipmentSection.vue
@@ -89,6 +89,7 @@ import svgRogue from '@/assets/svg/rogue.svg';
import svgHealer from '@/assets/svg/healer.svg';
import pinUtils from '../../../mixins/pinUtils';
+import { getClassName } from '../../../../../common/script/libs/getClassName';
const sortGearTypes = [
'sortByType', 'sortByPrice', 'sortByCon',
@@ -159,10 +160,7 @@ export default {
},
methods: {
getClassName (classType) {
- if (classType === 'wizard') {
- return this.$t('mage');
- }
- return this.$t(classType);
+ return this.$t(getClassName(classType));
},
gearSelected (item) {
this.$root.$emit('buyModal::showItem', item);
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index e257f0ceed..4c9a05fe76 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -13,14 +13,12 @@
:pinned="isPinned"
/>
-
-
+
+
+
+ {{$t('questDetailsTitle') }}
+
+
-
* {
+ margin: 0;
+ }
}
.notEnough {
@@ -235,6 +242,18 @@
}
}
}
+
+ @media only screen and (max-width: 1000px) {
+ .modal-dialog {
+ max-width: 80%;
+ width: 80% !important;
+
+ .modal-body {
+ flex-direction: column;
+ display: flex;
+ }
+ }
+ }
}
@@ -257,14 +276,16 @@ import numberInvalid from '@/mixins/numberInvalid';
import PinBadge from '@/components/ui/pinBadge';
import CountdownBanner from '../countdownBanner';
-import questDialogDrops from './questDialogDrops';
import questDialogContent from './questDialogContent';
+import QuestRewards from './questRewards';
+import CloseIcon from '../../shared/closeIcon';
export default {
components: {
+ CloseIcon,
+ QuestRewards,
BalanceInfo,
PinBadge,
- questDialogDrops,
questDialogContent,
CountdownBanner,
},
diff --git a/website/client/src/components/shops/quests/index.vue b/website/client/src/components/shops/quests/index.vue
index f7122645a1..62bb324dcc 100644
--- a/website/client/src/components/shops/quests/index.vue
+++ b/website/client/src/components/shops/quests/index.vue
@@ -219,39 +219,7 @@
@click="selectItem(item)"
>
-
-
-
{{ `${$t('lockedItem')}` }}
-
{{ item.text }}
-
{{ `${$t('questUnlockLostMasterclasser')}` }}
-
{{ `${$t('loginIncentiveQuest', {
- count: item.unlockCondition.incentiveThreshold})}` }}
-
{{ `${$t('unlockByQuesting', {title: item.previous})}` }}
-
{{ `${$t('mustLvlQuest', {level: item.lvl})}` }}
-
-
+
+
+
+ `,
+ }))
+ .add('itemWithLabel', () => ({
+ components: { itemWithLabel },
+ data () {
+ return {
+ };
+ },
+ template: `
+
+
+
+
+
+
+ Image
+
+
+ Label
+
+
+
+
+
+
+
+
+ Image
+
+
+ Label
+
+
+
+
+
+
+ `,
+ }));
diff --git a/website/client/src/components/shops/quests/quest-helper.mixin.js b/website/client/src/components/shops/quests/quest-helper.mixin.js
new file mode 100644
index 0000000000..aea9e59612
--- /dev/null
+++ b/website/client/src/components/shops/quests/quest-helper.mixin.js
@@ -0,0 +1,56 @@
+import groupBy from 'lodash/groupBy';
+import { mapState } from '../../../libs/store';
+
+export const QuestHelperMixin = {
+ computed: {
+ ...mapState({
+ content: 'content',
+ }),
+ },
+ methods: {
+ getDropIcon (drop) {
+ switch (drop.type) {
+ case 'hatchingPotions':
+ return `Pet_HatchingPotion_${drop.key}`;
+ case 'food':
+ return `Pet_Food_${drop.key}`;
+ case 'eggs':
+ return `Pet_Egg_${drop.key}`;
+ case 'quests':
+ return `inventory_quest_scroll_${drop.key}`;
+ default:
+ return `shop_${drop.key}`;
+ }
+ },
+ getDropName (drop) {
+ return typeof drop.text === 'function' ? drop.text() : drop.text;
+ },
+ getDropsList (drops, ownerOnly) {
+ if (!drops) return [];
+
+ const dropList = drops.filter(drop => {
+ if (ownerOnly) {
+ return drop.onlyOwner;
+ }
+ return !drop.onlyOwner;
+ }).map(item => {
+ if (item.type === 'gear') {
+ const contentItem = this.content.gear.flat[item.key];
+
+ return contentItem;
+ }
+
+ return {
+ ...item,
+ text: item.text(),
+ };
+ });
+
+ return Object.entries(groupBy(dropList, e => `${e.type}_${e.key}`))
+ .map(([, entries]) => ({
+ ...entries[0],
+ amount: entries.length,
+ }));
+ },
+ },
+};
diff --git a/website/client/src/components/shops/quests/questDialogContent.vue b/website/client/src/components/shops/quests/questDialogContent.vue
index 27212f452a..56bde4e41c 100644
--- a/website/client/src/components/shops/quests/questDialogContent.vue
+++ b/website/client/src/components/shops/quests/questDialogContent.vue
@@ -4,9 +4,18 @@
class="quest-image"
:class="'quest_' + item.key"
>
-
+
{{ itemText }}
-
+
+
+
+ {{ $t('questOwner') }}:
+
+
+
@import '~@/assets/scss/colors.scss';
+ h3 {
+ color: $gray-10;
+ margin-bottom: 0.25rem;
+ }
+
.quest-image {
margin: 0 auto;
margin-bottom: 1em;
@@ -30,29 +44,67 @@
}
.text {
- margin-bottom: 8px;
- overflow-y: scroll;
+ margin-bottom: 1rem;
+ overflow-y: auto;
text-overflow: ellipsis;
}
+ .leader-label {
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1.71;
+ color: $gray-50;
+ text-align: center;
+ margin-bottom: 0.5rem;
+
+ ::v-deep .user-label {
+ font-size: 14px;
+ }
+ }
+
.questInfo {
- width: 70%;
+ width: 160px;
margin: 0 auto;
- margin-bottom: 10px;
+
+ display: flex;
+ justify-content: center;
}
diff --git a/website/client/src/components/shops/quests/questInfo.vue b/website/client/src/components/shops/quests/questInfo.vue
index 7e788a2522..916d54e679 100644
--- a/website/client/src/components/shops/quests/questInfo.vue
+++ b/website/client/src/components/shops/quests/questInfo.vue
@@ -1,38 +1,41 @@
-
+
-
{{ $t('collect') + ':' }}
-
-
- {{ collect.count }} {{ getCollectText(collect) }}
-
-
-
-
-
{{ $t('bossHP') + ':' }}
- {{ quest.boss.hp }}
-
-
-
{{ $t('difficulty') + ':' }}
-
-
-
+
+
{{ $t('collect') + ':' }}
+
+
+ {{ collect.count }} {{ getCollectText(collect) }}
+
+
+
+
+
{{ $t('bossHP') + ':' }}
+ {{ quest.boss.hp }}
+
+
+
{{ $t('difficulty') + ':' }}
+
+
+
+
* {
- text-align: left;
+ vertical-align: top;
+ height: 16px;
+ max-height: 16px;
}
dt {
- font-size: 1.3em;
- line-height: 1.2;
+ font-weight: bold;
+ font-stretch: normal;
+ font-style: normal;
+ line-height: 1.33;
+ letter-spacing: normal;
+ text-align: left;
color: $gray-50;
}
.svg-icon {
- margin-right: 4px;
+ margin-left: 4px;
}
.small-version {
@@ -93,10 +110,11 @@ dt {
diff --git a/website/client/src/components/shops/quests/questPopover.vue b/website/client/src/components/shops/quests/questPopover.vue
new file mode 100644
index 0000000000..40b4b59e35
--- /dev/null
+++ b/website/client/src/components/shops/quests/questPopover.vue
@@ -0,0 +1,70 @@
+
+
+
+ {{ $t('lockedItem') }}
+
+
+ {{ item.text }}
+
+
+ {{ $t('questUnlockLostMasterclasser') }}
+
+
+ {{ $t('loginIncentiveQuest', {
+ count: item.unlockCondition.incentiveThreshold}) }}
+
+
+ {{ $t('unlockByQuesting', {title: item.previous}) }}
+
+
+ {{ $t('mustLvlQuest', {level: item.lvl}) }}
+
+
+
+
+
diff --git a/website/client/src/components/shops/quests/questRewards.vue b/website/client/src/components/shops/quests/questRewards.vue
new file mode 100644
index 0000000000..f8044690e9
--- /dev/null
+++ b/website/client/src/components/shops/quests/questRewards.vue
@@ -0,0 +1,213 @@
+
+
+
+
+
+
+
+
+
+
+ {{ $t('ownerOnly') }}
+
+
+
+
+
+
+ {{ $t('amountExp', { amount: quest.drop.exp }) }}
+
+
+
+
+
+
+ {{ $t('amountGold', { amount: quest.drop.gp }) }}
+
+
+
+
+
+
+
+
+
+
+ {{ $t('newItem') }}
+
+
+
+
+
+
+
+
diff --git a/website/client/src/components/shops/seasonal/index.vue b/website/client/src/components/shops/seasonal/index.vue
index 07b9abceb6..99396e19fa 100644
--- a/website/client/src/components/shops/seasonal/index.vue
+++ b/website/client/src/components/shops/seasonal/index.vue
@@ -371,6 +371,7 @@ import shops from '@/../../common/script/libs/shops';
import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
import FilterSidebar from '@/components/ui/filterSidebar';
import FilterGroup from '@/components/ui/filterGroup';
+import { getClassName } from '../../../../../common/script/libs/getClassName';
export default {
components: {
@@ -523,10 +524,7 @@ export default {
},
methods: {
getClassName (classType) {
- if (classType === 'wizard') {
- return this.$t('mage');
- }
- return this.$t(classType);
+ return this.$t(getClassName(classType));
},
seasonalItems (category, sortBy, searchBy, viewOptions, hidePinned) {
let result = _map(category.items, e => ({
diff --git a/website/client/src/components/sidebarSection.vue b/website/client/src/components/sidebarSection.vue
index 6a16d127e1..43f5149af5 100644
--- a/website/client/src/components/sidebarSection.vue
+++ b/website/client/src/components/sidebarSection.vue
@@ -1,5 +1,5 @@
-