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

Performance: My Challenges (#11065)

Browse Source 
* use the same paging for "myChallenges" only loads 10 per call

* challenges: show loading above the load-more button (instead at the top)

* purple loading message and flat load-more button

* remove comment

* show loadMore button only when the request has 10 entries

* challenge card ui
This commit is contained in:
negue
2019-04-10 22:09:04 +02:00
committed by Matteo Pagliazzi
parent eeddd3f366
commit 4289becccc
8 changed files with 253 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
website/client/components/challenges/challengeItem.vue
View File

@@ -4,28 +4,26 @@
.number
span.svg-icon(v-html="icons.gemIcon")
span.value {{challenge.prize}}
.label {{ $t('challengePrize') }}
.label {{ $t('prize') }}
.challenge-header
router-link(
:to="{ name: 'challenge', params: { challengeId: challenge._id } }"
)
h3.challenge-title(v-markdown='challenge.name')
.owner(v-if="fullLayout")
.owner-item
strong {{ $t('createdBy') }}:
user-link.mx-1(:user="challenge.leader")
.owner-item(v-if="challenge.group && !isTavern(challenge.group)")
strong {{ $t(challenge.group.type) }}:
group-link.mx-1(:group="challenge.group")
.meta
.meta-item
.meta-info
.member-count
.svg-icon.user-icon(v-html="icons.memberIcon")
span.mx-1 {{challenge.memberCount}}
// @TODO: add end date
.meta-item
.svg-icon(v-html="icons.calendarIcon")
strong.mx-1 {{ $t('endDate')}}:
span {{challenge.endDate}}
span.count-label {{challenge.memberCount}}
.divider
.official(v-if="isOfficial")
.svg-icon.user-icon(v-html="icons.officialIcon")
.owner(v-if="fullLayout")
.owner-item
strong {{ $t('createdBy') }}:
user-link.mx-1(:user="challenge.leader")
.owner-item(v-if="challenge.group && !isTavern(challenge.group)")
strong {{ $t(challenge.group.type) }}:
group-link.mx-1(:group="challenge.group")
category-tags.challenge-categories(
:categories="challenge.categories",
:owner="isOwner",
@@ -42,16 +40,23 @@
</template>
<style lang="scss">
@import '~client/assets/scss/colors.scss';
// Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
.challenge-title > p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3em;
line-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
font-size: 20px;
font-weight: bold;
font-style: normal;
font-stretch: condensed;
line-height: 1.4;
letter-spacing: normal;
color: $gray-10;
}
</style>
@@ -84,36 +89,90 @@
font-size: .9em;
}
.official {
margin-right: 8px;
}
.challenge-prize {
text-align: center;
color: $gems-color;
display: inline-block;
float: right;
padding: 1em 1.5em;
padding: 18px 24px;
margin-left: 1em;
background: #eefaf6;
background: #24cc8f19;
border-bottom-left-radius: 4px;
width: 107px;
height: 80px;
.svg-icon {
width: 32px;
width: 24px;
height: 24px;
object-fit: contain;
}
.value {
margin-left: 8px;
font-size: 20px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.4;
letter-spacing: normal;
color: #1ca372;
}
.label {
margin-top: 4px;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.33;
letter-spacing: normal;
text-align: center;
color: #1ca372;
}
}
.challenge-header,
.well-wrapper {
padding: 1em 1.5em;
.divider {
width: 1px;
height: 16px;
background-color: $gray-600;
margin-right: 12px;
margin-left: 12px;
}
.challenge-header {
padding-bottom: .5em;
padding: 16px 20px;
}
.owner {
margin: 1em 0 .5em;
.well-wrapper {
padding: 16px 20px 20px;
}
.meta, .owner {
display: flex;
.challenge-header {
padding-bottom: 0;
}
.meta-info {
height: 24px;
margin-bottom: 8px;
}
.count-label {
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: $gray-50;
margin-left: 4px;
}
.meta-info, .owner, .member-count {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
@@ -134,7 +193,7 @@
.challenge-categories {
clear: right;
display: flex;
padding: 0 1.5em 1em;
padding: 0 20px 16px;
flex-wrap: wrap;
}
@@ -159,9 +218,16 @@
}
.challenge-description {
color: $gray-200;
margin: 0 1.5em;
margin: 0 20px 0;
word-break: break-word;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: $gray-50;
}
.well {
@@ -170,22 +236,65 @@
justify-content: space-evenly;
background-color: $gray-700;
text-align: center;
padding: 1em;
padding: 16px;
border-radius: .25em;
> div {
color: $gray-200;
.value {
font-size: 20px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.4;
letter-spacing: normal;
color: $gray-50;
}
.label {
font-size: 12px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.33;
letter-spacing: normal;
text-align: center;
color: $gray-100;
}
.svg-icon {
color: $gray-300;
object-fit: contain;
color: $gray-100;
}
}
> div.muted {
color: $gray-400;
.value {
opacity: 0.5;
font-size: 20px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.4;
letter-spacing: normal;
color: $gray-50;
}
.label {
opacity: 0.5;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.33;
letter-spacing: normal;
text-align: center;
color: $gray-100;
}
.svg-icon {
color: $gray-500;
object-fit: contain;
opacity: 0.5;
color: $gray-100;
}
}
}
@@ -208,6 +317,7 @@
import todoIcon from 'assets/svg/todo.svg';
import dailyIcon from 'assets/svg/daily.svg';
import rewardIcon from 'assets/svg/reward.svg';
import officialIcon from 'assets/svg/official.svg';
export default {
props: {
@@ -232,6 +342,7 @@
gemIcon,
memberIcon,
calendarIcon,
officialIcon,
}),
};
},
@@ -243,6 +354,9 @@
isMember () {
return this.user.challenges.indexOf(this.challenge._id) !== -1;
},
isOfficial () {
return this.challenge.official || this.challenge.categories.map(category => category.slug).includes('habitica_official');
},
tasksData () {
return [
{