mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-24 17:11:43 +00:00
fixed some padding
This commit is contained in:
parent
099f280f01
commit
49d6f99b18
5 changed files with 16 additions and 17 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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{
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue