dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-07-05 02:50:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

more progress on myprofile redesign

Browse source
This commit is contained in:
supertiger1234 2019-07-27 13:22:51 +01:00
parent cbe0f8ac7d
commit 4620a64901
2 changed files with 54 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
View file

@ -15,15 +15,17 @@
</div> </div>
<div class="change-avatar"> <div class="change-avatar">
<profile-picture <div class="change-avatar-container">
class="avatar" <profile-picture
:url="avatar" class="avatar"
:admin="user.admin" :url="avatar"
size="100px" :admin="user.admin"
emote-size="30px" size="100px"
animation-padding="5px" emote-size="30px"
/> animation-padding="5px"
<div class="button">Change Avatar</div> />
<div class="button">Change Avatar</div>
</div>
</div> </div>
</div> </div>
@ -63,13 +65,23 @@ export default {
.edit-profile{ .edit-profile{
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
width: 100%;
} }
.change-avatar { .change-avatar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 flex: 1
}
.change-avatar-container {
display: flex;
flex-direction: column;
background: rgb(42, 42, 42);
width: 150px;
align-self: center;
padding: 20px;
border-radius: 10px;
margin-top: 10px;
} }
.avatar { .avatar {
margin-bottom: 10px; margin-bottom: 10px;
@ -78,7 +90,7 @@ export default {
.button { .button {
background: rgb(0, 119, 255); background: rgb(0, 119, 255);
padding: 5px; padding: 10px;
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
display: inline-block; display: inline-block;
@ -87,27 +99,34 @@ export default {
} }
.left { .left {
background: rgba(255, 0, 0, 0.096);
width: 300px; width: 300px;
display: flex;
flex-direction: column;
} }
.outer-input { .outer-input {
display: flex;
flex-direction: column;
overflow: hidden;
background: rgb(42, 42, 42); background: rgb(42, 42, 42);
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
} }
.outer-input .user-tag .username{ .outer-input .user-tag .username{
flex: 1;
} }
.outer-input .user-tag .tag{ .outer-input .user-tag .tag{
border-left: solid 1px white; border-left: solid 1px rgb(168, 168, 168);
width: 50px; width: 50px;
} }
.outer-input .user-tag { .outer-input .user-tag {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.outer-input input {
width: initial;
border-radius: 5px
}
</style> </style>

26
src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
View file

@ -135,16 +135,30 @@ export default {
padding: 10px; padding: 10px;
margin: 3px; margin: 3px;
margin-bottom: 0; margin-bottom: 0;
border-bottom: solid 5px rgba(255, 255, 255, 0);
transition: 0.3s;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
position: relative;
padding-bottom: 15px;
} }
.tabs .tab:hover {
border-bottom: solid 5px rgba(255, 255, 255, 0.507); .tabs .tab:after {
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
background:rgba(255, 255, 255, 0);
height:5px;
border-radius:10px;
transition: 0.3s;
} }
.tabs .tab.selected {
border-bottom: solid 5px white;
.tabs .tab:hover:after{
background: rgb(160, 160, 160);
}
.tabs .tab.selected:after {
background: white;
} }
.content{ .content{