Added user profile image, added user @ handle
This commit is contained in:
parent
4328821eff
commit
3885ecfe83
2 changed files with 24 additions and 7 deletions
|
@ -165,12 +165,17 @@
|
||||||
<div class="app-sidebar-footer">
|
<div class="app-sidebar-footer">
|
||||||
<input type="range" class="display--small">
|
<input type="range" class="display--small">
|
||||||
<button class="app-sidebar-button" style="width:100%" @click="chrome.menuOpened = !chrome.menuOpened">
|
<button class="app-sidebar-button" style="width:100%" @click="chrome.menuOpened = !chrome.menuOpened">
|
||||||
<div class="sidebar-user-icon">
|
<template v-if="chrome.userinfo.attributes">
|
||||||
|
<div class="sidebar-user-icon"
|
||||||
|
:style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-user-text" id="userName">
|
</template>
|
||||||
|
|
||||||
|
<div class="sidebar-user-text">
|
||||||
<template v-if="chrome.userinfo.attributes">
|
<template v-if="chrome.userinfo.attributes">
|
||||||
{{ chrome.userinfo.attributes.name }}
|
<div class="fullname">{{ chrome.userinfo.attributes.name }}</div>
|
||||||
|
<div class="handle-text">@{{ chrome.userinfo.attributes.handle }}</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
Sign in
|
Sign in
|
||||||
|
|
|
@ -283,12 +283,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-sidebar-button > .sidebar-user-icon {
|
.app-sidebar-button > .sidebar-user-icon {
|
||||||
width: 22px;
|
width: 26px;
|
||||||
height: 22px;
|
height: 26px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background: var(--keyColor);
|
background-image: var(--artwork);
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
box-shadow: var(--mediaItemShadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-sidebar-button > .sidebar-user-text {
|
.app-sidebar-button > .sidebar-user-text {
|
||||||
|
@ -296,6 +297,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 6px 12px;
|
margin: 6px 12px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-sidebar-button > .sidebar-user-text .fullname {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-sidebar-button > .sidebar-user-text .handle-text {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.7;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-sidebar-content {
|
.app-sidebar-content {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue