Move profile picture to right side, make the names appear next to it, extend profile background pic further and fade it out with gradients, fix the crappy borders around the inline user card.
This commit is contained in:
shpuld
parent
935c0e09c6
commit
ede4d77cfd
4 changed files with 127 additions and 85 deletions
36
src/App.scss
36
src/App.scss
|
|
@ -142,46 +142,10 @@ main-router {
|
|||
min-width: 0px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
color: white;
|
||||
padding: 1em;
|
||||
img {
|
||||
border: 2px solid;
|
||||
border-radius: 0.5em
|
||||
}
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
.user-name{
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.user-screen-name {
|
||||
margin-top: 0.3em;
|
||||
font-weight: lighter;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.user-counts {
|
||||
display: flex;
|
||||
line-height:16px;
|
||||
padding: 1em 1.5em 0em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-count {
|
||||
flex: 1;
|
||||
|
||||
h5 {
|
||||
font-size:1em;
|
||||
font-weight: bolder;
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
.status-actions {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
.usercard {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 1em;
|
||||
border-radius: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="base00-background panel-heading text-center" v-bind:style="style">
|
||||
<div id="heading" class="profile-panel-background base00-background" :style="headingStyle">
|
||||
<div class="panel-heading text-center">
|
||||
<div class='user-info'>
|
||||
<div class='container'>
|
||||
<img :src="user.profile_image_url">
|
||||
<span class="glyphicon glyphicon-user"></span>
|
||||
<div class='user-name'>{{user.name}}</div>
|
||||
<div class='user-screen-name'>@{{user.screen_name}}</div>
|
||||
</div>
|
||||
<div v-if="isOtherUser" class="user-interactions">
|
||||
<div v-if="user.follows_you && loggedIn" class="following base06">
|
||||
Follows you!
|
||||
|
|
@ -34,7 +36,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body base00-background">
|
||||
<div class="panel-body profile-panel-body" :style="bodyStyle">
|
||||
<div class="user-counts">
|
||||
<div class="user-count">
|
||||
<h5>Statuses</h5>
|
||||
|
|
@ -58,12 +60,18 @@
|
|||
export default {
|
||||
props: [ 'user' ],
|
||||
computed: {
|
||||
style () {
|
||||
headingStyle () {
|
||||
return {
|
||||
color: `#${this.user.profile_link_color}`,
|
||||
'background-image': `url(${this.user.cover_photo})`
|
||||
}
|
||||
},
|
||||
bodyStyle () {
|
||||
let color = '#1C2023'
|
||||
console.log(this.color)
|
||||
return {
|
||||
background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 70%)'
|
||||
}
|
||||
},
|
||||
isOtherUser () {
|
||||
return this.user !== this.$store.state.users.currentUser
|
||||
},
|
||||
|
|
@ -90,3 +98,108 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.profile-panel-background {
|
||||
background-size: cover;
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
}
|
||||
|
||||
.profile-panel-body {
|
||||
padding-top: 0em;
|
||||
top: -0em;
|
||||
padding-top: 4em;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
color: white;
|
||||
padding: 1em 1em 1em 1em;
|
||||
margin-bottom: -4em;
|
||||
|
||||
.container{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
justify-content: center;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid;
|
||||
border-radius: 0.5em;
|
||||
flex: 1 0 100%;
|
||||
max-width: 48px;
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 1.0);
|
||||
|
||||
.user-name{
|
||||
margin-top: 0.0em;
|
||||
margin-left: 0.6em;
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.user-screen-name {
|
||||
margin-top: 0.0em;
|
||||
margin-left: 0.6em;
|
||||
font-weight: lighter;
|
||||
font-size: 15px;
|
||||
padding-right: 0.1em;
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.user-interactions {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: -1.2em;
|
||||
|
||||
.following {
|
||||
font-size: 14px;
|
||||
flex: 0 0 100%;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.mute {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.follow {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-counts {
|
||||
display: flex;
|
||||
line-height:16px;
|
||||
padding: 1em 1.5em 0em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-count {
|
||||
flex: 1;
|
||||
|
||||
h5 {
|
||||
font-size:1em;
|
||||
font-weight: bolder;
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,45 +7,10 @@
|
|||
<script src="./user_profile.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-profile {
|
||||
|
||||
.user-profile {
|
||||
flex: 2;
|
||||
flex-basis: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.user-interactions {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: -1.2em;
|
||||
|
||||
.following {
|
||||
font-size: 14px;
|
||||
flex: 0 0 100%;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.mute {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.follow {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
.user-screen-name {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue