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

Style fixes (#9108)

Browse Source 
* fixed some columns on smaller screens

* changed mystic hourglass check

* Checked for bad data

* Groupped pets and mounts

* Added show more

* Fixed lint

* Fixed lint
This commit is contained in:
Keith Holliday
2017-09-30 08:34:25 -05:00
committed by GitHub
parent 77d75c4669
commit 9cf2ccf7c4
12 changed files with 140 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/client/components/appFooter.vue
View File

@@ -4,12 +4,12 @@
modify-inventory(v-if="isUserLoaded")
footer.container-fluid
.row
.col-2
.col-12.col-md-2
h3
a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') {{ $t('mobileIOS') }}
h3
a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') {{ $t('mobileAndroid') }}
.col-2
.col-12.col-md-2
h3 Company
ul
li
@@ -28,7 +28,7 @@
a(href='/static/press-kit') {{ $t('presskit') }}
li
a(href='/static/contact') {{ $t('contactUs') }}
.col-2
.col-12.col-md-2
h3 Community
ul
li
@@ -47,7 +47,7 @@
a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
li
a(href='https://www.reddit.com/r/habitrpg/', target='_blank') {{ $t('communityReddit') }}
.col-6
.col-12.col-md-6
.row
.col-6
h3 Developers

2
website/client/components/appMenu.vue
View File

@@ -52,7 +52,7 @@ div
a.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
a.dropdown-item(href="http://habitica.wikia.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
a.dropdown-item(href="http://habitica.wikia.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
.item-with-icon(v-if="userHourglasses != 0")
.item-with-icon(v-if="userHourglasses > 0")
.svg-icon(v-html="icons.hourglasses")
span {{ userHourglasses }}
.item-with-icon

2
website/client/components/challenges/challengeDetail.vue
View File

@@ -51,7 +51,7 @@
)
.row
task-column.col-6(
task-column.col-12.col-sm-6(
v-for="column in columns",
:type="column",
:key="column",

2
website/client/components/challenges/findChallenges.vue
View File

@@ -16,7 +16,7 @@
.svg-icon.positive-icon(v-html="icons.positiveIcon")
span(v-once) {{$t('createChallenge')}}
.row
.col-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
.col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
challenge-item(:challenge='challenge')
</template>

2
website/client/components/challenges/myChallenges.vue
View File

@@ -23,7 +23,7 @@
p(v-once) {{$t('challengeDescription2')}}
.row
.col-6(v-for='challenge in filteredChallenges')
.col-12.col-md-6(v-for='challenge in filteredChallenges')
challenge-item(:challenge='challenge')
</template>

2
website/client/components/challenges/sidebar.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.col-2.standard-sidebar
.col-2.standard-sidebar.hidden-xs-down
.form-group
input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')

2
website/client/components/group-plans/taskInformation.vue
View File

@@ -72,7 +72,7 @@
v-on:taskEdited='taskEdited',
)
.row
task-column.col-3(
task-column.col-12.col-sm-6.col-3(
v-for="column in columns",
:type="column",
:key="column",

4
website/client/components/groups/group.vue
View File

@@ -4,7 +4,7 @@
invite-modal(:group='this.group')
start-quest-modal(:group='this.group')
quest-details-modal(:group='this.group')
.col-8.standard-page
.col-12.col-sm-8.standard-page
.row
.col-6.title-details
h1 {{group.name}}
@@ -46,7 +46,7 @@
.col-12.hr
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
.col-4.sidebar
.col-12.col-sm-4.sidebar
.row(:class='{"guild-background": !isParty}')
.col-6
.col-6

2
website/client/components/groups/sidebar.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.standard-sidebar
.standard-sidebar.hidden-xs-down
.form-group
input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')

4
website/client/components/groups/tavern.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.row
.clearfix.col-8.standard-page
.col-12.col-sm-8.clearfix.standard-page
.row
.col-6.title-details
h1(v-once) {{ $t('welcomeToTavern') }}
@@ -29,7 +29,7 @@
.hr.col-12
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
.col-md-4.sidebar
.col-12.col-sm-4.sidebar
.section
.grassy-meadow-backdrop
.daniel_front

155
website/client/components/inventory/stable/index.vue
View File

@@ -1,6 +1,7 @@
<template lang="pug">
// @TODO: breakdown to componentes and use some SOLID
.row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
.standard-sidebar
.standard-sidebar.col-3.hidden-xs-down
div
#npmMattStable.npc_matt
b-popover(
@@ -53,7 +54,7 @@
@change="updateHideMissing"
)
.standard-page
.standard-page.col-12.col-sm-9
.clearfix
h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
@@ -73,55 +74,49 @@
span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
div(
v-for="petGroup in petGroups",
v-for="(petGroup, index) in petGroups",
v-if="viewOptions[petGroup.key].selected",
:key="petGroup.key"
)
h4(v-if="viewOptions[petGroup.key].animalCount != 0") {{ petGroup.label }}
h4(v-if="viewOptions[petGroup.key].animalCount !== 0") {{ petGroup.label }}
itemRows(
:items="pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
:itemWidth=94,
:itemMargin=24,
:type="petGroup.key",
)
template(slot="item", scope="context")
div(
v-drag.drop.food="context.item.key",
@itemDragOver="onDragOver($event, context.item)",
@itemDropped="onDrop($event, context.item)",
.pet-row.d-flex(
v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
v-if='index === 0 || showMore === petGroup.key')
.pet-group(
v-for='item in group'
v-drag.drop.food="item.key",
@itemDragOver="onDragOver($event, item)",
@itemDropped="onDrop($event, item)",
@itemDragLeave="onDragLeave()",
:class="{'last': context.item.isLastInRow}"
:class="{'last': item.isLastInRow}"
)
petItem(
:item="context.item",
:itemContentClass="getPetItemClass(context.item)",
:item="item",
:itemContentClass="getPetItemClass(item)",
:popoverPosition="'top'",
:progress="context.item.progress",
:emptyItem="!context.item.isOwned()",
:progress="item.progress",
:emptyItem="!item.isOwned()",
:showPopover="currentDraggingFood == null",
:highlightBorder="highlightPet == context.item.key",
@click="petClicked(context.item)"
:highlightBorder="highlightPet == item.key",
@click="petClicked(item)"
)
span(slot="popoverContent")
div.hatchablePopover(v-if="context.item.isHatchable()")
h4.popover-content-title {{ context.item.name }}
div.popover-content-text(v-html="$t('haveHatchablePet', { potion: context.item.potionName, egg: context.item.eggName })")
div.hatchablePopover(v-if="item.isHatchable()")
h4.popover-content-title {{ item.name }}
div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
div.potionEggGroup
div.potionEggBackground
div(:class="'Pet_HatchingPotion_'+context.item.potionKey")
div(:class="'Pet_HatchingPotion_'+item.potionKey")
div.potionEggBackground
div(:class="'Pet_Egg_'+context.item.eggKey")
div(:class="'Pet_Egg_'+item.eggKey")
div(v-else)
h4.popover-content-title {{ context.item.name }}
h4.popover-content-title {{ item.name }}
template(slot="itemBadge", scope="context")
starBadge(
:selected="context.item.key === currentPet",
:show="context.item.isOwned()",
@click="selectPet(context.item)",
)
starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
.btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
| {{ showMore === petGroup.key ? $t('showLess') : $t('showMore') }}
h2
| {{ $t('mounts') }}
@@ -135,31 +130,30 @@
)
h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
itemRows(
:items="mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)",
:itemWidth=94,
:itemMargin=24,
:type="mountGroup.key",
)
template(slot="item", scope="context")
.pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
v-if='index === 0 || showMore === mountGroup.key')
.pet-group(v-for='item in group')
mountItem(
:item="context.item",
:itemContentClass="context.item.isOwned() ? ('Mount_Icon_' + context.item.key) : 'PixelPaw GreyedOut'",
:key="context.item.key",
:item="item",
:itemContentClass="item.isOwned() ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
:key="item.key",
:popoverPosition="'top'",
:emptyItem="!context.item.isOwned()",
:emptyItem="!item.isOwned()",
:showPopover="true",
@click="selectMount(context.item)"
@click="selectMount(item)"
)
span(slot="popoverContent")
h4.popover-content-title {{ context.item.name }}
h4.popover-content-title {{ item.name }}
template(slot="itemBadge", scope="context")
starBadge(
:selected="context.item.key === currentMount",
:show="context.item.isOwned()",
@click="selectMount(context.item)",
:selected="item.key === currentMount",
:show="item.isOwned()",
@click="selectMount(item)",
)
.btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
| {{ showMore === mountGroup.key ? $t('showLess') : $t('showMore') }}
drawer(
:title="$t('quickInventory')",
:errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ? $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null"
@@ -219,7 +213,6 @@
:visible="hatchablePet != null",
@change="resetHatchablePet($event)"
)
div.content(v-if="hatchablePet")
div.potionEggGroup
div.potionEggBackground
@@ -253,11 +246,9 @@
div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
div.popover
div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
</template>
<style lang="scss">
@import '~client/assets/scss/colors.scss';
@import '~client/assets/scss/modal.scss';
@@ -283,6 +274,20 @@
top: -16px !important;
}
.group {
height: 130px;
overflow: hidden;
}
.pet-row {
max-width: 100%;
flex-wrap: wrap;
.item {
margin-right: .5em;
}
}
.hatchablePopover {
width: 180px
}
@@ -500,6 +505,7 @@
import _filter from 'lodash/filter';
import _flatMap from 'lodash/flatMap';
import _throttle from 'lodash/throttle';
import groupBy from 'lodash/groupBy';
import Item from '../item';
import ItemRows from 'client/components/ui/itemRows';
@@ -585,6 +591,7 @@
currentDraggingFood: null,
selectedDrawerTab: 0,
showMore: '',
};
},
watch: {
@@ -712,7 +719,13 @@
},
},
methods: {
setShowMore (key) {
if (this.showMore === key) {
this.showMore = '';
return;
}
this.showMore = key;
},
getAnimalList (animalGroup, type) {
let key = animalGroup.key;
@@ -833,11 +846,39 @@
},
pets (animalGroup, hideMissing, sortBy, searchText) {
return this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
let pets = this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
// Don't group special
if (animalGroup.key === 'specialPets') {
return {none: pets};
}
let groupKey = 'eggKey';
if (sortBy === 'sortByColor') {
groupKey = 'potionKey';
} else if (sortBy === 'AZ') {
groupKey = '';
}
return groupBy(pets, groupKey);
},
mounts (animalGroup, hideMissing, sortBy, searchText) {
return this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
let mounts = this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
// Don't group special
if (animalGroup.key === 'specialMounts') {
return {none: mounts};
}
let groupKey = 'eggKey';
if (sortBy === 'sortByColor') {
groupKey = 'potionKey';
} else if (sortBy === 'AZ') {
groupKey = '';
}
return groupBy(mounts, groupKey);
},
getPetItemClass (pet) {

22
website/client/components/notificationMenu.vue
View File

@@ -37,11 +37,11 @@ div.item-with-icon.item-notifications.dropdown
@click='go("/user/profile")')
span.glyphicon.glyphicon-plus-sign
span {{ $t('haveUnallocated', {points: user.stats.points}) }}
a.dropdown-item(v-for='(message, key) in user.newMessages', v-if='message.value')
span(@click='navigateToGroup(key)')
a.dropdown-item(v-for='message in userNewMessages')
span(@click='navigateToGroup(message.key)')
span.glyphicon.glyphicon-comment
span {{message.name}}
span.clear-button(@click='clearMessages(key)', :popover="$t('clear')",
span.clear-button(@click='clearMessages(message.key)', :popover="$t('clear')",
popover-placement='right', popover-trigger='mouseenter', popover-append-to-body='true') Clear
a.dropdown-item(v-for='(notification, index) in user.groupNotifications', @click='viewGroupApprovalNotification(notification, index, true)')
span(:class="groupApprovalNotificationIcon(notification)")
@@ -156,6 +156,18 @@ export default {
return {name: ''};
// return this.user.party;
},
userNewMessages () {
// @TODO: For some reason data becomes corrupted. We should fix this on the server
let userNewMessages = [];
for (let key in this.user.newMessages) {
let message = this.user.newMessages[key];
if (message && message.name && message.value) {
message.key = key;
userNewMessages.push(message);
}
}
return userNewMessages;
},
},
methods: {
// @TODO: I hate this function, we can do better with a hashmap
@@ -244,8 +256,8 @@ export default {
count += this.user.stats.points > 0 ? 1 : 0;
}
if (this.user.newMessages) {
count += Object.keys(this.user.newMessages).length;
if (this.userNewMessages) {
count += Object.keys(this.userNewMessages).length;
}
return count;