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

Merge branch 'fix/moreCssFixesAndStuff' into 'develop'

Browse source 
Fix/more css fixes and stuff

Closes #77

See merge request pleroma/pleroma-fe!234
This commit is contained in:
lambda 2018-05-13 12:27:28 +00:00
commit 8f58526bbc
15 changed files with 113 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.scss
View file

@ -88,13 +88,13 @@ label.select {
input, textarea, .select {
border: none;
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
background-color: $fallback--input;
background-color: var(--input, $fallback--input);
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
font-family: sans-serif;
@ -154,8 +154,8 @@ input, textarea, .select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;
margin-right: .5em;
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
background-color: $fallback--input;
background-color: var(--input, $fallback--input);
vertical-align: top;
text-align: center;
line-height: 1.1em;

4
src/_variables.scss
View file

@ -4,7 +4,8 @@ $darkened-background: whitesmoke;
$fallback--bg: #121a24;
$fallback--btn: #182230;
$fallback--faint: #999;
$fallback--input: #182230;
$fallback--faint: rgba(185, 185, 186, .5);
$fallback--fg: #b9b9ba;
$fallback--link: #d8a070;
$fallback--icon: #666;
@ -21,6 +22,7 @@ $fallback--cAlertRed: rgba(211,16,20,.5);
$fallback--panelRadius: 10px;
$fallback--checkBoxRadius: 2px;
$fallback--btnRadius: 4px;
$fallback--inputRadius: 4px;
$fallback--tooltipRadius: 5px;
$fallback--avatarRadius: 4px;
$fallback--avatarAltRadius: 10px;

3
src/components/attachment/attachment.vue
View file

@ -96,6 +96,9 @@
background: rgba(230,230,230,0.6);
font-weight: bold;
z-index: 4;
line-height: 1;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
}
.small {

2
src/components/nav_panel/nav_panel.vue
View file

@ -45,8 +45,6 @@
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
padding: 0;
&:first-child a {

2
src/components/notifications/notifications.scss
View file

@ -98,7 +98,7 @@
.status {
padding: 0.25em 0;
color: $fallback--faint;
color: var($fallback--faint, --faint);
color: var(--faint, $fallback--faint);
}
padding: 0;
.media-body {

14
src/components/post_status_form/post_status_form.js
View file

@ -239,14 +239,12 @@ const PostStatusForm = {
e.dataTransfer.dropEffect = 'copy'
},
resize (e) {
const target = e.target || e
target.style.height = 'auto'
const heightPx = target.scrollHeight - 10
if (heightPx > 54) {
target.style.height = `${target.scrollHeight - 10}px`
}
if (target.value === '') {
target.style.height = '16px'
const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) +
Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1))
e.target.style.height = 'auto'
e.target.style.height = `${e.target.scrollHeight - vertPadding}px`
if (e.target.value === '') {
e.target.style.height = '16px'
}
},
clearError () {

20
src/components/post_status_form/post_status_form.vue
View file

@ -22,12 +22,7 @@
<div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel">
<div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
<div v-if="candidate.highlighted" class="autocomplete">
<span v-if="candidate.img"><img :src="candidate.img"></span>
<span v-else>{{candidate.utf}}</span>
<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
</div>
<div v-else class="autocomplete">
<div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
<span v-if="candidate.img"><img :src="candidate.img"></img></span>
<span v-else>{{candidate.utf}}</span>
<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
@ -135,10 +130,6 @@
cursor: not-allowed;
}
.icon-cancel {
cursor: pointer;
}
form {
display: flex;
flex-direction: column;
@ -186,8 +177,8 @@
z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
min-width: 75%;
background: $fallback--btn;
background: var(--btn, $fallback--btn);
background: $fallback--bg;
background: var(--bg, $fallback--bg);
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
}
@ -216,6 +207,11 @@
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
&.highlighted {
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
}
}
}
</style>

6
src/components/status/status.vue
View file

@ -165,8 +165,6 @@
border-left-width: 0px;
line-height: 18px;
min-width: 0;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
@ -189,6 +187,10 @@
margin: 0 0 0.25em 0.8em;
}
.usercard {
margin-bottom: .7em
}
.media-heading {
flex-wrap: nowrap;
}

3
src/components/style_switcher/style_switcher.js
View file

@ -14,6 +14,7 @@ export default {
greenColorLocal: '',
orangeColorLocal: '',
btnRadiusLocal: '',
inputRadiusLocal: '',
panelRadiusLocal: '',
avatarRadiusLocal: '',
avatarAltRadiusLocal: '',
@ -42,6 +43,7 @@ export default {
this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange)
this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4
this.inputRadiusLocal = this.$store.state.config.radii.inputRadius || 4
this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10
this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5
this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50
@ -85,6 +87,7 @@ export default {
cGreen: greenRgb,
cOrange: orangeRgb,
btnRadius: this.btnRadiusLocal,
inputRadius: this.inputRadiusLocal,
panelRadius: this.panelRadiusLocal,
avatarRadius: this.avatarRadiusLocal,
avatarAltRadius: this.avatarAltRadiusLocal,

6
src/components/style_switcher/style_switcher.vue
View file

@ -58,6 +58,11 @@
<input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal" max="16">
<input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
</div>
<div class="radius-item">
<label for="inputradius" class="theme-radius-lb">{{$t('settings.inputRadius')}}</label>
<input id="inputradius" class="theme-radius-rn" type="range" v-model="inputRadiusLocal" max="16">
<input id="inputradius-t" class="theme-radius-in" type="text" v-model="inputRadiusLocal">
</div>
<div class="radius-item">
<label for="panelradius" class="theme-radius-lb">{{$t('settings.panelRadius')}}</label>
<input id="panelradius" class="theme-radius-rn" type="range" v-model="panelRadiusLocal" max="50">
@ -86,6 +91,7 @@
</div>
<div :style="{
'--btnRadius': btnRadiusLocal + 'px',
'--inputRadius': inputRadiusLocal + 'px',
'--panelRadius': panelRadiusLocal + 'px',
'--avatarRadius': avatarRadiusLocal + 'px',
'--avatarAltRadius': avatarAltRadiusLocal + 'px',

16
src/components/user_card_content/user_card_content.js
View file

@ -2,16 +2,24 @@ import StillImage from '../still-image/still-image.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default {
props: [ 'user', 'switcher', 'hideBio' ],
props: [ 'user', 'switcher', 'selected', 'hideBio' ],
computed: {
headingStyle () {
const color = this.$store.state.config.colors.bg
if (color) {
const rgb = hex2rgb(color)
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
console.log(rgb)
console.log([
`url(${this.user.cover_photo})`,
`linear-gradient(to bottom, ${tintColor}, ${tintColor})`
].join(', '))
return {
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})`
backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
backgroundImage: [
`linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
`url(${this.user.cover_photo})`
].join(', ')
}
}
},
@ -61,8 +69,10 @@ export default {
store.state.api.backendInteractor.setUserMute(this.user)
},
setProfileView (v) {
if (this.switcher) {
const store = this.$store
store.commit('setProfileView', { v })
}
}
}
}

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

