From ede4d77cfd882ea37ae2bd331d14a95af9129205 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Wed, 22 Feb 2017 23:08:14 +0200
Subject: [PATCH 1/3] 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.
---
src/App.scss | 36 -----
src/components/status/status.vue | 2 +-
.../user_card_content/user_card_content.vue | 131 ++++++++++++++++--
src/components/user_profile/user_profile.vue | 43 +-----
4 files changed, 127 insertions(+), 85 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 431aeb32..b0888ac7 100644
--- a/src/App.scss
+++ b/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;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f111c2d5..a97e6b75 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -157,7 +157,7 @@
.usercard {
border-style: solid;
border-width: 1px;
- border-radius: 1em;
+ border-radius: 0.5em;
margin-bottom: 1em;
}
</style>
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>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b0d6db85..11a61bfc 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -7,45 +7,10 @@
<script src="./user_profile.js"></script>
<style lang="scss">
- .user-profile {
- flex: 2;
- flex-basis: 500px;
- }
- .user-info {
- .user-interactions {
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
+.user-profile {
+ flex: 2;
+ flex-basis: 500px;
+}
- 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>
From 715bfb3dca55d5a5d688e8e81c9eb137deeced9b Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Thu, 23 Feb 2017 00:24:37 +0200
Subject: [PATCH 2/3] Make gradient use the theme colors, adjust user
interction elements, make profiles without bg use a darker gray solid color
to not drown out white text.
---
.../user_card_content/user_card_content.vue | 32 +++++++++++--------
1 file changed, 19 insertions(+), 13 deletions(-)
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index befe8bf2..2cdbb2fb 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,5 +1,5 @@
<template>
- <div id="heading" class="profile-panel-background base00-background" :style="headingStyle">
+ <div id="heading" class="profile-panel-background" :style="headingStyle">
<div class="panel-heading text-center">
<div class='user-info'>
<div class='container'>
@@ -66,10 +66,10 @@
}
},
bodyStyle () {
- let color = '#1C2023'
+ let color = this.$store.state.config.colors['base00']
console.log(this.color)
return {
- background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 70%)'
+ background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 80%)'
}
},
isOtherUser () {
@@ -102,6 +102,7 @@
<style lang="scss">
.profile-panel-background {
+ background-color: #121517;
background-size: cover;
border-radius: 0.5em 0.5em 0 0;
}
@@ -114,7 +115,7 @@
.user-info {
color: white;
- padding: 1em 1em 1em 1em;
+ padding: 16px 16px 16px 16px;
margin-bottom: -4em;
.container{
@@ -134,7 +135,7 @@
max-height: 48px;
}
- text-shadow: 0 2px 2px rgba(0, 0, 0, 1.0);
+ text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
.user-name{
margin-top: 0.0em;
@@ -152,34 +153,39 @@
flex: 0 0 auto;
align-self: flex-start;
}
-
+
.user-interactions {
display: flex;
flex-flow: row wrap;
- justify-content: center;
+ justify-content: space-between;
div {
flex: 1;
}
- margin-top: 0.5em;
- margin-bottom: -1.2em;
+ margin-top: 0.7em;
+ margin-bottom: -1.0em;
.following {
+ color: white;
font-size: 14px;
flex: 0 0 100%;
- margin-bottom: 0.5em;
+ margin: -0.7em 0.0em 0.3em 0.0em;
+ padding-left: 16px;
+ text-align: left;
}
.mute {
- max-width: 200px;
+ max-width: 220px;
+ min-height: 28px;
}
.follow {
- max-width: 200px;
+ max-width: 220px;
+ min-height: 28px;
}
button {
- width: 80%;
+ width: 92%;
height: 100%;
border: 1px solid;
}
From 9237f0b91834ed59ea4f7a6a8dca7fa732a3c74f Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Thu, 23 Feb 2017 00:39:41 +0200
Subject: [PATCH 3/3] Removed unnecessary debug stuff
---
src/components/user_card_content/user_card_content.vue | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 2cdbb2fb..10064d5f 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -66,10 +66,8 @@
}
},
bodyStyle () {
- let color = this.$store.state.config.colors['base00']
- console.log(this.color)
return {
- background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 80%)'
+ background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + this.$store.state.config.colors['base00'] + ' 80%)'
}
},
isOtherUser () {