From 5a48436eff3dcc9740e7f0df9b2900838918a875 Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Wed, 14 Feb 2024 17:49:26 -0600 Subject: [PATCH 01/10] WIP(shops): customizations route --- .../components/shops/customizations/index.vue | 71 +++++++++++++++++++ website/client/src/components/shops/index.vue | 14 ++-- website/client/src/router/index.js | 2 + website/common/locales/en/generic.json | 4 +- 4 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 website/client/src/components/shops/customizations/index.vue diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue new file mode 100644 index 0000000000..bacdd1ddf2 --- /dev/null +++ b/website/client/src/components/shops/customizations/index.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/website/client/src/components/shops/index.vue b/website/client/src/components/shops/index.vue index d12a19c46e..b6d4e3386a 100644 --- a/website/client/src/components/shops/index.vue +++ b/website/client/src/components/shops/index.vue @@ -3,26 +3,32 @@ {{ $t('market') }} {{ $t('quests') }} + {{ $t('customizations') }} + + {{ $t('titleSeasonalShop') }} {{ $t('titleTimeTravelers') }} diff --git a/website/client/src/router/index.js b/website/client/src/router/index.js index f3e87d4584..5e51cff9fc 100644 --- a/website/client/src/router/index.js +++ b/website/client/src/router/index.js @@ -60,6 +60,7 @@ const ChallengeDetail = () => import(/* webpackChunkName: "challenges" */ '@/com const ShopsContainer = () => import(/* webpackChunkName: "shops" */'@/components/shops/index'); const MarketPage = () => import(/* webpackChunkName: "shops-market" */'@/components/shops/market/index'); const QuestsPage = () => import(/* webpackChunkName: "shops-quest" */'@/components/shops/quests/index'); +const CustomizationsPage = () => import(/* webpackChunkName: "shops-customizations" */'@/components/shops/customizations/index'); const SeasonalPage = () => import(/* webpackChunkName: "shops-seasonal" */'@/components/shops/seasonal/index'); const TimeTravelersPage = () => import(/* webpackChunkName: "shops-timetravelers" */'@/components/shops/timeTravelers/index'); @@ -111,6 +112,7 @@ const router = new VueRouter({ children: [ { name: 'market', path: 'market', component: MarketPage }, { name: 'quests', path: 'quests', component: QuestsPage }, + { name: 'customizations', path: 'customizations', component: CustomizationsPage }, { name: 'seasonal', path: 'seasonal', component: SeasonalPage }, { name: 'time', path: 'time', component: TimeTravelersPage }, ], diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json index bfaa238727..3c06a7a895 100644 --- a/website/common/locales/en/generic.json +++ b/website/common/locales/en/generic.json @@ -235,8 +235,8 @@ "questionDescriptionText": "It's okay to ask your questions in your primary language if you aren't comfortable speaking in English.", "questionPlaceholder": "Ask your question here", "submitQuestion": "Submit Question", - "reportPlayer": "Report Player", "whyReportingPlayer": "Why are you reporting this player?", "whyReportingPlayerPlaceholder": "Reason for report", - "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines." + "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines.", + "customizations": "Customizations" } From 63e7ace6938c23133157c9324991d9409fec0e7e Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Thu, 15 Feb 2024 17:51:14 -0600 Subject: [PATCH 02/10] WIP(shops): customization categories skeleton --- website/client/src/components/header/menu.vue | 6 ++ .../components/shops/customizations/index.vue | 74 ++++++++++++++++++- .../components/shops/timeTravelers/index.vue | 3 +- website/common/locales/en/character.json | 7 +- website/common/locales/en/generic.json | 3 +- website/common/script/libs/shops.js | 68 +++++++++++++++++ 6 files changed, 154 insertions(+), 7 deletions(-) diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue index 900cf0ec93..fb9db1f1bf 100644 --- a/website/client/src/components/header/menu.vue +++ b/website/client/src/components/header/menu.vue @@ -134,6 +134,12 @@ > {{ $t('quests') }} + + {{ $t('customizations') }} +
- + + +
@@ -16,11 +24,39 @@ >
+
+

+ {{ $t('customizations') }} +

+
+

+ {{ category.text }} +

+
+ {{ item.text }} +
+
+
diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue index f034ad6365..498fadff2e 100644 --- a/website/client/src/components/ui/itemRows.vue +++ b/website/client/src/components/ui/itemRows.vue @@ -69,6 +69,9 @@ export default { noItemsLabel: { type: String, }, + maxItemsPerRow: { + type: Number, + }, }, data () { return { @@ -80,6 +83,9 @@ export default { }, computed: { itemsPerRow () { + if (this.maxItemsPerRow > 0) { + return this.maxItemsPerRow; + } return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin)); }, }, diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js index 7cdb94ac24..9154c9466e 100644 --- a/website/common/script/libs/shops.js +++ b/website/common/script/libs/shops.js @@ -559,42 +559,49 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories const hairColorsCategory = { identifier: 'hairColors', text: i18n.t('hairColors', language), + items: [], }; categories.push(hairColorsCategory); const hairStylesCategory = { identifier: 'hairStyles', text: i18n.t('hairStyles', language), + items: [], }; categories.push(hairStylesCategory); const skinsCategory = { identifier: 'skins', text: i18n.t('skins', language), + items: [], }; categories.push(skinsCategory); const animalEarsCategory = { identifier: 'animalEars', text: i18n.t('animalEars', language), + items: [], }; categories.push(animalEarsCategory); const animalTailsCategory = { identifier: 'animalTails', text: i18n.t('animalTails', language), + items: [], }; categories.push(animalTailsCategory); const shirtsCategory = { identifier: 'shirts', text: i18n.t('shirts', language), + items: [], }; categories.push(shirtsCategory); const facialHairCategory = { identifier: 'facialHair', text: i18n.t('facialHairs', language), + items: [], }; categories.push(facialHairCategory); From 09ff3ee865204c89309e4859d93eb034f642c5af Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Tue, 20 Feb 2024 17:56:56 -0600 Subject: [PATCH 04/10] WIP(customizations): load hair colors --- .../components/shops/customizations/index.vue | 3 ++- .../client/src/components/shops/shopItem.vue | 5 ++++ website/common/script/libs/getItemInfo.js | 9 +++++++ website/common/script/libs/shops.js | 25 ++++++++++++++++--- 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue index ecc05a689f..473b8a1c0d 100644 --- a/website/client/src/components/shops/customizations/index.vue +++ b/website/client/src/components/shops/customizations/index.vue @@ -66,6 +66,7 @@ :price="ctx.item.value" :price-type="ctx.item.currency" :empty-item="false" + :show-popover="Boolean(ctx.item.text)" /> @@ -127,7 +128,7 @@ export default { return Object.values(this.viewOptions).some(g => g.selected); }, imageURLs () { - const currentEvent = this.currentEventList.find(event => Boolean(event.season)); + const currentEvent = this.currentEventList?.find(event => Boolean(event.season)); if (!currentEvent) { return { background: 'url(/static/npc/normal/market_background.png)', diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue index f6aeaeb9fb..3be2a2a672 100644 --- a/website/client/src/components/shops/shopItem.vue +++ b/website/client/src/components/shops/shopItem.vue @@ -142,6 +142,11 @@ &.locked .price { opacity: 0.5; } + + .hair { + height: 68px; + margin-left: -24px; + } } .image { diff --git a/website/common/script/libs/getItemInfo.js b/website/common/script/libs/getItemInfo.js index 59df678a01..a3b66b07c9 100644 --- a/website/common/script/libs/getItemInfo.js +++ b/website/common/script/libs/getItemInfo.js @@ -379,6 +379,15 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang }; break; } + case 'hairColor': { + itemInfo = { + key: item.key, + class: `hair hair_bangs_${user.preferences.hair.bangs}_${item.key}`, + value: item.price, + currency: 'gems', + }; + break; + } } if (itemInfo) { diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js index 9154c9466e..f445695ec9 100644 --- a/website/common/script/libs/shops.js +++ b/website/common/script/libs/shops.js @@ -1,3 +1,4 @@ +import moment from 'moment'; import values from 'lodash/values'; import map from 'lodash/map'; import keys from 'lodash/keys'; @@ -546,21 +547,39 @@ shops.getBackgroundShopSets = function getBackgroundShopSets (language) { shops.getCustomizationsShopCategories = function getCustomizationsShopCategories (user, language) { const categories = []; const officialPinnedItems = getOfficialPinnedItems(); + const backgroundsCategory = { identifier: 'backgrounds', text: i18n.t('backgrounds', language), }; - backgroundsCategory.items = values(content.backgroundsFlat) - .filter(bg => !user.purchased.background[bg.key] && (!bg.currency || bg.currency === 'gems')) + .filter(bg => !user.purchased.background[bg.key] && (!bg.currency || bg.currency === 'gems') + && !(bg.price === 0)) .map(bg => getItemInfo(user, 'background', bg, officialPinnedItems, language)); categories.push(backgroundsCategory); const hairColorsCategory = { identifier: 'hairColors', text: i18n.t('hairColors', language), - items: [], }; + hairColorsCategory.items = values(content.appearances.hair.color) + .filter(color => { + const { hair } = user.purchased; + if (hair && hair.color && hair.color[color.key]) { + return false; + } + if (color.set) { + if (color.set.availableFrom) { + return moment().isBetween(color.set.availableFrom, color.set.availableUntil); + } + if (color.set.availableUntil) { + return moment().isBefore(color.set.availableTo); + } + return true; + } + return false; + }) + .map(color => getItemInfo(user, 'hairColor', color, officialPinnedItems, language)); categories.push(hairColorsCategory); const hairStylesCategory = { From 33b54a734ed1a8b99715820c6dad252754ef8b23 Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Thu, 22 Feb 2024 17:03:07 -0600 Subject: [PATCH 05/10] WIP(shop): more CSS, add hair styles --- website/client/src/assets/scss/button.scss | 4 +- .../components/shops/customizations/index.vue | 8 +++ website/common/script/libs/getItemInfo.js | 27 +++++++ website/common/script/libs/shops.js | 72 ++++++++++++++++--- 4 files changed, 99 insertions(+), 12 deletions(-) diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss index c45f9a8396..f61e0b495a 100644 --- a/website/client/src/assets/scss/button.scss +++ b/website/client/src/assets/scss/button.scss @@ -217,9 +217,7 @@ .btn-show-more { display: block; - width: 50%; - max-width: 448px; - margin: 0 auto; + width: 100%; margin-top: 12px; padding: 8px; font-size: 14px; diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue index 473b8a1c0d..45f54fae95 100644 --- a/website/client/src/components/shops/customizations/index.vue +++ b/website/client/src/components/shops/customizations/index.vue @@ -87,6 +87,14 @@ height: 216px; } + .item-rows { + max-width: 920px; + + .items > div:nth-of-type(8n) { + margin-right: 0px; + } + } + .npc { background-repeat: no-repeat; } diff --git a/website/common/script/libs/getItemInfo.js b/website/common/script/libs/getItemInfo.js index a3b66b07c9..586c700eb7 100644 --- a/website/common/script/libs/getItemInfo.js +++ b/website/common/script/libs/getItemInfo.js @@ -388,6 +388,33 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang }; break; } + case 'hairBase': { + itemInfo = { + key: `hair-base-${item.key}`, + class: `hair hair_base_${item.key}_${user.preferences.hair.color}`, + value: item.price, + currency: 'gems', + }; + break; + } + case 'mustache': { + itemInfo = { + key: `mustache-${item.key}`, + class: `hair hair_mustache_${item.key}_${user.preferences.hair.color}`, + value: item.price, + currency: 'gems', + }; + break; + } + case 'beard': { + itemInfo = { + key: `beard-${item.key}`, + class: `hair hair_beard_${item.key}_${user.preferences.hair.color}`, + value: item.price, + currency: 'gems', + }; + break; + } } if (itemInfo) { diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js index f445695ec9..f5b91cd752 100644 --- a/website/common/script/libs/shops.js +++ b/website/common/script/libs/shops.js @@ -573,7 +573,7 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories return moment().isBetween(color.set.availableFrom, color.set.availableUntil); } if (color.set.availableUntil) { - return moment().isBefore(color.set.availableTo); + return moment().isBefore(color.set.availableUntil); } return true; } @@ -585,10 +585,71 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories const hairStylesCategory = { identifier: 'hairStyles', text: i18n.t('hairStyles', language), - items: [], }; + hairStylesCategory.items = values(content.appearances.hair.base) + .filter(style => { + const { hair } = user.purchased; + if (hair && hair.base && hair.base[style.key]) { + return false; + } + if (style.set) { + if (style.set.availableFrom) { + return moment().isBetween(style.set.availableFrom, style.set.availableUntil); + } + if (style.set.availableUntil) { + return moment().isBefore(style.set.availableUntil); + } + return true; + } + return false; + }) + .map(style => getItemInfo(user, 'hairBase', style, officialPinnedItems, language)); categories.push(hairStylesCategory); + const facialHairCategory = { + identifier: 'facialHair', + text: i18n.t('facialHairs', language), + }; + facialHairCategory.items = values(content.appearances.hair.mustache) + .filter(style => { + const { hair } = user.purchased; + if (hair && hair.mustache && hair.mustache[style.key]) { + return false; + } + if (style.set) { + if (style.set.availableFrom) { + return moment().isBetween(style.set.availableFrom, style.set.availableUntil); + } + if (style.set.availableUntil) { + return moment().isBefore(style.set.availableUntil); + } + return true; + } + return false; + }) + .map(style => getItemInfo(user, 'mustache', style, officialPinnedItems, language)) + .concat( + values(content.appearances.hair.beard) + .filter(style => { + const { hair } = user.purchased; + if (hair && hair.beard && hair.beard[style.key]) { + return false; + } + if (style.set) { + if (style.set.availableFrom) { + return moment().isBetween(style.set.availableFrom, style.set.availableUntil); + } + if (style.set.availableUntil) { + return moment().isBefore(style.set.availableUntil); + } + return true; + } + return false; + }) + .map(style => getItemInfo(user, 'beard', style, officialPinnedItems, language)), + ); + categories.push(facialHairCategory); + const skinsCategory = { identifier: 'skins', text: i18n.t('skins', language), @@ -617,13 +678,6 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories }; categories.push(shirtsCategory); - const facialHairCategory = { - identifier: 'facialHair', - text: i18n.t('facialHairs', language), - items: [], - }; - categories.push(facialHairCategory); - return categories; }; From 28fef8df8622c14b70770be4006a1704ddb359b1 Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Tue, 27 Feb 2024 15:17:10 -0600 Subject: [PATCH 06/10] WIP(shops): shirts vs skins --- .../client/src/components/shops/shopItem.vue | 15 +++++++- website/common/script/libs/getItemInfo.js | 22 ++++++++++- website/common/script/libs/shops.js | 38 ++++++++++++++++++- 3 files changed, 69 insertions(+), 6 deletions(-) diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue index 3be2a2a672..f2c1d3734d 100644 --- a/website/client/src/components/shops/shopItem.vue +++ b/website/client/src/components/shops/shopItem.vue @@ -143,9 +143,20 @@ opacity: 0.5; } - .hair { + .hair, .facial-hair, .shirt, .skin { height: 68px; - margin-left: -24px; + } + + .hair { + background-position: -24px -2px; + } + + .facial-hair, .skin { + background-position: -24px -10px; + } + + .shirt { + background-position: -23px -32px; } } diff --git a/website/common/script/libs/getItemInfo.js b/website/common/script/libs/getItemInfo.js index 586c700eb7..2f1cf56fe7 100644 --- a/website/common/script/libs/getItemInfo.js +++ b/website/common/script/libs/getItemInfo.js @@ -400,7 +400,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang case 'mustache': { itemInfo = { key: `mustache-${item.key}`, - class: `hair hair_mustache_${item.key}_${user.preferences.hair.color}`, + class: `facial-hair hair_mustache_${item.key}_${user.preferences.hair.color}`, value: item.price, currency: 'gems', }; @@ -409,7 +409,25 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang case 'beard': { itemInfo = { key: `beard-${item.key}`, - class: `hair hair_beard_${item.key}_${user.preferences.hair.color}`, + class: `facial-hair hair_beard_${item.key}_${user.preferences.hair.color}`, + value: item.price, + currency: 'gems', + }; + break; + } + case 'skin': { + itemInfo = { + key: item.key, + class: `skin skin_${item.key}`, + value: item.price, + currency: 'gems', + }; + break; + } + case 'shirt': { + itemInfo = { + key: item.key, + class: `shirt ${user.preferences.size}_shirt_${item.key}`, value: item.price, currency: 'gems', }; diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js index f5b91cd752..caf951ee96 100644 --- a/website/common/script/libs/shops.js +++ b/website/common/script/libs/shops.js @@ -653,8 +653,25 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories const skinsCategory = { identifier: 'skins', text: i18n.t('skins', language), - items: [], }; + skinsCategory.items = values(content.appearances.skin) + .filter(color => { + const { skin } = user.purchased; + if (skin && skin[color.key]) { + return false; + } + if (color.set) { + if (color.set.availableFrom) { + return moment().isBetween(color.set.availableFrom, color.set.availableUntil); + } + if (color.set.availableUntil) { + return moment().isBefore(color.set.availableUntil); + } + return true; + } + return false; + }) + .map(color => getItemInfo(user, 'skin', color, officialPinnedItems, language)); categories.push(skinsCategory); const animalEarsCategory = { @@ -674,8 +691,25 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories const shirtsCategory = { identifier: 'shirts', text: i18n.t('shirts', language), - items: [], }; + shirtsCategory.items = values(content.appearances.shirt) + .filter(color => { + const { shirt } = user.purchased; + if (shirt && shirt[color.key]) { + return false; + } + if (color.set) { + if (color.set.availableFrom) { + return moment().isBetween(color.set.availableFrom, color.set.availableUntil); + } + if (color.set.availableUntil) { + return moment().isBefore(color.set.availableUntil); + } + return true; + } + return false; + }) + .map(color => getItemInfo(user, 'shirt', color, officialPinnedItems, language)); categories.push(shirtsCategory); return categories; From ecc8a65d28fda94a193b826ad15036138c4b0d82 Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Thu, 29 Feb 2024 15:59:31 -0600 Subject: [PATCH 07/10] WIP(customizations): animal bits --- website/common/script/libs/getItemInfo.js | 2 +- website/common/script/libs/shops.js | 20 ++++++++++++++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/website/common/script/libs/getItemInfo.js b/website/common/script/libs/getItemInfo.js index 2f1cf56fe7..5acb5e9905 100644 --- a/website/common/script/libs/getItemInfo.js +++ b/website/common/script/libs/getItemInfo.js @@ -235,7 +235,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang case 'gear': // spread operator not available itemInfo = Object.assign(getDefaultGearProps(item, language), { - value: item.twoHanded ? 2 : 1, + value: item.twoHanded || item.gearSet === 'animal' ? 2 : 1, currency: 'gems', pinType: 'gear', }); diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js index caf951ee96..c82138a3d0 100644 --- a/website/common/script/libs/shops.js +++ b/website/common/script/libs/shops.js @@ -677,15 +677,31 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories const animalEarsCategory = { identifier: 'animalEars', text: i18n.t('animalEars', language), - items: [], }; + animalEarsCategory.items = values(content.gear.tree.headAccessory.special) + .filter(gearItem => { + const { owned } = user.items.gear; + if (typeof owned[gearItem.key] !== 'undefined') { + return false; + } + return gearItem.gearSet === 'animal'; + }) + .map(gearItem => getItemInfo(user, 'gear', gearItem, officialPinnedItems, language)); categories.push(animalEarsCategory); const animalTailsCategory = { identifier: 'animalTails', text: i18n.t('animalTails', language), - items: [], }; + animalTailsCategory.items = values(content.gear.tree.back.special) + .filter(gearItem => { + const { owned } = user.items.gear; + if (typeof owned[gearItem.key] !== 'undefined') { + return false; + } + return gearItem.gearSet === 'animal'; + }) + .map(gearItem => getItemInfo(user, 'gear', gearItem, officialPinnedItems, language)); categories.push(animalTailsCategory); const shirtsCategory = { From 0aa9d4d1d53eec50d9a6962cea7f8c5741a6c398 Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Mon, 11 Mar 2024 16:09:16 -0500 Subject: [PATCH 08/10] WIP(shops): start wiring up buy modals --- website/client/src/assets/scss/button.scss | 3 +-- .../src/components/avatarModal/body-settings.vue | 4 ++-- .../components/avatarModal/customize-options.vue | 4 ++-- .../components/avatarModal/extra-settings.vue | 4 ++-- .../src/components/avatarModal/hair-settings.vue | 4 ++-- .../src/components/avatarModal/skin-settings.vue | 4 ++-- website/client/src/components/creatorIntro.vue | 4 ++-- website/client/src/components/shops/buyModal.vue | 16 +++++----------- .../components/shops/customizations/index.vue | 7 +++++-- website/client/src/components/shops/shopItem.vue | 2 ++ website/client/src/components/ui/itemRows.vue | 8 -------- .../client/src/components/ui/showMoreButton.vue | 2 +- website/client/src/mixins/avatarEditUtilities.js | 2 +- website/common/script/libs/shops.js | 2 +- 14 files changed, 28 insertions(+), 38 deletions(-) diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss index f61e0b495a..62eb95422f 100644 --- a/website/client/src/assets/scss/button.scss +++ b/website/client/src/assets/scss/button.scss @@ -218,13 +218,12 @@ .btn-show-more { display: block; width: 100%; - margin-top: 12px; padding: 8px; font-size: 14px; line-height: 1.43; font-weight: bold; text-align: center; - background: $gray-600; + background: $gray-500; color: $gray-200 !important; // Otherwise it gets ignored when used on an A element box-shadow: none; diff --git a/website/client/src/components/avatarModal/body-settings.vue b/website/client/src/components/avatarModal/body-settings.vue index 1d908c3b64..b69118c890 100644 --- a/website/client/src/components/avatarModal/body-settings.vue +++ b/website/client/src/components/avatarModal/body-settings.vue @@ -35,7 +35,7 @@ import appearance from '@/../../common/script/content/appearance'; import { subPageMixin } from '../../mixins/subPage'; import { userStateMixin } from '../../mixins/userState'; -import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities'; +import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities'; import subMenu from './sub-menu'; import customizeOptions from './customize-options'; import gem from '@/assets/svg/gem.svg'; @@ -51,7 +51,7 @@ export default { mixins: [ subPageMixin, userStateMixin, - avatarEditorUtilies, + avatarEditorUtilities, ], props: [ 'editing', diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue index 3d155dbc98..338ef86264 100644 --- a/website/client/src/components/avatarModal/customize-options.vue +++ b/website/client/src/components/avatarModal/customize-options.vue @@ -67,11 +67,11 @@ diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue index f2c1d3734d..22e6d78a08 100644 --- a/website/client/src/components/shops/shopItem.vue +++ b/website/client/src/components/shops/shopItem.vue @@ -193,6 +193,7 @@ font-size: 12px; font-weight: bold; line-height: 1.33; + margin-bottom: 1px; &.gems { color: $green-1; @@ -367,6 +368,7 @@ export default { this.$emit('click', {}); }, blur () { + if (!this.$refs?.popover) return; this.$refs.popover.$emit('enable'); }, getPrice () { diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue index 498fadff2e..0dae56b50e 100644 --- a/website/client/src/components/ui/itemRows.vue +++ b/website/client/src/components/ui/itemRows.vue @@ -22,20 +22,12 @@ :show-all="showAll" @click="toggleItemsToShow()" /> -
diff --git a/website/common/locales/en/character.json b/website/common/locales/en/character.json index 943202757c..83c9ec78cc 100644 --- a/website/common/locales/en/character.json +++ b/website/common/locales/en/character.json @@ -2,7 +2,7 @@ "communityGuidelinesWarning": "Please keep in mind that your Display Name, profile photo, and blurb must comply with the Community Guidelines (e.g. no profanity, no adult topics, no insults, etc). If you have any questions about whether or not something is appropriate, feel free to email <%= hrefBlankCommunityManagerEmail %>!", "profile": "Profile", "avatar": "Customize Avatar", - "editAvatar": "Edit Avatar", + "editAvatar": "Customize Avatar", "noDescription": "This Habitican hasn't added a description.", "noPhoto": "This Habitican hasn't added a photo.", "other": "Other",