From d2fe79782119c061173c1b07753f634f0766bae9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Sep 2019 02:14:40 +0300
Subject: update status/user card to use same gradient mask fading effect
 instead of background hack

---
 src/components/user_card/user_card.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

(limited to 'src/components/user_card/user_card.vue')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index fc18e240..c2626260 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -2,8 +2,9 @@
   <div
     class="user-card"
     :class="classes"
-    :style="style"
   >
+    <div :class="{ 'hide-bio': hideBio }" :style="style" class="background-image">
+    </div>
     <div class="panel-heading">
       <div class="user-info">
         <div class="container">
@@ -298,7 +299,7 @@
 @import '../../_variables.scss';
 
 .user-card {
-  background-size: cover;
+  position: relative;
 
   .panel-heading {
     padding: .5em 0;
@@ -307,14 +308,35 @@
     background: transparent;
     flex-direction: column;
     align-items: stretch;
+    // create new stacking context
+    position: relative;
   }
 
   .panel-body {
     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%);
     border-bottom-right-radius: inherit;
     border-bottom-left-radius: inherit;
+    // create new stacking context
+    position: relative;
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
+          linear-gradient(to top, white, white);
+    // Autoprefixed seem to ignore this one, and also syntax is different
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    background-size: cover;
+    mask-size: 100% 60%;
+
+    &.hide-bio {
+      mask-size: 100% 40px;
+    }
   }
 
   p {
-- 
cgit v1.2.3-70-g09d2


From 2f26e8acc5395753f4d649d9a1bfbe356717e9ac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 25 Sep 2019 20:23:55 +0300
Subject: eslint

---
 src/components/emoji_input/emoji_input.js            | 2 +-
 src/components/emoji_picker/emoji_picker.vue         | 9 ++++++---
 src/components/post_status_form/post_status_form.vue | 6 +++---
 src/components/user_card/user_card.vue               | 7 +++++--
 4 files changed, 15 insertions(+), 9 deletions(-)

(limited to 'src/components/user_card/user_card.vue')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index f30cd1e4..a586b819 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -401,7 +401,7 @@ const EmojiInput = {
       this.$emit('input', e.target.value)
     },
     onClickInput (e) {
-      this.showPicker = false;
+      this.showPicker = false
     },
     onClickOutside (e) {
       if (this.disableClickOutside) return
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 6c43dd97..42f20130 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -77,13 +77,16 @@
         </div>
         <div
           class="keep-open"
-          >
+        >
           <input
             :id="labelKey + 'keep-open'"
             v-model="keepOpen"
             type="checkbox"
-            >
-          <label class="keep-open-label" :for="labelKey + 'keep-open'">
+          >
+          <label
+            class="keep-open-label"
+            :for="labelKey + 'keep-open'"
+          >
             <div class="keep-open-label-text">
               {{ $t('emoji.keep_open') }}
             </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5f9e21ae..4916d988 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,7 +1,7 @@
 <template>
-<div
-  class="post-status-form"
-  ref="root"
+  <div
+    ref="root"
+    class="post-status-form"
   >
     <form
       autocomplete="off"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c2626260..629d1fd0 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -3,8 +3,11 @@
     class="user-card"
     :class="classes"
   >
-    <div :class="{ 'hide-bio': hideBio }" :style="style" class="background-image">
-    </div>
+    <div
+      :class="{ 'hide-bio': hideBio }"
+      :style="style"
+      class="background-image"
+    />
     <div class="panel-heading">
       <div class="user-info">
         <div class="container">
-- 
cgit v1.2.3-70-g09d2

