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

Improved Party page UI (#9892)

Browse Source
This commit is contained in:
Alexey Pyltsyn
2018-01-29 21:44:22 +00:00
committed by Sabe Jones
parent 47c2a3a21a
commit ae27ae0090
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@
.svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='group.memberCount > 100 && group.memberCount < 999') .svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='group.memberCount > 100 && group.memberCount < 999')
.svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='group.memberCount < 100') .svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='group.memberCount < 100')
span.number {{ group.memberCount | abbrNum }} span.number {{ group.memberCount | abbrNum }}
div(v-once) {{ $t('memberList') }} div.member-list(v-once) {{ $t('memberList') }}
.col-4(v-if='!isParty') .col-4(v-if='!isParty')
.item-with-icon(@click='showGroupGems()') .item-with-icon(@click='showGroupGems()')
.svg-icon.gem(v-html="icons.gem") .svg-icon.gem(v-html="icons.gem")
@@ -31,11 +31,11 @@
.row.new-message-row .row.new-message-row
textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessage()') textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessage()')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat') autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
.row .row.chat-actions
.col-6 .col-6.chat-receive-actions
button.btn.btn-secondary.float-left.fetch(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }} button.btn.btn-secondary.float-left.fetch(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }} button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }}
.col-6 .col-6.chat-send-actions
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }} button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
community-guidelines community-guidelines
.row .row
@@ -43,8 +43,7 @@
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name') chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
.col-12.col-sm-4.sidebar .col-12.col-sm-4.sidebar
.row(:class='{"guild-background": !isParty}') .row(:class='{"guild-background": !isParty}')
.col-6 .col-12
.col-6
.button-container .button-container
button.btn.btn-success(class='btn-success', v-if='isLeader && !group.purchased.active', @click='upgradeGroup()') button.btn.btn-success(class='btn-success', v-if='isLeader && !group.purchased.active', @click='upgradeGroup()')
| {{ $t('upgrade') }} | {{ $t('upgrade') }}
@@ -143,7 +142,7 @@
.svg-icon.shield, .svg-icon.gem { .svg-icon.shield, .svg-icon.gem {
width: 28px; width: 28px;
height: 28px; height: auto;
margin: 0 auto; margin: 0 auto;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
@@ -154,6 +153,10 @@
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
} }
.member-list {
margin-top: .5em;
}
} }
.item-with-icon:hover { .item-with-icon:hover {
@@ -163,6 +166,7 @@
.sidebar { .sidebar {
background-color: $gray-600; background-color: $gray-600;
padding-bottom: 2em; padding-bottom: 2em;
padding-top: 2.8em;
} }
.card { .card {
@@ -229,6 +233,26 @@
.new-message-row { .new-message-row {
position: relative; position: relative;
} }
.chat-actions {
margin-top: 1em;
.chat-receive-actions {
padding-left: 0;
button {
margin-bottom: 1em;
&:not(:last-child) {
margin-right: 1em;
}
}
}
.chat-send-actions {
padding-right: 0;
}
}
} }
span.action { span.action {