@ -14,8 +14,9 @@
</router-link>
<div class="name-and-screen-name">
<div :title="user.name" class='user-name'>{{user.name}}</div>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }">
<div class='user-screen-name'>@{{user.screen_name}}</div>
<router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
<span>@{{user.screen_name}}</span>
<span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
</router-link>
</div>
</div>
@ -73,20 +74,17 @@
</div>
</div>
<div class="panel-body profile-panel-body">
<div class="user-counts">
<div class="user-count">
<a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a>
<h5 v-else>{{ $t('user_card.statuses') }}</h5>
<span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span></span>
<div class="user-counts" :class="{clickable: switcher}">
<div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
<h5>{{ $t('user_card.statuses') }}</h5>
<span>{{user.statuses_count}} <br></span>
</div>
<div class="user-count">
<a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5>{{ $t('user_card.followees') }}</h5></a>
<h5 v-else>{{ $t('user_card.followees') }}</h5>
<div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
<h5>{{ $t('user_card.followees') }}</h5>
<span>{{user.friends_count}}</span>
</div>
<div class="user-count">
<a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5>{{ $t('user_card.followers') }}</h5></a>
<h5 v-else>{{ $t('user_card.followers') }}</h5>
<div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
<h5>{{ $t('user_card.followers') }}</h5>
<span>{{user.followers_count}}</span>
</div>
</div>
@ -112,20 +110,18 @@
}
.profile-panel-body {
top: -0em;
padding-top: 4em;
word-wrap: break-word;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
}
.user-info {
color: white;
padding: 0 16px 16px 16px;
margin-bottom: -4em;
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
padding: 0 16px;
.container {
padding: 16px 10px 4px 10px;
padding: 16px 10px 6px 10px;
display: flex;
max-height: 56px;
overflow: hidden;
@ -154,10 +150,9 @@
}
}
text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
.usersettings {
color: #fff;
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
opacity: .8;
}
@ -171,14 +166,15 @@
}
.user-name{
color: white;
text-overflow: ellipsis;
overflow: hidden;
}
.user-screen-name {
color: white;
font-weight: lighter;
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
display: inline-block;
font-weight: light;
font-size: 15px;
padding-right: 0.1em;
}
@ -191,14 +187,11 @@
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;
margin: 0 0 .4em 0;
padding-left: 16px;
text-align: left;
}
@ -238,12 +231,37 @@
.user-counts {
display: flex;
line-height:16px;
padding: 1em 1.5em 0em 1em;
padding: .5em 1.5em 0em 1.5em;
text-align: center;
justify-content: space-between;
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
&.clickable {
.user-count {
cursor: pointer;
&:hover:not(.selected) {
transition: border-bottom 100ms;
border-bottom: 3px solid $fallback--link;
border-bottom: 3px solid var(--link, $fallback--link);
}
}
}
}
.user-count {
flex: 1;
padding: .5em 0 .5em 0;
margin: 0 .5em;
&.selected {
transition: none;
border-bottom: 5px solid $fallback--link;
border-bottom: 5px solid var(--link, $fallback--link);
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
}
h5 {
font-size:1em;
@ -256,7 +274,8 @@
}
.dailyAvg {
font-size: 0.8em;
opacity: 0.5;
margin-left: 1em;
font-size: 0.7em;
color: #CCC;
}
</style>

2
src/components/user_profile/user_profile.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div v-if="user" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true"></user-card-content>
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
</div>
<Timeline :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
</div>

2
src/i18n/messages.js
View file

@ -270,6 +270,7 @@ const en = {
cOrange: 'Orange (Favorite)',
cGreen: 'Green (Retweet)',
btnRadius: 'Buttons',
inputRadius: 'Input fields',
panelRadius: 'Panels',
avatarRadius: 'Avatars',
avatarAltRadius: 'Avatars (Notifications)',
@ -1488,6 +1489,7 @@ const ru = {
cOrange: 'Нравится',
cGreen: 'Повторить',
btnRadius: 'Кнопки',
inputRadius: 'Поля ввода',
panelRadius: 'Панели',
avatarRadius: 'Аватары',
avatarAltRadius: 'Аватары в уведомлениях',

9
src/services/style_setter/style_setter.js
View file

@ -71,13 +71,11 @@ const setColors = (col, commit) => {
colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
colors.faint = rgb2hex(
col.text.r * 0.45 + col.fg.r * 0.55,
col.text.g * 0.45 + col.fg.g * 0.55,
col.text.b * 0.45 + col.fg.b * 0.55) // faint text
colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text
colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
@ -92,6 +90,7 @@ const setColors = (col, commit) => {
colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
radii.btnRadius = col.btnRadius
radii.inputRadius = col.inputRadius
radii.panelRadius = col.panelRadius
radii.avatarRadius = col.avatarRadius
radii.avatarAltRadius = col.avatarAltRadius