Quick group fixes (#9001)

* Added tavern background and fixed notification key

* Fixed notification on error response

* Fixed group plans header

* Updated images/icons in tavern
This commit is contained in:
Keith Holliday
2017-08-28 18:39:32 -06:00
committed by GitHub
parent 515fd62dd8
commit 9fc7bae13e
27 changed files with 106 additions and 130 deletions

View File

@@ -84,9 +84,11 @@ export default {
return response;
}, (error) => {
if (error.response.status >= 400) {
this.$notify({
this.$store.state.notificationStore.push({
title: 'Habitica',
text: error.response.data.message,
type: 'error',
timeout: true,
});
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.53 11"><defs></defs><title>Tier 1</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-1"><polygon id="path-1" class="cls-1" points="4.76 0 9.53 2.75 9.53 8.25 4.76 11 0 8.25 0 2.75 4.76 0"/><path class="cls-2" d="M5.5,0.58L1.24,3V8L5.5,10.42,9.76,8V3Z" transform="translate(-0.74)"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 470 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.53 11"><defs></defs><title>Tier 2</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-2"><polygon id="path-1" class="cls-1" points="4.76 0 9.53 2.75 9.53 8.25 4.76 11 0 8.25 0 2.75 4.76 0"/><path class="cls-2" d="M5.5,0.58L1.24,3V8L5.5,10.42,9.76,8V3Z" transform="translate(-0.74)"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 470 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs></defs><title>Tier 3</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-3"><polygon id="path-1" class="cls-1" points="5 0 10 10 0 10 5 0"/><path class="cls-2" d="M5,1.12L0.81,9.5H9.19Z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs></defs><title>Tier 4</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-4"><polygon id="path-1" class="cls-1" points="5 0 10 10 0 10 5 0"/><path class="cls-2" d="M5,1.12L0.81,9.5H9.19Z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs></defs><title>Tier 5</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-5"><rect id="path-1" class="cls-1" width="8" height="8"/><rect class="cls-2" x="0.5" y="0.5" width="7" height="7"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 384 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs></defs><title>Tier 6</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-6"><rect id="path-1" class="cls-1" width="8" height="8"/><rect class="cls-2" x="0.5" y="0.5" width="7" height="7"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 384 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.31 11.31"><defs></defs><title>Tier 7</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-7"><rect id="path-1" class="cls-1" x="1.66" y="1.66" width="8" height="8" transform="translate(-2.34 5.66) rotate(-45)"/><rect class="cls-2" x="2.16" y="2.16" width="7" height="7" transform="translate(-2.34 5.66) rotate(-45)"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 504 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 8 8">
<defs>
<path id="a" d="M290 1705h8v8h-8z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-290 -1705)">
<use fill="#3FDAA2" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M290.5 1705.5h7v7h-7z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 403 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 8 8">
<defs>
<path id="a" d="M290 1649h8v8h-8z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-290 -1649)">
<use fill="#FFBE5D" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M290.5 1649.5h7v7h-7z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 403 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 11 11">
<defs>
<path id="a" d="M275.5 1601.083L270 1591h11z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="rotate(-180 140.5 800.542)">
<use fill="#FF944C" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M275.5 1600.04l4.658-8.54h-9.316l4.658 8.54z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 446 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 11 11">
<defs>
<path id="a" d="M275.5 1545.083L270 1535h11z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="rotate(-180 140.5 772.542)">
<use fill="#FF6165" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M275.5 1544.04l4.658-8.54h-9.316l4.658 8.54z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 446 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
<defs>
<path id="a" d="M282 1480l4.33 2.5v5L282 1490l-4.33-2.5v-5z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-277 -1480)">
<use fill="#C92B2B" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M282 1480.577l-3.83 2.212v4.422l3.83 2.212 3.83-2.212v-4.422l-3.83-2.212z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 485 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
<defs>
<path id="a" d="M282 1424l4.33 2.5v5L282 1434l-4.33-2.5v-5z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-277 -1424)">
<use fill="#FFB6B8" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M282 1424.577l-3.83 2.212v4.422l3.83 2.212 3.83-2.212v-4.422l-3.83-2.212z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 485 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
<defs>
<path id="a" d="M290.657 1760.657h8v8h-8z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="rotate(-45 -1973.144 1234.01)">
<use fill="#5EDDE9" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M291.157 1761.157h7v7h-7z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 427 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="11" viewBox="0 0 12 11">
<defs>
<path id="a" d="M304.706 1824.306l-3.526 1.548.383-3.833-2.563-2.875 3.763-.82 1.943-3.326 1.943 3.326 3.764.82-2.563 2.875.383 3.833z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-299 -1815)">
<use fill="#2995CD" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M307.65 1825.052l-.32-3.2 2.14-2.4-3.142-.685-1.622-2.776-1.622 2.776-3.141.685 2.139 2.4-.32 3.2 2.944-1.292 2.944 1.292z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 609 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.36 11.76"><defs></defs><title>Moderator</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Moderator"><polygon id="path-1" class="cls-1" points="6.18 9.88 2.36 11.76 2.97 7.54 0 4.49 4.2 3.77 6.18 0 8.17 3.77 12.36 4.49 9.4 7.54 10 11.76 6.18 9.88"/><path class="cls-2" d="M9.69,10.89L9.18,7.37l2.48-2.55-3.5-.61L6.5,1.07,4.84,4.22l-3.5.61L3.82,7.37,3.31,10.89,6.5,9.32Z" transform="translate(-0.32)"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 586 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="10" viewBox="0 0 8 10">
<defs>
<path id="a" d="M247 1928h10l-3 4 3 4h-10v-4z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="rotate(90 1091.5 844.5)">
<use fill="#77F4C7" xlink:href="#a"/>
<path stroke="#005737" d="M247.5 1928.5v7h8.5l-2.625-3.5 2.625-3.5h-8.5z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 427 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 11"><defs></defs><title>NPC</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="NPC"><polygon id="path-1" class="cls-1" points="0 0 8 0 8 11 4 7 0 11 0 0"/><path class="cls-2" d="M0.5,0.5V9.79L4,6.29l3.5,3.5V0.5h-7Z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 400 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="8" viewBox="0 0 10 8">
<defs>
<path id="a" d="M275 1873v8h10v-8l-3 3-2.036-2.965L278 1876z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-275 -1873)">
<use fill="#9A62FF" xlink:href="#a"/>
<path stroke="#000" stroke-opacity=".1" d="M275.5 1874.207v6.293h9v-6.293l-2.572 2.572-1.956-2.85-1.893 2.857-2.579-2.579z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 490 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><defs></defs><title>Staff</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Staff"><polygon id="path-1" class="cls-1" points="0 0 3 3 5 0 7 3 10 0 10 8 0 8 0 0"/><path class="cls-2" d="M0.5,1.21V7.5h9V1.21L6.92,3.78,5,0.9,3.08,3.78Z" transform="translate(0 0)"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 450 B

View File

@@ -1,5 +1,5 @@
<template lang="pug">
#app-header.row(:class="{'hide-header': $route.path.startsWith('/group-plans')}")
#app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
create-party-modal
members-modal(:hide-badge="true")
member-details(:member="user")

View File

@@ -271,14 +271,16 @@ export default {
},
mounted () {
this.activePage = this.PAGES.BENEFITS;
this.$store.state.hideHeader = true;
// @TODO: have to handle this better because sub pages have hidden header
// @TODO: I think we can remove this
// this.$store.state.hideHeader = true;
// @TODO: can this be in a mixin?
this.StripeCheckout = window.StripeCheckout;
},
destroyed () {
// @TODO: going from the page back to party modal does not show
this.$store.state.hideHeader = false;
// this.$store.state.hideHeader = false;
},
computed: {
newGroupIsReady () {

View File

@@ -49,10 +49,13 @@
.toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
.svg-icon(v-html="icons.downIcon")
.section.row(v-if="sections.staff")
.col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
.col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
div
.title {{user.name}}
.svg-icon.staff-icon(v-html="icons.tierStaff", v-if='user.type === "Staff"')
.svg-icon.mod-icon(v-html="icons.tierMod", v-if='user.type === "Moderator" && user.name !== "It\'s Bailey"')
.svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
.type {{user.type}}
.svg-icon(v-html="icons.tierChampionIcon")
.section-header
.row
@@ -99,16 +102,36 @@
.col-12
p(v-once) {{ $t('playerTiersDesc') }}
ul.tier-list
li.tier1(v-once) {{ $t('tier1') }}
li.tier2(v-once) {{ $t('tier2') }}
li.tier3(v-once) {{ $t('tier3') }}
li.tier4(v-once) {{ $t('tier4') }}
li.tier5(v-once) {{ $t('tier5') }}
li.tier6(v-once) {{ $t('tier6') }}
li.tier7(v-once) {{ $t('tier7') }}
li.moderator(v-once) {{ $t('tierModerator') }}
li.staff(v-once) {{ $t('tierStaff') }}
li.npc(v-once) {{ $t('tierNPC') }}
li.tier1(v-once)
| {{ $t('tier1') }}
.svg-icon(v-html="icons.tier1")
li.tier2(v-once)
| {{ $t('tier2') }}
.svg-icon(v-html="icons.tier2")
li.tier3(v-once)
| {{ $t('tier3') }}
.svg-icon(v-html="icons.tier3")
li.tier4(v-once)
| {{ $t('tier4') }}
.svg-icon(v-html="icons.tier4")
li.tier5(v-once)
| {{ $t('tier5') }}
.svg-icon(v-html="icons.tier5")
li.tier6(v-once)
| {{ $t('tier6') }}
.svg-icon(v-html="icons.tier6")
li.tier7(v-once)
| {{ $t('tier7') }}
.svg-icon(v-html="icons.tier7")
li.moderator(v-once)
| {{ $t('tierModerator') }}
.svg-icon(v-html="icons.tierMod")
li.staff(v-once)
| {{ $t('tierStaff') }}
.svg-icon(v-html="icons.tierStaff")
li.npc(v-once)
| {{ $t('tierNPC') }}
.svg-icon.npc-icon(v-html="icons.tierNPC")
</template>
<style lang='scss' scoped>
@@ -216,15 +239,35 @@
margin-top: 1em;
}
.npc-icon {
fill: #77f4c7;
stroke: #005737;
}
.staff {
margin-bottom: 1em;
.staff-icon {
fill: #9a62ff;
}
.mod-icon {
fill: #277eab;
}
.title {
color: #6133b4;
font-weight: bold;
display: inline-block;
}
}
.svg-icon {
width: 10px;
display: inline-block;
margin-left: .5em;
}
.tier-list {
list-style-type: none;
padding: 0;
@@ -309,16 +352,16 @@ import questBackground from 'assets/svg/quest-background-border.svg';
import upIcon from 'assets/svg/up.svg';
import downIcon from 'assets/svg/down.svg';
import tierChampionIcon from 'assets/svg/tier-champion-icon.svg';
import tierChampion2Icon from 'assets/svg/tier-champion-2-icon.svg';
import tierEliteIcon from 'assets/svg/tier-elite-icon.svg';
import tierElite2Icon from 'assets/svg/tier-elite-2-icon.svg';
import tierFriendIcon from 'assets/svg/tier-friend-icon.svg';
import tierFriend2Icon from 'assets/svg/tier-friend-2-icon.svg';
import tierLegendaryIcon from 'assets/svg/tier-legendary-icon.svg';
import tierModIcon from 'assets/svg/tier-mod-icon.svg';
import tierNPCIcon from 'assets/svg/tier-npc-icon.svg';
import tierStaffIcon from 'assets/svg/tier-staff-icon.svg';
import tier1 from 'assets/svg/tier-1.svg';
import tier2 from 'assets/svg/tier-2.svg';
import tier3 from 'assets/svg/tier-3.svg';
import tier4 from 'assets/svg/tier-4.svg';
import tier5 from 'assets/svg/tier-5.svg';
import tier6 from 'assets/svg/tier-6.svg';
import tier7 from 'assets/svg/tier-7.svg';
import tierMod from 'assets/svg/tier-mod.svg';
import tierNPC from 'assets/svg/tier-npc.svg';
import tierStaff from 'assets/svg/tier-staff.svg';
export default {
components: {
@@ -329,16 +372,16 @@ export default {
return {
groupId: TAVERN_ID,
icons: Object.freeze({
tierStaffIcon,
tierNPCIcon,
tierModIcon,
tierLegendaryIcon,
tierFriend2Icon,
tierFriendIcon,
tierElite2Icon,
tierEliteIcon,
tierChampion2Icon,
tierChampionIcon,
tier1,
tier2,
tier3,
tier4,
tier5,
tier6,
tier7,
tierMod,
tierNPC,
tierStaff,
gem: gemIcon,
questIcon,
challengeIcon,

View File

@@ -1,7 +1,10 @@
<template lang="pug">
transition(name="fade")
.notification.callout.animated(:class="classes", v-if='show')
.row(v-if='notification.type !== "info" && notification.type !== "drop"')
.row(v-if='notification.type === "error"')
.text.col-12
div(v-html='notification.text')
.row(v-if='notification.type !== "info" && notification.type !== "error" && notification.type !== "drop"')
.text.col-7.offset-1
div
| {{message}}
@@ -14,7 +17,7 @@ transition(name="fade")
.row(v-if='notification.type === "info"')
.text.col-12
div(v-html='notification.text')
.row(v-if='notification.type !== "info" && notification.type === "drop"')
.row(v-if='notification.type !== "info" && notification.type !== "error" && notification.type === "drop"')
.col-2
.icon-item
div(:class='notification.icon')
@@ -39,6 +42,11 @@ transition(name="fade")
padding-top: .5em;
}
.error {
background-color: #f74e52;
color: #fff;
}
.negative {
background-color: #f74e52;
}

View File

@@ -1,6 +1,7 @@
<template lang="pug">
.notifications
notification(v-for='notification in notifications', :notification='notification')
div(v-for='notification in notifications')
notification(:notification='notification')
</template>
<style lang="scss" scoped>