dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-14 03:51:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

user information popout design changes.

Browse source
This commit is contained in:
supertiger1234 2019-10-30 11:38:32 +00:00
parent 49d6f99b18
commit 2b1797562f
1 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/app/Popouts/Popouts/userInformationPopout.vue
View file

@ -20,7 +20,10 @@
<div class="uesrname-tag">
<div class="username">{{user.username}}</div>
<div class="tag">@{{user.tag}}</div>
</div>
</div>
<!-- <div class="details">
Pancake • Male • 17-19 • United Kingdom
</div> -->
<div class="actions" v-if="uniqueID !== selfUniqueID">
<div class="action-buttons">
<div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton"><div class="material-icons">person_add</div><div>Add Friend</div></div>
@ -30,7 +33,7 @@
<div class="button warn" v-if="this.relationshipStatus === 2" @click="RemoveFriendButton"><div class="material-icons">person_add_disabled</div><div>Remove Friend</div></div>
<div class="button warn"><div class="material-icons">block</div><div>Block</div></div>
</div>
</div>
</div>
</div>
<div class="scrollable">
<div class="badges" v-if="user.badges && filteredBadges.length">
@ -174,7 +177,7 @@ export default {
.drop-background {
position: absolute;
background: rgba(0, 0, 0, 0.521);
background: rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
right: 0;
@ -190,12 +193,22 @@ export default {
color: white;
display: flex;
flex-direction: row;
border-radius: 10px;
position: relative;
background: rgba(0, 0, 0, 0.349);
backdrop-filter: blur(10px)
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
box-shadow: 0px 0px 20px 11px #151515c4;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
.box{
background: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
.spinner {
align-self: center;
}
@ -205,18 +218,15 @@ export default {
flex-direction: column;
width: 100%;
align-items: center;
padding: 10px;
overflow: auto;
}
.scrollable {
margin-top: 5px;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
overflow: auto;
padding-right: 7px;
margin-left: 5px;
scrollbar-width: thin;
}
.scrollable::-webkit-scrollbar {
width: 3px;
@ -225,15 +235,13 @@ export default {
display: flex;
flex-direction: column;
align-content: center;
border-bottom: solid 1px rgba(255, 255, 255, 0.15);
width: 100%;
align-items: center;
align-content: center;
padding-bottom: 10px;
flex-shrink: 0;
background: rgba(41, 41, 41, 0.697);
background: rgba(0, 0, 0, 0.3);
padding-top: 30px;
border-radius: 5px;
}
.uesrname-tag {
@ -252,7 +260,6 @@ export default {
.button {
padding: 8px;
align-self: center;
border-radius: 5px;
user-select: none;
cursor: default;
transition: 0.3s;
@ -269,7 +276,6 @@ export default {
right: 0;
background: rgb(51, 163, 255);
z-index: -1;
border-radius: 5px;
opacity: 0.8;
transition: 0.3s;
}
@ -284,8 +290,9 @@ export default {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 3px;
border-bottom: solid 1px rgba(255, 255, 255, 0.15);
margin-top: 10px;
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
padding-bottom: 10px;
user-select: none;
cursor: default;
@ -304,12 +311,13 @@ export default {
.title {
font-size: 20px;
margin-bottom: 3px;
margin-left: 3px;
margin-left: 10px;
}
.badges-list{
display: flex;
flex-wrap: wrap;
flex-shrink: 0
flex-shrink: 0;
margin-left: 8px;
}
.badge {
border: solid 1px white;
@ -341,18 +349,14 @@ export default {
flex-direction: column;
width: 100%;
margin-top: 10px;
margin-bottom: 5px;
border-bottom: solid 1px rgba(255, 255, 255, 0.15);
padding-bottom: 10px;
cursor: default;
flex-shrink: 0
}
.about-item{
display: flex;
align-items: center;
background: rgba(47, 47, 47, 0.37);
margin: 2px;
border-radius: 5px;
margin-top: 2px;
margin-bottom: 2px;
padding: 10px;
flex-shrink: 0
@ -408,7 +412,6 @@ export default {
}
.action-buttons .button.warn::after {
background: rgb(255, 53, 53);
border-radius: 5px;
}
.back-button {