diff options
Diffstat (limited to 'src/components/user_card_content/user_card_content.vue')
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 162 |
1 files changed, 145 insertions, 17 deletions
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 59cee734..178100b8 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -1,40 +1,42 @@ <template> - <div> - <div class="base00-background panel-heading text-center" v-bind:style="style"> + <div id="heading" class="profile-panel-background" :style="headingStyle"> + <div class="panel-heading text-center"> <div class='user-info'> - <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 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" class="following base06"> + <div v-if="user.follows_you && loggedIn" class="following base06"> Follows you! </div> - <div class="follow"> + <div class="follow" v-if="loggedIn"> <span v-if="user.following"> <!--Following them!--> - <button @click="unfollowUser" class="base06 base01-background base06-border"> - Unfollow + <button @click="unfollowUser" class="base04 base00-background pressed"> + Following! </button> </span> <span v-if="!user.following"> - <button @click="followUser" class="base01 base04-background base01-border"> + <button @click="followUser" class="base05 base02-background"> Follow </button> </span> </div> <div class='mute' v-if='isOtherUser'> <span v-if='user.muted'> - <button @click="toggleMute" class="base04 base01-background base06-border">Unmute</button> + <button @click="toggleMute" class="base04 base00-background pressed">Muted</button> </span> <span v-if='!user.muted'> - <button @click="toggleMute" class="base01 base04-background base01-border">Mute</button> + <button @click="toggleMute" class="base05 base02-background">Mute</button> </span> </div> </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,14 +60,25 @@ export default { props: [ 'user' ], computed: { - style () { + headingStyle () { + let rgb = this.$store.state.config.colors['base00'].match(/\d+/g) return { - color: `#${this.user.profile_link_color}`, - 'background-image': `url(${this.user.cover_photo})` + backgroundColor: 'rgb(' + Math.floor(rgb[0] * 0.53) + ', ' + + Math.floor(rgb[1] * 0.56) + ', ' + + Math.floor(rgb[2] * 0.59) + ')', + backgroundImage: `url(${this.user.cover_photo})` + } + }, + bodyStyle () { + return { + background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + this.$store.state.config.colors['base00'] + ' 80%)' } }, isOtherUser () { return this.user !== this.$store.state.users.currentUser + }, + loggedIn () { + return this.$store.state.users.currentUser } }, methods: { @@ -87,3 +100,118 @@ } } </script> + +<style lang="scss"> + +.profile-panel-background { + background-size: cover; + border-radius: 10px; +} + +.profile-panel-body { + padding-top: 0em; + top: -0em; + padding-top: 4em; +} + +.user-info { + color: white; + padding: 16px 16px 16px 16px; + 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: 5px; + flex: 1 0 100%; + max-width: 48px; + max-height: 48px; + } + + text-shadow: 0px 1px 1.5px 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: space-between; + + div { + flex: 1; + } + margin-top: 0.7em; + margin-bottom: -1.0em; + + .following { + color: white; + font-size: 14px; + flex: 0 0 100%; + margin: -0.7em 0.0em 0.3em 0.0em; + padding-left: 16px; + text-align: left; + } + + .mute { + max-width: 220px; + min-height: 28px; + } + + .follow { + max-width: 220px; + min-height: 28px; + } + + button { + border: solid; + border-width: 1px; + width: 92%; + height: 100%; + } + .pressed { + border: solid; + border-width: 1px; + } + } +} + +.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> |