mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-15 21:57:22 +01:00
Client: semantic ui -> bootstrap 4 and less -> scss (#8535)
* client: semantic ui -> bootstrap 4 and less -> scss * start porting components to boostrap * port header, start porting menu * port loading screen * port most of the menu * port secondary menus * port guilds and stable * disable tavern for now, port inbox * typo * put back old tavern code
This commit is contained in:
Matteo Pagliazzi
GitHub
@@ -1,32 +1,32 @@
|
||||
<template lang="pug">
|
||||
#app-header.row
|
||||
avatar#header-avatar(:user="$store.state.user")
|
||||
.eight.wide.column
|
||||
div
|
||||
span.character-name {{user.profile.name}}
|
||||
span.character-level Lvl {{user.stats.lvl}}
|
||||
.progress-container
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/health@3x.png")
|
||||
.ui.progress.red
|
||||
.bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
|
||||
.progress
|
||||
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
|
||||
span {{user.stats.hp | round}} / {{maxHealth}}
|
||||
.progress-container
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/experience@3x.png")
|
||||
.ui.progress.yellow
|
||||
.bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
.progress
|
||||
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
span {{user.stats.exp | round}} / {{toNextLevel}}
|
||||
.progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
img.icon(src="~assets/header/png/magic@3x.png")
|
||||
.ui.progress.blue
|
||||
.bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
.progress
|
||||
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
span {{user.stats.mp | round}} / {{maxMP}}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* TODO refactor: only partially ported from SemanticUI; */
|
||||
#app-header {
|
||||
padding: 0px 0px 0px 20px;
|
||||
padding-left: 14px;
|
||||
margin-top: 56px;
|
||||
background: #36205d;
|
||||
margin-left: 1rem;
|
||||
height: 192px;
|
||||
color: #d5c8ff;
|
||||
}
|
||||
@@ -54,8 +54,6 @@
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -71,7 +69,7 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.progress-container > .ui.progress {
|
||||
.progress-container > .progress {
|
||||
width: 203px;
|
||||
margin: 0px;
|
||||
border-radius: 0px;
|
||||
@@ -79,7 +77,7 @@
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.progress-container > .ui.progress > .bar {
|
||||
.progress-container > .progress > .progress-bar {
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
min-width: 0px;
|
||||
|
||||
@@ -1,234 +1,131 @@
|
||||
<template lang="pug">
|
||||
// TODO srcset / svg images
|
||||
#app-menu.ui.top.fixed.menu
|
||||
.header.item
|
||||
nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
||||
.navbar-header
|
||||
// TODO srcset / svg images
|
||||
img(src="~assets/header/png/logo@3x.png")
|
||||
router-link.item(:to="{name: 'tasks'}", exact)
|
||||
span(v-once) {{ $t('tasks') }}
|
||||
// .simple makes it possible to have a dropdown without JS
|
||||
.ui.simple.dropdown
|
||||
router-link.item(:to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}")
|
||||
span(v-once) {{ $t('inventory') }}
|
||||
.menu
|
||||
router-link.item(:to="{name: 'inventory'}")
|
||||
span(v-once) {{ $t('inventory') }}
|
||||
router-link.item(:to="{name: 'equipment'}")
|
||||
span(v-once) {{ $t('equipment') }}
|
||||
router-link.item(:to="{name: 'stable'}")
|
||||
span(v-once) {{ $t('stable') }}
|
||||
router-link.item(:to="{name: 'market'}")
|
||||
span(v-once) {{ $t('market') }}
|
||||
.ui.simple.dropdown
|
||||
router-link.item(:to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
|
||||
span(v-once) {{ $t('social') }}
|
||||
.menu
|
||||
router-link.item(:to="{name: 'tavern'}")
|
||||
span(v-once) {{ $t('tavern') }}
|
||||
router-link.item(:to="{name: 'inbox'}")
|
||||
span(v-once) {{ $t('inbox') }}
|
||||
router-link.item(:to="{name: 'challenges'}")
|
||||
span(v-once) {{ $t('challenges') }}
|
||||
router-link.item(:to="{name: 'party'}")
|
||||
span(v-once) {{ $t('party') }}
|
||||
router-link.item(:to="{name: 'guilds'}")
|
||||
span(v-once) {{ $t('guilds') }}
|
||||
.ui.simple.dropdown
|
||||
router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}")
|
||||
span(v-once) {{ $t('help') }}
|
||||
.menu
|
||||
router-link.item(to="/help/faq")
|
||||
span(v-once) {{ $t('faq') }}
|
||||
router-link.item(to="/help/report-bug")
|
||||
span(v-once) {{ $t('reportBug') }}
|
||||
router-link.item(to="/help/request-feature")
|
||||
span(v-once) {{ $t('requestAF') }}
|
||||
.right.menu
|
||||
.item.with-img
|
||||
.collapse.navbar-collapse
|
||||
ul.navbar-nav.mr-auto
|
||||
router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
|
||||
a.nav-link(v-once) {{ $t('tasks') }}
|
||||
router-link.nav-item.dropdown(tag="li", :to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}")
|
||||
a.nav-link(v-once) {{ $t('inventory') }}
|
||||
.dropdown-menu
|
||||
router-link.dropdown-item(:to="{name: 'inventory'}", exact) {{ $t('inventory') }}
|
||||
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.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: 'tavern'}") {{ $t('tavern') }}
|
||||
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.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
|
||||
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
|
||||
a.nav-link(v-once) {{ $t('help') }}
|
||||
.dropdown-menu
|
||||
router-link.dropdown-item(to="/help/faq") {{ $t('faq') }}
|
||||
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}}
|
||||
.item.with-img.gp-icon
|
||||
.item-with-icon
|
||||
img(src="~assets/header/png/gold@3x.png")
|
||||
span {{user.stats.gp | floor}}
|
||||
a.item.with-img.notifications-dropdown
|
||||
.item-with-icon
|
||||
img(src="~assets/header/png/notifications@3x.png")
|
||||
.ui.simple.dropdown.pointing
|
||||
router-link.item.with-img.user-dropdown(:to="{name: 'avatar'}")
|
||||
// TODO icons should be white when active
|
||||
img(src="~assets/header/png/user@3x.png")
|
||||
.menu
|
||||
.item.user-edit-avatar
|
||||
strong {{user.profile.name}}
|
||||
a(v-once) {{ $t('editAvatar') }}
|
||||
.divider
|
||||
router-link.item(:to="{name: 'stats'}")
|
||||
span(v-once) {{ $t('stats') }}
|
||||
router-link.item(:to="{name: 'achievements'}")
|
||||
span(v-once) {{ $t('achievements') }}
|
||||
.divider
|
||||
router-link.item(:to="{name: 'settings'}")
|
||||
span(v-once) {{ $t('settings') }}
|
||||
.divider
|
||||
router-link.item(to="/logout")
|
||||
span(v-once) {{ $t('logout') }}
|
||||
router-link.dropdown.item-with-icon(:to="{name: 'avatar'}")
|
||||
// TODO icons should be white when active
|
||||
img(src="~assets/header/png/user@3x.png")
|
||||
.dropdown-menu.dropdown-menu-right.user-dropdown
|
||||
router-link.dropdown-item(:to="{name: 'avatar'}") {{ $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="less">
|
||||
#app-menu {
|
||||
<style lang="scss" scoped>
|
||||
nav.navbar {
|
||||
background: #432874 url(~assets/header/png/bits.png) right no-repeat;
|
||||
border-bottom: 0px;
|
||||
|
||||
.item {
|
||||
font-size: 16px !important;
|
||||
padding: 0 1.5rem;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
margin-right: 3rem;
|
||||
|
||||
img {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
$active-purple: #6133b4;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
&.header {
|
||||
width: 256px;
|
||||
padding-left: 20px;
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
background: $active-purple;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 28px;
|
||||
}
|
||||
&.active,&:hover {
|
||||
.nav-link {
|
||||
box-shadow: 0px -4px 0px #6133b4 inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#app-menu .item:not(.header) img {
|
||||
vertical-align: middle;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown{
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.notifications-dropdown {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.gp-icon {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img img + span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#app-menu .ui.menu .right.menu .ui.simple.dropdown > .item::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#app-menu > .item, #app-menu > .right.menu > .item, #app-menu .dropdown > .item {
|
||||
height: 56px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 16px 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#app-menu > .item::before, #app-menu > .right.menu > .item::before, #app-menu .dropdown > .item::before {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#app-menu > .item:not(.header):hover, #app-menu > .dropdown:hover {
|
||||
background-color: #6133b4;
|
||||
}
|
||||
|
||||
#app-menu > .item.active, #app-menu > .dropdown > .item.active {
|
||||
box-shadow: 0px -4px 0px #6133b4 inset;
|
||||
}
|
||||
|
||||
#app-menu > .dropdown > .menu {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.5); // transparent
|
||||
}
|
||||
|
||||
#app-menu > .dropdown > .menu > .item:last-child {
|
||||
border-radius: 0px 0px 4px 4px !important;
|
||||
}
|
||||
|
||||
#app-menu > .dropdown .menu > .item {
|
||||
/* !important to override Semantic UI's !important */
|
||||
width: 217px;
|
||||
background: #6133b4 !important;
|
||||
color: #fff !important;
|
||||
padding: 6px 0px 6px 20px !important;
|
||||
}
|
||||
|
||||
#app-menu .dropdown .menu .item.active {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
#app-menu > .dropdown .menu > .item:hover {
|
||||
background: #4f2a93 !important; /* to override Semantic UI's !important */
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item {
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
color: #616162 !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item {
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
color: #616162 !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item:nth-child(3) {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item:nth-child(4) {
|
||||
padding-top: 8px !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu {
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item:hover {
|
||||
background: #fff !important;
|
||||
color: #6133b4 !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown > .menu::after {
|
||||
top: -0.50em;
|
||||
left: 85.3%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .divider {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#app-menu .user-edit-avatar strong, #app-menu .user-edit-avatar strong:hover {
|
||||
color: #313131;
|
||||
margin-top: -3px;
|
||||
flex-grow: 1;
|
||||
// Make the dropdown menu open on hover
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
margin-top: 0; // remove the gap so it doesn't close
|
||||
}
|
||||
|
||||
#app-menu .user-edit-avatar a, #app-menu .user-edit-avatar a:hover {
|
||||
font-size: 13px;
|
||||
line-height: 1.23;
|
||||
color: #6133b4;
|
||||
.dropdown-menu:not(.user-dropdown) {
|
||||
background: $active-purple;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
|
||||
.dropdown-item {
|
||||
color: #fff;
|
||||
|
||||
&.active {
|
||||
background: $active-purple;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #4f2a93;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-with-icon {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
padding: 0.75rem 0;
|
||||
padding-left: 1rem;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -44,8 +44,8 @@
|
||||
|
||||
<style scoped>
|
||||
.avatar {
|
||||
max-width: 140px;
|
||||
max-height: 147px;
|
||||
width: 140px;
|
||||
height: 147px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,19 +1,14 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
.ui.secondary.menu.center-content
|
||||
router-link.item(:to="{name: 'inventory'}", exact)
|
||||
span(v-once) {{ $t('inventory') }}
|
||||
router-link.item(:to="{name: 'equipment'}")
|
||||
span(v-once) {{ $t('equipment') }}
|
||||
router-link.item(:to="{name: 'stable'}")
|
||||
span(v-once) {{ $t('stable') }}
|
||||
|
||||
.sixteen.wide.column
|
||||
.col-12
|
||||
nav.nav
|
||||
router-link.nav-link(:to="{name: 'inventory'}", exact) {{ $t('inventory') }}
|
||||
router-link.nav-link(:to="{name: 'equipment'}") {{ $t('equipment') }}
|
||||
router-link.nav-link(:to="{name: 'stable'}") {{ $t('stable') }}
|
||||
.col-12
|
||||
router-view
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
export default {};
|
||||
</script>
|
||||
@@ -1,46 +1,48 @@
|
||||
<template lang="pug">
|
||||
.ui.grid
|
||||
.three.wide.column
|
||||
.ui.left.icon.input
|
||||
i.search.icon
|
||||
input(type="text", :placeholder="$t('search')")
|
||||
h3(v-once) {{ $t('filter') }}
|
||||
.row
|
||||
.col-3
|
||||
.form-group
|
||||
input.form-control(type="text", :placeholder="$t('search')")
|
||||
|
||||
.ui.form
|
||||
.field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label.label-primary(v-once) {{ $t('pets') }}
|
||||
.field.nested-field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) {{ $t('hatchingPotions') }}
|
||||
.field.nested-field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) {{ $t('quest') }}
|
||||
.field.nested-field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) {{ $t('special') }}
|
||||
.field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label.label-primary(v-once) {{ $t('mounts') }}
|
||||
.field.nested-field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) {{ $t('hatchingPotions') }}
|
||||
.field.nested-field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) {{ $t('quest') }}
|
||||
.field.nested-field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) {{ $t('special') }}
|
||||
.form
|
||||
h3(v-once) {{ $t('filter') }}
|
||||
.form-group
|
||||
.form-check
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
strong {{ $t('pets') }}
|
||||
.form-check.nested-field
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
span {{ $t('hatchingPotions') }}
|
||||
.form-check.nested-field
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
span {{ $t('quest') }}
|
||||
.form-check.nested-field
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
span {{ $t('special') }}
|
||||
.form-group
|
||||
.form-check
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
strong {{ $t('mounts') }}
|
||||
.form-check.nested-field
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
span {{ $t('hatchingPotions') }}
|
||||
.form-check.nested-field
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
span {{ $t('quest') }}
|
||||
.form-check.nested-field
|
||||
label.form-check-label(v-once)
|
||||
input.form-check-input(type="checkbox")
|
||||
span {{ $t('special') }}
|
||||
|
||||
.thirteen.wide.column
|
||||
|
||||
.col-9
|
||||
h2 Pets
|
||||
.inventory-item-container(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)")
|
||||
.PixelPaw
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
.col
|
||||
h2 Page
|
||||
p {{ $route.path }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
export default { };
|
||||
</script>
|
||||
@@ -1,10 +1,9 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
router-view.row
|
||||
.col
|
||||
router-view
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
export default { };
|
||||
</script>
|
||||
|
||||
@@ -1,27 +1,28 @@
|
||||
<template lang="pug">
|
||||
.ui.grid
|
||||
.three.wide.column
|
||||
.ui.left.icon.input
|
||||
i.search.icon
|
||||
input(type="text", :placeholder="$t('search')")
|
||||
h3(v-once) {{ $t('filter') }}
|
||||
.row
|
||||
.col-3
|
||||
.form-group
|
||||
input.form-control(type="text", :placeholder="$t('search')")
|
||||
|
||||
form
|
||||
h3(v-once) {{ $t('filter') }}
|
||||
|
||||
.ui.form
|
||||
h4 Interests
|
||||
.field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) Habitica Official
|
||||
.field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) Nature
|
||||
.field
|
||||
.ui.checkbox
|
||||
input(type="checkbox")
|
||||
label(v-once) Animals
|
||||
.form-group
|
||||
h5 Interests
|
||||
.form-check
|
||||
.label.form-check-label
|
||||
input.form-check-input(type="checkbox")
|
||||
span Habitica Official
|
||||
.form-check
|
||||
.label.form-check-label
|
||||
input.form-check-input(type="checkbox")
|
||||
span Nature
|
||||
.form-check
|
||||
.label.form-check-label
|
||||
input.form-check-input(type="checkbox")
|
||||
span Animals
|
||||
|
||||
.thirteen.wide.column
|
||||
.col-9
|
||||
h2(v-once) {{ $t('publicGuilds') }}
|
||||
public-guild-item(v-for="guild in guilds", :key='guild._id', :guild="guild")
|
||||
</template>
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
<template lang="pug">
|
||||
.ui.clearing.raised.segment
|
||||
.ui.right.floated.button(:class="[isMember ? 'red' : 'green']") {{ isMember ? $t('leave') : $t('join') }}
|
||||
.floated
|
||||
// TODO v-once?
|
||||
router-link(:to="{ name: 'guild', params: { guildId: guild._id } }")
|
||||
h3.ui.header {{ guild.name }}
|
||||
.card
|
||||
.card-block
|
||||
.clearfix
|
||||
router-link.float-left(:to="{ name: 'guild', params: { guildId: guild._id } }")
|
||||
h3 {{ guild.name }}
|
||||
button.btn.float-right(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
|
||||
p {{ guild.description }}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from '../../../../store';
|
||||
import groupUtilities from '../../../../mixins/groupsUtilities';
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
<template lang="pug">
|
||||
// TODO this is necessary until we have a way to wait for data to be loaded from the server
|
||||
div(v-if="guild")
|
||||
.ui.grid
|
||||
.row
|
||||
.eight.wide.column.left.floated
|
||||
h2.ui.header.sixteen.wide.column {{guild.name}}
|
||||
.sixteen.wide.column
|
||||
h4.ui.left.floated.header {{$t('groupLeader')}}
|
||||
p {{guild.leader.profile.name}}
|
||||
.eight.wide.column.right.floated
|
||||
.ui.basic.segment.right.floated
|
||||
// TODO extract button to component?
|
||||
.ui.button(:class="[isMember ? 'red' : 'green']") {{ isMember ? $t('leave') : $t('join') }}
|
||||
.ui.segment.compact.right.floated
|
||||
h3.ui.header.centered
|
||||
| {{guild.memberCount}}
|
||||
.sub.header(v-once) {{ $t('members') }}
|
||||
.row
|
||||
.five.wide.column
|
||||
h3.ui.header(v-once) {{ $t('description') }}
|
||||
p {{ guild.description }}
|
||||
.eleven.wide.column
|
||||
h3.ui.header(v-once) {{ $t('chat') }}
|
||||
.ui.minimal.comments
|
||||
.comment(v-for="msg in guild.chat", :key="msg.id")
|
||||
.content
|
||||
a.author {{msg.user}}
|
||||
.metadata
|
||||
span.date {{msg.timestamp}}
|
||||
.text {{msg.text}}
|
||||
.row(v-if="guild")
|
||||
.clearfix.col-12
|
||||
.float-left
|
||||
h2 {{guild.name}}
|
||||
strong.float-left {{$t('groupLeader')}}
|
||||
span.float-left : {{guild.leader.profile.name}}
|
||||
.float-right
|
||||
.clearfix
|
||||
h3.float-left
|
||||
span.badge.badge-default {{guild.memberCount}}
|
||||
| {{$t('members')}}
|
||||
button.btn.float-left(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
|
||||
.col-5
|
||||
h4(v-once) {{ $t('description') }}
|
||||
p {{ guild.description }}
|
||||
.col-7
|
||||
h4(v-once) {{ $t('chat') }}
|
||||
.card(v-for="msg in guild.chat", :key="msg.id")
|
||||
.card-block
|
||||
.clearfix
|
||||
strong.float-left {{msg.user}}
|
||||
.float-right {{msg.timestamp}}
|
||||
.text {{msg.text}}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import groupUtilities from '../../../mixins/groupsUtilities';
|
||||
|
||||
@@ -1,23 +1,16 @@
|
||||
<template lang="pug">
|
||||
.ui.internally.celled.grid
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
.ui.comments
|
||||
h2.ui.dividing.header Conversation
|
||||
.comment(v-for="message in messages")
|
||||
a.avatar
|
||||
img(src='http://semantic-ui.com/images/avatar/small/matt.jpg')
|
||||
.content
|
||||
a.author {{message.from}}
|
||||
.metadata
|
||||
span.date {{message.date}}
|
||||
.text
|
||||
| {{message.message}}
|
||||
.field
|
||||
textarea(v-model='newMessage')
|
||||
.ui.blue.labeled.submit.icon.button(v-on:click='reply')
|
||||
i.icon.edit
|
||||
| Add Reply
|
||||
.row
|
||||
.col-12
|
||||
h2 Conversation
|
||||
.card(v-for="message in messages")
|
||||
.card-block
|
||||
strong {{message.from}}
|
||||
span {{message.date}}
|
||||
p {{message.message}}
|
||||
form.form.mt-2(@submit.prevent='reply')
|
||||
.form-group
|
||||
textarea.form-control(rows="3", v-model='newMessage')
|
||||
button.btn.btn-primary(type="submit") Add Reply
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
<template lang="pug">
|
||||
.ui.internally.celled.grid
|
||||
.row
|
||||
.sixteen.wide.colum
|
||||
h2.ui.dividing.header(v-once) {{ $t('inbox') }}
|
||||
.ui.middle.aligned.selection.list
|
||||
.item(v-for="conversation in conversations")
|
||||
img.ui.avatar.image(src='http://semantic-ui.com/images/avatar/small/daniel.jpg')
|
||||
.content
|
||||
.header
|
||||
router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
|
||||
| {{ conversation.from }}
|
||||
.row
|
||||
.col-12
|
||||
h2(v-once) {{ $t('inbox') }}
|
||||
.card(v-for="conversation in conversations")
|
||||
.card-block
|
||||
router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
|
||||
| {{ conversation.from }}
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,19 +1,14 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
.ui.secondary.menu.center-content
|
||||
router-link.item(:to="{name: 'tavern'}")
|
||||
span(v-once) {{ $t('tavern') }}
|
||||
router-link.item(:to="{name: 'guilds'}")
|
||||
span(v-once) {{ $t('guilds') }}
|
||||
router-link.item(:to="{name: 'inbox'}")
|
||||
span(v-once) {{ $t('inbox') }}
|
||||
|
||||
.sixteen.wide.column
|
||||
.col-12
|
||||
nav.nav
|
||||
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>
|
||||
export default {
|
||||
};
|
||||
export default {};
|
||||
</script>
|
||||
@@ -1,5 +1,7 @@
|
||||
<template lang="pug">
|
||||
.ui.grid
|
||||
.row
|
||||
h2.col-12 Tavern
|
||||
// TODO Example code based on Semantic UI .ui.grid
|
||||
.four.wide.column
|
||||
h2.ui.dividing.header SideMenu
|
||||
|
||||
@@ -176,7 +178,7 @@
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
// @TODO: Abstract to Store
|
||||
// TODO: Abstract to Store
|
||||
let messages = [
|
||||
{
|
||||
from: 'Paglias',
|
||||
@@ -195,7 +197,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
sendChat: function sendChat () {
|
||||
// @TODO: This will be default values based on the conversation and current user
|
||||
// TODO: This will be default values based on the conversation and current user
|
||||
let messageToSend = {
|
||||
from: 'TheHollidayInn',
|
||||
fromUserId: 3211,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.four.wide.column(v-for="taskType in tasksTypes")
|
||||
.col(v-for="taskType in tasksTypes")
|
||||
h3 {{taskType}}s
|
||||
ul
|
||||
task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
|
||||
|
||||
Reference in New Issue
Block a user