diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue index 28b934b5ed..570592f240 100644 --- a/website/client/components/groups/group.vue +++ b/website/client/components/groups/group.vue @@ -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.bronzeGuildBadgeIcon", v-if='group.memberCount < 100') span.number {{ group.memberCount | abbrNum }} - div(v-once) {{ $t('memberList') }} + div.member-list(v-once) {{ $t('memberList') }} .col-4(v-if='!isParty') .item-with-icon(@click='showGroupGems()') .svg-icon.gem(v-html="icons.gem") @@ -31,11 +31,11 @@ .row.new-message-row 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') - .row - .col-6 + .row.chat-actions + .col-6.chat-receive-actions 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') }} - .col-6 + .col-6.chat-send-actions button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }} community-guidelines .row @@ -43,8 +43,7 @@ chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name') .col-12.col-sm-4.sidebar .row(:class='{"guild-background": !isParty}') - .col-6 - .col-6 + .col-12 .button-container button.btn.btn-success(class='btn-success', v-if='isLeader && !group.purchased.active', @click='upgradeGroup()') | {{ $t('upgrade') }} @@ -143,7 +142,7 @@ .svg-icon.shield, .svg-icon.gem { width: 28px; - height: 28px; + height: auto; margin: 0 auto; display: inline-block; vertical-align: bottom; @@ -154,6 +153,10 @@ font-size: 22px; font-weight: bold; } + + .member-list { + margin-top: .5em; + } } .item-with-icon:hover { @@ -163,6 +166,7 @@ .sidebar { background-color: $gray-600; padding-bottom: 2em; + padding-top: 2.8em; } .card { @@ -229,6 +233,26 @@ .new-message-row { 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 {