krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(layouts): May 2 updates

Browse Source
This commit is contained in:
Sabe Jones
2024-05-03 00:14:33 -05:00
parent 87fc01cb81
commit c1ca4e84b8
7 changed files with 9693 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9639
website/client/src/assets/css/sprites/spritesmith-main.css
View File

File diff suppressed because it is too large Load Diff

2
website/client/src/components/avatarModal/customize-options.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="customize-options"
class="customize-options mb-4"
>
<div
v-for="option in items"

33
website/client/src/components/creatorIntro.vue
View File

@@ -151,22 +151,20 @@
<div
v-if="activeTopPage === 'backgrounds'"
id="backgrounds"
class="section customize-section"
class="section customize-section pt-4"
>
<div class="row text-center title-row">
<div class="row text-center title-row mb-1">
<strong>{{ $t('incentiveBackgrounds') }}</strong>
</div>
<div
v-if="standardBackgrounds.length < standardBackgroundMax"
class="row title-row"
>
<div
class="col-12"
class="row title-row mb-3"
>
<div>
{{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
</div>
</div>
<div class="row">
<div class="row justify-content-center mb-4 pb-2">
<div
v-for="bg in standardBackgrounds"
:id="bg.key"
@@ -274,12 +272,12 @@
</div>
</div>
</div>
<div v-if="monthlyBackgrounds.length > 0">
<div
class="row text-center title-row mt-2"
>
<strong>{{ $t('monthlyBackgrounds') }}</strong>
</div>
<div v-if="monthlyBackgrounds.length > 0">
<div class="row title-row">
<div
v-for="(bg) in monthlyBackgrounds"
@@ -301,18 +299,8 @@
/>
</div>
</div>
<customize-banner class="padding-fix" />
</div>
<div v-else>
<h3 v-once>
{{ $t('noItemsOwned') }}
</h3>
<p
v-once
class="w-50 mx-auto"
v-html="$t('visitCustomizationsShop')"
></p>
</div>
<customize-banner v-else class="padding-fix" />
</div>
</div>
<div
@@ -619,7 +607,6 @@
background-color: #f9f9f9;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
min-height: 256px;
}
#creator-background {
@@ -848,12 +835,6 @@
}
#backgrounds {
padding-top: 12px;
.title-row {
margin-bottom: 1em;
}
.backgroundFilterToggle {
display: flex;
flex: 1;

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

@@ -1,47 +1,41 @@
<template>
<div class="d-flex justify-content-around">
<span
<div class="d-flex align-items-center">
<div
class="d-flex align-items-center"
v-for="currency of currencies"
:key="currency.key"
>
<div
class="svg-icon ml-1"
class="svg-icon icon-16 ml-1"
v-html="currency.icon"
></div>
<span
<div
:class="{'notEnough': currency.notEnough}"
class="mx-1"
class="currency-value mx-1 my-auto"
>
{{ currency.value | roundBigNumber }}
</span>
</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
span {
.currency-value {
font-size: 0.75rem;
line-height: 1.33;
color: $gray-100;
margin-bottom: 16px;
margin-top: -4px;
display: inline-block;
}
.svg-icon {
vertical-align: middle;
width: 16px;
height: 16px;
display: inline-block;
}
}
.notEnough {
color: #f23035 !important;
}
.svg-icon {
margin-top: 1px;
}
</style>
<script>

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

@@ -218,11 +218,10 @@
</div>
<div
slot="modal-footer"
class="clearfix"
>
<span class="user-balance float-left">{{ $t('yourBalance') }}</span>
<span class="user-balance ml-3 my-auto">{{ $t('yourBalance') }}</span>
<balanceInfo
class="currency-totals"
class="mr-3"
:currency-needed="getPriceClass()"
:amount-needed="item.value"
/>
@@ -250,24 +249,21 @@
border-bottom-left-radius: 8px;
display: block;
margin: 24px 0 0 0;
padding: 16px 24px;
align-content: center;
padding: 0px;
> div {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px;
height: 100%;
}
.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;
}
}

12
website/common/script/libs/getItemInfo.js
View File

@@ -384,7 +384,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'haircolor': {
itemInfo = {
key: item.key,
class: `hair hair_bangs_${user.preferences.hair.bangs || 1}_${item.key}`,
class: `icon_color_hair_bangs_${user.preferences.hair.bangs || 1}_${item.key}`,
currency: 'gems',
locked: false,
notes: '',
@@ -401,7 +401,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'hairbase': {
itemInfo = {
key: item.key,
class: `hair hair_base_${item.key}_${user.preferences.hair.color}`,
class: `icon_hair_base_${item.key}_${user.preferences.hair.color}`,
currency: 'gems',
locked: false,
notes: '',
@@ -418,7 +418,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'hairmustache': {
itemInfo = {
key: item.key,
class: `hair hair_mustache_${item.key}_${user.preferences.hair.color}`,
class: `icon_hair_mustache_${item.key}_${user.preferences.hair.color}`,
currency: 'gems',
locked: false,
notes: '',
@@ -435,7 +435,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'hairbeard': {
itemInfo = {
key: item.key,
class: `hair hair_beard_${item.key}_${user.preferences.hair.color}`,
class: `icon_hair_beard_${item.key}_${user.preferences.hair.color}`,
currency: 'gems',
locked: false,
notes: '',
@@ -452,7 +452,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'shirt': {
itemInfo = {
key: item.key,
class: `shirt ${user.preferences.size}_shirt_${item.key}`,
class: `icon_${user.preferences.size}_shirt_${item.key}`,
currency: 'gems',
locked: false,
notes: '',
@@ -469,7 +469,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'skin': {
itemInfo = {
key: item.key,
class: `skin skin_${item.key}`,
class: `icon_skin_${item.key}`,
currency: 'gems',
locked: false,
path: `skin.${item.key}`,

7
website/common/script/libs/shops.js
View File

@@ -631,6 +631,7 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
}
});
let shirtsCategory; // shirts need to be at end
each(['shirt', 'skin'], type => {
const category = {
identifier: type,
@@ -651,7 +652,11 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
category.items.push(item);
}
});
if (type === 'skin') {
categories.push(category);
} else {
shirtsCategory = category;
}
});
const animalEarsCategory = {
@@ -684,6 +689,8 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
.map(gearItem => getItemInfo(user, 'gear', gearItem, officialPinnedItems, language));
categories.push(animalTailsCategory);
categories.push(shirtsCategory);
return categories;
};