fixed some padding

This commit is contained in:
supertiger1234 2019-10-30 11:38:21 +00:00
parent 099f280f01
commit 49d6f99b18
5 changed files with 16 additions and 17 deletions

View file

@ -2,7 +2,7 @@
<div <div
class="friend" class="friend"
:style="{background: status.status !== 0 ? status.bgColor : ''}" :style="{background: status.status !== 0 ? status.bgColor : ''}"
:class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0) }" :class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0), tree }"
@click="openChat" @click="openChat"
@mouseover="hover = true" @mouseover="hover = true"
@mouseleave="hover = false" @mouseleave="hover = false"
@ -47,7 +47,8 @@ import statuses from '@/utils/statuses';
import {bus} from '@/main' import {bus} from '@/main'
export default { export default {
props: ['username', 'tag', 'channelID', 'uniqueID', 'recipient'], // tree will add padding to the left.
props: ['username', 'tag', 'channelID', 'uniqueID', 'recipient', 'tree'],
data() { data() {
return { return {
hover: false hover: false
@ -120,15 +121,15 @@ export default {
.friend { .friend {
color: white; color: white;
padding: 5px; padding: 5px;
padding-left: 10px;
padding-left: 10px;
display: flex; display: flex;
transition: 0.3s; transition: 0.3s;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.tree {
padding-left: 22px;
}
.notifyAnimation{ .notifyAnimation{
animation: notifyAnime; animation: notifyAnime;

View file

@ -19,6 +19,7 @@
:key="key" :key="key"
:channel-i-d="friend.channelID" :channel-i-d="friend.channelID"
:recipient="friends[key].recipient" :recipient="friends[key].recipient"
:tree="true"
/> />
</div> </div>
</transition> </transition>

View file

@ -19,6 +19,7 @@
:key="key" :key="key"
:channel-i-d="friend.channelID" :channel-i-d="friend.channelID"
:recipient="friends[key].recipient" :recipient="friends[key].recipient"
:tree="true"
/> />
</div> </div>
</transition> </transition>

View file

@ -65,14 +65,11 @@ export default {
.pending-friends{ .pending-friends{
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
margin: 5px;
user-select: none; user-select: none;
padding-bottom: 3px; padding-bottom: 3px;
border-radius: 5px;
transition: 0.3s; transition: 0.3s;
} }
.tab{ .tab{
border-radius: 5px;
transition: 0.3s; transition: 0.3s;
} }
.tab:hover{ .tab:hover{

View file

@ -65,18 +65,18 @@ export default {
<style scoped> <style scoped>
.username{ .username{
width: 100px; width: 80px;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 16px;
} }
.pending-friend { .pending-friend {
color: white; color: white;
background-color: rgba(0, 0, 0, 0.137); padding: 5px;
margin: 5px; padding-left: 22px;
padding: 10px;
display: flex; display: flex;
transition: 0.3s; transition: 0.3s;
border-radius: 3px;
} }
.pending-friend:hover { .pending-friend:hover {
@ -84,12 +84,11 @@ export default {
} }
.profile-picture{ .profile-picture{
height: 40px; height: 30px;
width: 40px; width: 30px;
background-color: rgba(0, 0, 0, 0.425); background-color: rgba(0, 0, 0, 0.425);
border-radius: 50%; border-radius: 50%;
margin: auto; margin: auto;
margin-left: 2px;
margin-right: 5px; margin-right: 5px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -120,7 +119,7 @@ export default {
margin: 5px; margin: 5px;
display: flex; display: flex;
transition: 0.3s; transition: 0.3s;
border-radius: 3px; cursor: pointer;
} }
.hide { .hide {
display: none; display: none;