Merge branch 'fix/moreCssFixesAndStuff' into 'develop'

Fix/more css fixes and stuff

Closes #77

See merge request pleroma/pleroma-fe!234

src/App.scss

@@ -88,13 +88,13 @@ label.select {
 
 input, textarea, .select {
   border: none;
-  border-radius: $fallback--btnRadius;
+  border-radius: $fallback--inputRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  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: $fallback--input;
-  background-color: var(--lightBg, $fallback--lightBg);
+  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: $fallback--input;
-      background-color: var(--btn, $fallback--btn);
+      background-color: var(--input, $fallback--input);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;

src/_variables.scss

@@ -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;

src/components/attachment/attachment.vue

@@ -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 {

src/components/nav_panel/nav_panel.vue

@@ -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 {

src/components/notifications/notifications.scss

@@ -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 {

src/components/post_status_form/post_status_form.js

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

src/components/post_status_form/post_status_form.vue

@@ -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">
+            <div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
-              <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">
               <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: $fallback--bg;
-    background: var(--btn, $fallback--btn);
+    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>

src/components/status/status.vue

@@ -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;
   }

src/components/style_switcher/style_switcher.js

@@ -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,

src/components/style_switcher/style_switcher.vue

@@ -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',

src/components/user_card_content/user_card_content.js

@@ -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)})`,
+          backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
-          backgroundImage: `url(${this.user.cover_photo})`
+          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 })
       }
     }
   }
+}

src/components/user_card_content/user_card_content.vue

@@ -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 } }">
+            <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
-              <div class='user-screen-name'>@{{user.screen_name}}</div>
+              <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-counts" :class="{clickable: switcher}">
-        <div class="user-count">
+        <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
-          <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a>
+          <h5>{{ $t('user_card.statuses') }}</h5>
-          <h5 v-else>{{ $t('user_card.statuses') }}</h5>
+          <span>{{user.statuses_count}} <br></span>
-          <span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span></span>
         </div>
-        <div class="user-count">
+        <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
-          <a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5>{{ $t('user_card.followees') }}</h5></a>
+          <h5>{{ $t('user_card.followees') }}</h5>
-          <h5 v-else>{{ $t('user_card.followees') }}</h5>
           <span>{{user.friends_count}}</span>
         </div>
-        <div class="user-count">
+        <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
-          <a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5>{{ $t('user_card.followers') }}</h5></a>
+          <h5>{{ $t('user_card.followers') }}</h5>
-          <h5 v-else>{{ $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;
+  color: $fallback--lightFg;
-  padding: 0 16px 16px 16px;
+  color: var(--lightFg, $fallback--lightFg);
-  margin-bottom: -4em;
+  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;
+    color: $fallback--lightFg;
-    font-weight: lighter;
+    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;
+  margin-left: 1em;
-  opacity: 0.5;
+  font-size: 0.7em;
+  color: #CCC;
 }
 </style>

src/components/user_profile/user_profile.vue

@@ -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>

src/i18n/messages.js

@@ -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: 'Аватары в уведомлениях',

src/services/style_setter/style_setter.js

@@ -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(
+  colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
-    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.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