Merge branch 'fix/moreCssFixesAndStuff' into 'develop'

Fix/more css fixes and stuff

Closes #77

See merge request pleroma/pleroma-fe!234

2 files changed, 14 insertions, 20 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6bcf1c66..e6742580 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/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
-      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 () {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 88627e3a..28dd227e 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/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">
-              <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>