logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: b939f70d17697eaa5721ac86bcfcd2fc55871df9
parent: 74931dece7d68167e5134e77e738c39f62a11146
Author: Roger Braun <roger@rogerbraun.net>
Date:   Thu, 23 Feb 2017 00:26:52 +0100

Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into develop

Diffstat:

Msrc/App.scss36------------------------------------
Msrc/components/status/status.vue2+-
Msrc/components/user_card_content/user_card_content.vue135+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
Msrc/components/user_profile/user_profile.vue43++++---------------------------------------
4 files changed, 131 insertions(+), 85 deletions(-)

diff --git 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 @@ -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 @@ -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" :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,16 @@ export default { props: [ 'user' ], computed: { - style () { + headingStyle () { return { - color: `#${this.user.profile_link_color}`, 'background-image': `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 }, @@ -90,3 +96,114 @@ } } </script> + +<style lang="scss"> + +.profile-panel-background { + background-color: #121517; + 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: 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: 0.5em; + 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 { + width: 92%; + 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 @@ -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>