dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-15 04:21:19 +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 class="change-avatar">
<profile-picture
class="avatar"
:url="avatar"
:admin="user.admin"
size="100px"
emote-size="30px"
animation-padding="5px"
/>
<div class="button">Change Avatar</div>
<div class="change-avatar-container">
<profile-picture
class="avatar"
:url="avatar"
:admin="user.admin"
size="100px"
emote-size="30px"
animation-padding="5px"
/>
<div class="button">Change Avatar</div>
</div>
</div>
</div>
@ -63,13 +65,23 @@ export default {
.edit-profile{
display: flex;
margin-top: 10px;
width: 100%;
}
.change-avatar {
display: flex;
flex-direction: column;
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 {
margin-bottom: 10px;
@ -78,7 +90,7 @@ export default {
.button {
background: rgb(0, 119, 255);
padding: 5px;
padding: 10px;
text-align: center;
border-radius: 5px;
display: inline-block;
@ -87,27 +99,34 @@ export default {
}
.left {
background: rgba(255, 0, 0, 0.096);
width: 300px;
display: flex;
flex-direction: column;
}
.outer-input {
display: flex;
flex-direction: column;
overflow: hidden;
background: rgb(42, 42, 42);
padding: 10px;
border-radius: 10px;
margin: 10px;
}
.outer-input .user-tag .username{
flex: 1;
}
.outer-input .user-tag .tag{
border-left: solid 1px white;
border-left: solid 1px rgb(168, 168, 168);
width: 50px;
}
.outer-input .user-tag {
display: flex;
overflow: hidden;
}
.outer-input input {
width: initial;
border-radius: 5px
}
</style>

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

@ -135,16 +135,30 @@ export default {
padding: 10px;
margin: 3px;
margin-bottom: 0;
border-bottom: solid 5px rgba(255, 255, 255, 0);
transition: 0.3s;
user-select: none;
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{