Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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.

Browse source
This commit is contained in:
shpuld 2017-02-23 00:24:37 +02:00
parent 1072cd6c02
commit 715bfb3dca
1 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/user_card_content/user_card_content.vue
View file

@ -1,5 +1,5 @@
<template> <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="panel-heading text-center">
<div class='user-info'> <div class='user-info'>
<div class='container'> <div class='container'>
@ -66,10 +66,10 @@
} }
}, },
bodyStyle () { bodyStyle () {
let color = '#1C2023' let color = this.$store.state.config.colors['base00']
console.log(this.color) console.log(this.color)
return { 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 () { isOtherUser () {
@ -102,6 +102,7 @@
<style lang="scss"> <style lang="scss">
.profile-panel-background { .profile-panel-background {
background-color: #121517;
background-size: cover; background-size: cover;
border-radius: 0.5em 0.5em 0 0; border-radius: 0.5em 0.5em 0 0;
} }
@ -114,7 +115,7 @@
.user-info { .user-info {
color: white; color: white;
padding: 1em 1em 1em 1em; padding: 16px 16px 16px 16px;
margin-bottom: -4em; margin-bottom: -4em;
.container{ .container{
@ -134,7 +135,7 @@
max-height: 48px; 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{ .user-name{
margin-top: 0.0em; margin-top: 0.0em;
@ -152,34 +153,39 @@
flex: 0 0 auto; flex: 0 0 auto;
align-self: flex-start; align-self: flex-start;
} }
.user-interactions { .user-interactions {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: space-between;
div { div {
flex: 1; flex: 1;
} }
margin-top: 0.5em; margin-top: 0.7em;
margin-bottom: -1.2em; margin-bottom: -1.0em;
.following { .following {
color: white;
font-size: 14px; font-size: 14px;
flex: 0 0 100%; flex: 0 0 100%;
margin-bottom: 0.5em; margin: -0.7em 0.0em 0.3em 0.0em;
padding-left: 16px;
text-align: left;
} }
.mute { .mute {
max-width: 200px; max-width: 220px;
min-height: 28px;
} }
.follow { .follow {
max-width: 200px; max-width: 220px;
min-height: 28px;
} }
button { button {
width: 80%; width: 92%;
height: 100%; height: 100%;
border: 1px solid; border: 1px solid;
} }