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> <template>
<div <div
class="customize-options" class="customize-options mb-4"
> >
<div <div
v-for="option in items" v-for="option in items"

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

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

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

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

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

@@ -218,11 +218,10 @@
</div> </div>
<div <div
slot="modal-footer" 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 <balanceInfo
class="currency-totals" class="mr-3"
:currency-needed="getPriceClass()" :currency-needed="getPriceClass()"
:amount-needed="item.value" :amount-needed="item.value"
/> />
@@ -250,24 +249,21 @@
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
display: block; display: block;
margin: 24px 0 0 0; margin: 24px 0 0 0;
padding: 16px 24px; padding: 0px;
align-content: center;
> div {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px;
height: 100%;
}
.user-balance { .user-balance {
width: 150px;
height: 16px;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: bold; font-weight: bold;
line-height: 1.33; line-height: 1.33;
color: $gray-100; 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': { case 'haircolor': {
itemInfo = { itemInfo = {
key: item.key, 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', currency: 'gems',
locked: false, locked: false,
notes: '', notes: '',
@@ -401,7 +401,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'hairbase': { case 'hairbase': {
itemInfo = { itemInfo = {
key: item.key, 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', currency: 'gems',
locked: false, locked: false,
notes: '', notes: '',
@@ -418,7 +418,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'hairmustache': { case 'hairmustache': {
itemInfo = { itemInfo = {
key: item.key, 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', currency: 'gems',
locked: false, locked: false,
notes: '', notes: '',
@@ -435,7 +435,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'hairbeard': { case 'hairbeard': {
itemInfo = { itemInfo = {
key: item.key, 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', currency: 'gems',
locked: false, locked: false,
notes: '', notes: '',
@@ -452,7 +452,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'shirt': { case 'shirt': {
itemInfo = { itemInfo = {
key: item.key, key: item.key,
class: `shirt ${user.preferences.size}_shirt_${item.key}`, class: `icon_${user.preferences.size}_shirt_${item.key}`,
currency: 'gems', currency: 'gems',
locked: false, locked: false,
notes: '', notes: '',
@@ -469,7 +469,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
case 'skin': { case 'skin': {
itemInfo = { itemInfo = {
key: item.key, key: item.key,
class: `skin skin_${item.key}`, class: `icon_skin_${item.key}`,
currency: 'gems', currency: 'gems',
locked: false, locked: false,
path: `skin.${item.key}`, 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 => { each(['shirt', 'skin'], type => {
const category = { const category = {
identifier: type, identifier: type,
@@ -651,7 +652,11 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
category.items.push(item); category.items.push(item);
} }
}); });
if (type === 'skin') {
categories.push(category); categories.push(category);
} else {
shirtsCategory = category;
}
}); });
const animalEarsCategory = { const animalEarsCategory = {
@@ -684,6 +689,8 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
.map(gearItem => getItemInfo(user, 'gear', gearItem, officialPinnedItems, language)); .map(gearItem => getItemInfo(user, 'gear', gearItem, officialPinnedItems, language));
categories.push(animalTailsCategory); categories.push(animalTailsCategory);
categories.push(shirtsCategory);
return categories; return categories;
}; };