mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-15 21:57:22 +01:00
Client: Header & Menu & Icons (#8770)
* header revamp - wip * fix webpack fonts * wip icons * fix compilation errors * implement icons loading without iconmoo * new svg implementation * wip * fix issues with svgs * fix issues with svgs * fix bits svg * fix displaying of pet in avatar * avatar class icon * no party header * update navigation * split code by route * round gems and gp * add string for faqs * fix icons in css
This commit is contained in:
Matteo Pagliazzi
GitHub
@@ -1,31 +1,55 @@
|
||||
<template lang="pug">
|
||||
#app-header.row
|
||||
user-list-detail
|
||||
user-list-detail(:user="user")
|
||||
.no-party.d-flex.justify-content-center.text-center(v-if="!user.party._id")
|
||||
.align-self-center(v-once)
|
||||
h3 {{ $t('battleWithFriends') }}
|
||||
span.small-text(v-html="$t('inviteFriendsParty')")
|
||||
br
|
||||
button.btn.btn-primary {{ $t('startAParty') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
// TODO move to colors.scss if used in other places
|
||||
$header-dark-background: #271B3D;
|
||||
$header-text-color: #D5C8FF;
|
||||
|
||||
/* TODO refactor: only partially ported from SemanticUI; */
|
||||
#app-header {
|
||||
padding-left: 14px;
|
||||
margin-top: 56px;
|
||||
background: $purple-50;
|
||||
height: 192px;
|
||||
color: $header-text-color;
|
||||
height: 204px;
|
||||
color: $header-color;
|
||||
}
|
||||
|
||||
.no-party {
|
||||
flex-grow: 1;
|
||||
|
||||
.small-text {
|
||||
color: $header-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
import UserListDetail from './userListDetail';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UserListDetail,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template lang="pug">
|
||||
nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
||||
.navbar-header
|
||||
// TODO srcset / svg images
|
||||
img(src="~assets/header/png/logo@3x.png")
|
||||
.logo.svg-icon(v-html="icons.logo")
|
||||
.collapse.navbar-collapse
|
||||
ul.navbar-nav.mr-auto
|
||||
router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
|
||||
@@ -13,20 +12,18 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
||||
router-link.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
|
||||
router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
|
||||
router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
|
||||
router-link.nav-item(tag="li", :to="{name: 'market'}", exact)
|
||||
a.nav-link(v-once) {{ $t('market') }}
|
||||
router-link.nav-item(tag="li", :to="{name: 'shops'}", exact)
|
||||
a.nav-link(v-once) {{ $t('shops') }}
|
||||
router-link.nav-item(tag="li", :to="{name: 'party'}", exact)
|
||||
a.nav-link(v-once) {{ $t('party') }}
|
||||
router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
|
||||
a.nav-link(v-once) {{ $t('guilds') }}
|
||||
.dropdown-menu
|
||||
router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
|
||||
router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
|
||||
router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
|
||||
router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
|
||||
a.nav-link(v-once) {{ $t('social') }}
|
||||
.dropdown-menu
|
||||
router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
|
||||
router-link.dropdown-item(:to="{name: 'challenges'}") {{ $t('challenges') }}
|
||||
router-link.dropdown-item(:to="{name: 'party'}") {{ $t('party') }}
|
||||
router-link.nav-item(tag="li", :to="{name: 'challenges'}", exact)
|
||||
a.nav-link(v-once) {{ $t('challenges') }}
|
||||
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
|
||||
a.nav-link(v-once) {{ $t('help') }}
|
||||
.dropdown-menu
|
||||
@@ -34,40 +31,43 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
||||
router-link.dropdown-item(to="/help/report-bug") {{ $t('reportBug') }}
|
||||
router-link.dropdown-item(to="/help/request-feature") {{ $t('requestAF') }}
|
||||
.item-with-icon
|
||||
img(src="~assets/header/png/gem@3x.png")
|
||||
span {{userGems}}
|
||||
.svg-icon(v-html="icons.gem")
|
||||
span {{userGems | roundBigNumber}}
|
||||
.item-with-icon
|
||||
img(src="~assets/header/png/gold@3x.png")
|
||||
span {{user.stats.gp | floor}}
|
||||
.item-with-icon
|
||||
img(src="~assets/header/png/notifications@3x.png")
|
||||
router-link.dropdown.item-with-icon(:to="{name: 'avatar'}")
|
||||
// TODO icons should be white when active
|
||||
img(src="~assets/header/png/user@3x.png")
|
||||
.svg-icon(v-html="icons.gold")
|
||||
span {{user.stats.gp | roundBigNumber}}
|
||||
.item-with-icon.item-notifications
|
||||
.svg-icon(v-html="icons.notifications")
|
||||
router-link.dropdown.item-with-icon.item-user(:to="{name: 'avatar'}")
|
||||
.svg-icon(v-html="icons.user")
|
||||
.dropdown-menu.dropdown-menu-right.user-dropdown
|
||||
router-link.dropdown-item(:to="{name: 'avatar'}") {{ $t('editAvatar') }}
|
||||
// .dropdown-divider
|
||||
router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}")
|
||||
h3 {{ user.profile.name }}
|
||||
span.small-text {{ $t('editAvatar') }}
|
||||
//.dropdown-divider
|
||||
router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
|
||||
router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
|
||||
// .dropdown-divider
|
||||
router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
|
||||
// .dropdown-divider
|
||||
router-link.dropdown-item(to="/logout") {{ $t('logout') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/utils.scss';
|
||||
|
||||
nav.navbar {
|
||||
background: $purple-100 url(~assets/header/png/bits.png) right no-repeat;
|
||||
padding: 0 1.5rem;
|
||||
background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
|
||||
padding-left: 25px;
|
||||
padding-right: 12.5px;
|
||||
height: 56px;
|
||||
box-shadow: 0 1px 2px 0 rgba($black, 0.24);
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
margin-right: 3rem;
|
||||
margin-right: 48px;
|
||||
|
||||
img {
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
@@ -78,18 +78,18 @@ nav.navbar {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 16px 24px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
background: $purple-300;
|
||||
background: $purple-200;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,&:hover {
|
||||
&.active:not(:hover) {
|
||||
.nav-link {
|
||||
box-shadow: 0px -4px 0px $purple-300 inset;
|
||||
}
|
||||
@@ -102,8 +102,12 @@ nav.navbar {
|
||||
margin-top: 0; // remove the gap so it doesn't close
|
||||
}
|
||||
|
||||
.dropdown + .dropdown {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.dropdown-menu:not(.user-dropdown) {
|
||||
background: $purple-300;
|
||||
background: $purple-200;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@@ -117,13 +121,14 @@ nav.navbar {
|
||||
box-shadow: none;
|
||||
color: $white;
|
||||
border: none;
|
||||
line-height: 1.5;
|
||||
|
||||
&.active {
|
||||
background: $purple-300;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $purple-200;
|
||||
background: $purple-300;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 5px;
|
||||
@@ -135,23 +140,76 @@ nav.navbar {
|
||||
|
||||
.item-with-icon {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
padding: 0.75rem 0;
|
||||
padding-left: 1rem;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
padding-top: 16px;
|
||||
padding-left: 16px;
|
||||
|
||||
img {
|
||||
.svg-icon {
|
||||
vertical-align: middle;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 0.5rem;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.item-notifications, .item-user {
|
||||
padding-right: 12.5px;
|
||||
padding-left: 12.5px;
|
||||
color: $header-color;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 0px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.item-notifications {
|
||||
margin-left: 33.5px;
|
||||
}
|
||||
|
||||
.item-user .edit-avatar {
|
||||
h3 {
|
||||
color: $gray-10;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
color: $gray-200;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'client/libs/store';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import goldIcon from 'assets/svg/gold.svg';
|
||||
import notificationsIcon from 'assets/svg/notifications.svg';
|
||||
import userIcon from 'assets/svg/user.svg';
|
||||
import logo from 'assets/svg/logo.svg';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gem: gemIcon,
|
||||
gold: goldIcon,
|
||||
notifications: notificationsIcon,
|
||||
user: userIcon,
|
||||
logo,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
userGems: 'user:gems',
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
.avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
|
||||
.character-sprites
|
||||
template(v-if="!avatarOnly" v-once)
|
||||
// Mount
|
||||
// Mount Body
|
||||
span(v-if="user.items.currentMount", :class="'Mount_Body_' + user.items.currentMount")
|
||||
|
||||
// Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc
|
||||
@@ -40,13 +40,18 @@
|
||||
span(v-if="user.items.currentMount", :class="'Mount_Head_' + user.items.currentMount")
|
||||
// Pet
|
||||
span.current-pet(v-if="user.items.currentPet", :class="'Pet-' + user.items.currentPet")
|
||||
.class-badge.d-flex.justify-content-center(v-if="user.flags.classSelected")
|
||||
.align-self-center.svg-icon(v-html="icons[user.stats.class]")
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.avatar {
|
||||
width: 140px;
|
||||
height: 147px;
|
||||
image-rendering: pixelated;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.character-sprites {
|
||||
@@ -60,12 +65,35 @@
|
||||
}
|
||||
|
||||
.current-pet {
|
||||
bottom: 21px;
|
||||
left: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.class-badge {
|
||||
$badge-size: 32px;
|
||||
position: absolute;
|
||||
left: calc(50% - (16px));
|
||||
bottom: -($badge-size / 2);
|
||||
|
||||
width: $badge-size;
|
||||
height: $badge-size;
|
||||
background: $white;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
border-radius: 100px;
|
||||
|
||||
.svg-icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import warriorIcon from 'assets/svg/warrior.svg';
|
||||
import rogueIcon from 'assets/svg/rogue.svg';
|
||||
import healerIcon from 'assets/svg/healer.svg';
|
||||
import wizardIcon from 'assets/svg/wizard.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
user: {
|
||||
@@ -85,6 +113,16 @@ export default {
|
||||
default: 147,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
warrior: warriorIcon,
|
||||
rogue: rogueIcon,
|
||||
healer: healerIcon,
|
||||
wizard: wizardIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
paddingTop () {
|
||||
let val = '28px';
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.float-right
|
||||
span.dropdown-label {{ $t('sortBy') }}
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
.col-md-12
|
||||
public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
|
||||
mugen-scroll(
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
|
||||
b-tooltip.icon(:content="$t('privateDescription')")
|
||||
img(src='~assets/guilds/information.svg')
|
||||
.svg-icon(v-html='icons.information')
|
||||
|
||||
br
|
||||
label.custom-control.custom-checkbox
|
||||
@@ -34,7 +34,7 @@
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('privateGuild') }}
|
||||
b-tooltip.icon(:content="$t('privateDescription')")
|
||||
img(src='~assets/guilds/information.svg')
|
||||
.svg-icon(v-html='icons.information')
|
||||
|
||||
br
|
||||
label.custom-control.custom-checkbox
|
||||
@@ -72,20 +72,20 @@
|
||||
|
||||
.form-group.text-center
|
||||
div.item-with-icon
|
||||
img(src="~assets/guilds/green-gem.svg")
|
||||
.svg-icon(v-html="icons.gem")
|
||||
span.count 4
|
||||
button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('createGuild') }}
|
||||
button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('updateGuild') }}
|
||||
.gem-description(v-once) {{ $t('guildGemCostInfo') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
textarea {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
|
||||
.description-count, .gem-description {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
@@ -175,6 +175,9 @@ import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
|
||||
import bFormSelect from 'bootstrap-vue/lib/components/form-select';
|
||||
import bTooltip from 'bootstrap-vue/lib/components/tooltip';
|
||||
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import informationIcon from 'assets/svg/information.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bModal,
|
||||
@@ -256,6 +259,11 @@ export default {
|
||||
});
|
||||
data.categoriesHashByKey = hashedCategories;
|
||||
|
||||
data.icons = Object.freeze({
|
||||
gem: gemIcon,
|
||||
information: informationIcon,
|
||||
});
|
||||
|
||||
return data;
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -12,12 +12,12 @@
|
||||
.float-right
|
||||
.row.icon-row
|
||||
.col-6
|
||||
img.icon.shield(src="~assets/guilds/gold-guild-badge.svg")
|
||||
.svg-icon.shield(v-html="icons.goldGuildBadge")
|
||||
span.number {{guild.memberCount}}
|
||||
div(v-once) {{ $t('guildMembers') }}
|
||||
.col-6
|
||||
.item-with-icon
|
||||
img.icon.gem(src="~assets/header/png/gem@3x.png")
|
||||
.svg-icon.gem(v-html="icons.gem")
|
||||
span.number {{guild.memberCount}}
|
||||
div(v-once) {{ $t('guildBank') }}
|
||||
.row.chat-row
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
.row
|
||||
.col-md-2
|
||||
img.icon(src="~assets/chat/like.svg")
|
||||
.svg-icon(v-html="icons.like")
|
||||
.col-md-10
|
||||
.card(v-for="msg in guild.chat", :key="msg.id")
|
||||
.card-block
|
||||
@@ -44,19 +44,19 @@
|
||||
.text {{msg.text}}
|
||||
hr
|
||||
span.action(v-once)
|
||||
img.icon(src="~assets/chat/like.svg")
|
||||
.svg-icon(v-html="icons.like")
|
||||
| {{$t('like')}}
|
||||
span.action(v-once)
|
||||
img.icon(src="~assets/chat/copy.svg")
|
||||
.svg-icon(v-html="icons.copy")
|
||||
| {{$t('copyAsTodo')}}
|
||||
span.action(v-once)
|
||||
img.icon(src="~assets/chat/report.svg")
|
||||
.svg-icon(v-html="icons.report")
|
||||
| {{$t('report')}}
|
||||
span.action(v-once)
|
||||
img.icon(src="~assets/chat/delete.svg")
|
||||
.svg-icon(v-html="icons.delete")
|
||||
| {{$t('delete')}}
|
||||
span.action.float-right
|
||||
img.icon(src="~assets/chat/liked.svg")
|
||||
.svg-icon(v-html="icons.liked")
|
||||
| +3
|
||||
|
||||
.col-md-4.sidebar
|
||||
@@ -100,105 +100,104 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.sidebar {
|
||||
background-color: $gray-600;
|
||||
.sidebar {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 2em 0;
|
||||
padding: 1em;
|
||||
|
||||
h3.leader {
|
||||
color: $purple-200;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 2em 0;
|
||||
padding: 1em;
|
||||
|
||||
h3.leader {
|
||||
color: $purple-200;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
line-height: 1.43;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.guild-background {
|
||||
background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
background-color: $white;
|
||||
border: solid 1px $gray-400;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
line-height: 1.43;
|
||||
color: $gray-300;
|
||||
padding: .5em;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.icon.shield, .icon.gem {
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.guild-background {
|
||||
background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.icon-row {
|
||||
width: 200px;
|
||||
margin-top: 3em;
|
||||
margin-right: 3em;
|
||||
textarea {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: solid 1px $gray-400;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
line-height: 1.43;
|
||||
color: $gray-300;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.chat-row {
|
||||
margin-top: 2em;
|
||||
.icon-row {
|
||||
width: 200px;
|
||||
margin-top: 3em;
|
||||
margin-right: 3em;
|
||||
|
||||
.send-chat {
|
||||
margin-top: -3.5em;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $gray-500;
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.hr-middle {
|
||||
font-size: 16px;
|
||||
.number {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
background-color: $gray-700;
|
||||
padding: .2em;
|
||||
margin-top: .2em;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
span.action {
|
||||
font-size: 14px;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
font-weight: 500;
|
||||
.chat-row {
|
||||
margin-top: 2em;
|
||||
|
||||
.send-chat {
|
||||
margin-top: -3.5em;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
span.action .icon {
|
||||
margin-right: .3em;
|
||||
}
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $gray-500;
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.hr-middle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
background-color: $gray-700;
|
||||
padding: .2em;
|
||||
margin-top: .2em;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
span.action {
|
||||
font-size: 14px;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
font-weight: 500;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
span.action .icon {
|
||||
margin-right: .3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -206,6 +205,14 @@ import groupUtilities from 'client/mixins/groupsUtilities';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import membersModal from './membersModal';
|
||||
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import copyIcon from 'assets/svg/copy.svg';
|
||||
import likeIcon from 'assets/svg/like.svg';
|
||||
import likedIcon from 'assets/svg/liked.svg';
|
||||
import reportIcon from 'assets/svg/report.svg';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
|
||||
|
||||
export default {
|
||||
mixins: [groupUtilities],
|
||||
props: ['guildId'],
|
||||
@@ -215,6 +222,15 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
guild: null,
|
||||
icons: Object.freeze({
|
||||
like: likeIcon,
|
||||
copy: copyIcon,
|
||||
report: reportIcon,
|
||||
delete: deleteIcon,
|
||||
gem: gemIcon,
|
||||
goldGuildBadge: goldGuildBadgeIcon,
|
||||
liked: likedIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -16,7 +16,7 @@ div
|
||||
.col-6
|
||||
span.dropdown-label {{ $t('sortBy') }}
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
.row(v-for='member in members', :key='member', )
|
||||
.col-8
|
||||
user-list-detail
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
.col-10.no-guilds.standard-page(v-if='filteredGuilds.length === 0')
|
||||
.no-guilds-wrapper
|
||||
img(src='~assets/guilds/grey-badge.svg')
|
||||
.svg-icon(v-html='icons.greyBadge')
|
||||
h2 {{$t('noGuildsTitle')}}
|
||||
p {{$t('noGuildsParagraph1')}}
|
||||
p {{$t('noGuildsParagraph2')}}
|
||||
@@ -17,33 +17,33 @@
|
||||
.float-right
|
||||
span.dropdown-label {{ $t('sortBy') }}
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
.row
|
||||
.col-md-12
|
||||
public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-gem-bank='true')
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
.sort-select {
|
||||
margin: 2em;
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
.sort-select {
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
.no-guilds {
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
margin-top: 15em;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
}
|
||||
|
||||
.no-guilds {
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
margin-top: 15em;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
}
|
||||
|
||||
.no-guilds-wrapper {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.no-guilds-wrapper {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -58,11 +58,16 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
||||
import PublicGuildItem from './publicGuildItem';
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
import greyBadgeIcon from 'assets/svg/grey-badge.svg';
|
||||
|
||||
export default {
|
||||
mixins: [groupUtilities],
|
||||
components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
greyBadge: greyBadgeIcon,
|
||||
}),
|
||||
loading: false,
|
||||
search: '',
|
||||
filters: {},
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.card-block
|
||||
.row
|
||||
.col-md-2
|
||||
img.icon.shield(src="~assets/guilds/gold-guild-badge.svg")
|
||||
.svg-icon.shield(v-html="icons.goldGuildBadge")
|
||||
.member-count {{guild.memberCount}}
|
||||
.col-md-10
|
||||
.row
|
||||
@@ -15,7 +15,7 @@
|
||||
button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
|
||||
button.btn.btn-success(v-if='!isMember' @click='join()', v-once) {{ $t('join') }}
|
||||
div.item-with-icon(v-if='displayGemBank')
|
||||
img(src="~assets/guilds/green-gem.svg")
|
||||
.svg-icon(v-html="icons.gem")
|
||||
span.count {{ guild.balance }}
|
||||
div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
|
||||
.row
|
||||
@@ -26,89 +26,84 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.card {
|
||||
height: 260px;
|
||||
border-radius: 4px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
.card {
|
||||
height: 260px;
|
||||
border-radius: 4px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.category-label {
|
||||
min-width: 100px;
|
||||
border-radius: 100px;
|
||||
background-color: $gray-600;
|
||||
padding: .5em;
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.33;
|
||||
text-align: center;
|
||||
color: $gray-300;
|
||||
.category-label {
|
||||
min-width: 100px;
|
||||
border-radius: 100px;
|
||||
background-color: $gray-600;
|
||||
padding: .5em;
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.33;
|
||||
text-align: center;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.recommend-text {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
line-height: 2;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.cta-container {
|
||||
margin: 0 auto;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.item-with-icon {
|
||||
.svg-icon {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.recommend-text {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
line-height: 2;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.cta-container {
|
||||
margin: 0 auto;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.shield {
|
||||
width: 70px;
|
||||
height: 76px;
|
||||
margin: auto;
|
||||
margin: 4em auto;
|
||||
display: block;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.item-with-icon {
|
||||
img {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 20px;
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
margin-left: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
.guild-bank {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
position: relative;
|
||||
top: -3.6em;
|
||||
left: -.1em;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
color: #b36213;
|
||||
.count {
|
||||
font-size: 20px;
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
margin-left: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
.shield {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.guild-bank {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
position: relative;
|
||||
top: -3.6em;
|
||||
left: -.1em;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
color: #b36213;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
import groupUtilities from 'client/mixins/groupsUtilities';
|
||||
import findIndex from 'lodash/findIndex';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
|
||||
|
||||
export default {
|
||||
mixins: [groupUtilities],
|
||||
@@ -119,6 +114,14 @@ export default {
|
||||
return this.isMemberOfGroup(this.user, this.guild);
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gem: gemIcon,
|
||||
goldGuildBadge: goldGuildBadgeIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async join () {
|
||||
// @TODO: This needs to be in the notifications where users will now accept invites
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
.drawer-container
|
||||
.drawer-title(@click="open = !open")
|
||||
| {{title}}
|
||||
img.drawer-toggle-icon(src="~assets/drawer/minimize.svg", v-if="open")
|
||||
img.drawer-toggle-icon.closed(src="~assets/drawer/expand.svg", v-else)
|
||||
.drawer-toggle-icon.svg-icon(v-html="open ? icons.minimize : icons.expand", :class="{ closed: !open }")
|
||||
transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
|
||||
.drawer-content(v-show="open")
|
||||
slot(name="drawer-header")
|
||||
@@ -36,10 +35,10 @@
|
||||
|
||||
.drawer-toggle-icon {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
margin-right: 16px;
|
||||
|
||||
&.closed {
|
||||
margin-top: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -128,6 +127,9 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import expandIcon from 'assets/svg/expand.svg';
|
||||
import minimizeIcon from 'assets/svg/minimize.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
@@ -141,6 +143,10 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
open: true,
|
||||
icons: Object.freeze({
|
||||
expand: expandIcon,
|
||||
minimize: minimizeIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
secondary-menu.col-12
|
||||
router-link.nav-link(:to="{name: 'tavern'}", exact) {{ $t('tavern') }}
|
||||
router-link.nav-link(:to="{name: 'inbox'}") {{ $t('inbox') }}
|
||||
router-link.nav-link(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
|
||||
.col-12
|
||||
router-view
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SecondaryMenu from 'client/components/secondaryMenu';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SecondaryMenu,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,53 +1,67 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
avatar#header-avatar(:user="user", style='float:left;')
|
||||
div(style='float:left;')
|
||||
span.character-name {{user.profile.name}}
|
||||
span.character-level Lvl {{user.stats.lvl}}
|
||||
.d-flex
|
||||
avatar#header-avatar(:user="user")
|
||||
div
|
||||
h3.character-name
|
||||
| {{user.profile.name}}
|
||||
.is-buffed(v-if="isBuffed")
|
||||
.svg-icon(v-html="icons.buff")
|
||||
span.small-text.character-level {{ characterLevel }}
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/health@3x.png")
|
||||
.svg-icon(v-html="icons.health")
|
||||
.progress
|
||||
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
|
||||
span {{user.stats.hp | round}} / {{MAX_HEALTH}}
|
||||
.progress-bar.bg-health(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
|
||||
span.small-text {{user.stats.hp | round}} / {{MAX_HEALTH}}
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/experience@3x.png")
|
||||
.svg-icon(v-html="icons.experience")
|
||||
.progress
|
||||
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
span {{user.stats.exp | round}} / {{toNextLevel}}
|
||||
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
img.icon(src="~assets/header/png/magic@3x.png")
|
||||
.progress-bar.bg-experience(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
span.small-text {{user.stats.exp | round}} / {{toNextLevel}}
|
||||
.progress-container.d-flex(v-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
.svg-icon(v-html="icons.mana")
|
||||
.progress
|
||||
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
span {{user.stats.mp | round}} / {{maxMP}}
|
||||
.progress-bar.bg-mana(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
span.small-text {{user.stats.mp | round}} / {{maxMP}}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
// TODO move to colors.scss if used in other places
|
||||
$header-dark-background: #271B3D;
|
||||
$header-text-color: #D5C8FF;
|
||||
.small-text {
|
||||
color: $header-color;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 32px;
|
||||
line-height: 1.5;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 1px;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.character-level {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1;
|
||||
font-style: normal;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.is-buffed {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: $header-dark-background;
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
.svg-icon {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#header-avatar {
|
||||
margin-top: 24px;
|
||||
margin-right: 1rem;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
@@ -55,58 +69,87 @@ $header-text-color: #D5C8FF;
|
||||
}
|
||||
|
||||
.progress-container > span {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
line-height: 1em;
|
||||
color: $header-color;
|
||||
margin-left: 16px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.progress-container > .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 10px;
|
||||
.progress-container > .svg-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
width: 203px;
|
||||
margin: 0px;
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
height: 16px;
|
||||
background-color: $header-dark-background;
|
||||
}
|
||||
|
||||
.progress-container > .progress > .progress-bar {
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
height: 16px;
|
||||
min-width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Avatar from './avatar';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import { mapState, mapGetters } from 'client/libs/store';
|
||||
|
||||
import { toNextLevel } from '../../common/script/statHelpers';
|
||||
import statsComputed from '../../common/script/libs/statsComputed';
|
||||
import percent from '../../common/script/libs/percent';
|
||||
|
||||
import buffIcon from 'assets/svg/buff.svg';
|
||||
import healthIcon from 'assets/svg/health.svg';
|
||||
import experienceIcon from 'assets/svg/experience.svg';
|
||||
import manaIcon from 'assets/svg/mana.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
buff: buffIcon,
|
||||
health: healthIcon,
|
||||
experience: experienceIcon,
|
||||
mana: manaIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
percent,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
MAX_HEALTH: 'constants.MAX_HEALTH',
|
||||
}),
|
||||
...mapGetters({
|
||||
isBuffed: 'user:isBuffed',
|
||||
}),
|
||||
maxMP () {
|
||||
return statsComputed(this.user).maxMP;
|
||||
},
|
||||
toNextLevel () { // Exp to next level
|
||||
return toNextLevel(this.user.stats.lvl);
|
||||
},
|
||||
characterLevel () {
|
||||
return `${this.$t('level')} ${this.user.stats.lvl} ${
|
||||
this.user.stats.class ? this.$t(this.user.stats.class) : ''
|
||||
}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user