From ede4d77cfd882ea37ae2bd331d14a95af9129205 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Wed, 22 Feb 2017 23:08:14 +0200
Subject: 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.

---
 .../user_card_content/user_card_content.vue        | 131 +++++++++++++++++++--
 1 file changed, 122 insertions(+), 9 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ee4384fa..befe8bf2 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -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'>
-        <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 && 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>
-- 
cgit v1.2.3-70-g09d2

