From a62d59741b347141c13126d496b971e2053e5cd7 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 6 Dec 2019 09:16:14 +0100
Subject: [PATCH] fix and changes revies, fix lint

---
 .../ContributionForm/ContributionForm.spec.js |  1 -
 .../ContributionForm/ContributionForm.vue     | 37 +++++--------------
 webapp/components/PostCard/PostCard.vue       |  3 +-
 webapp/pages/post/_id/_slug/index.vue         | 32 ++++++++--------
 4 files changed, 26 insertions(+), 47 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index c8d36459e..c84700106 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -249,7 +249,6 @@ describe('ContributionForm.vue', () => {
             wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
             expect(wrapper.find('.images-set-blur').exists()).toBe(false)
             await wrapper.find('input[type="checkbox"]').trigger('click')
-            expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
             expect(wrapper.find('.images-set-blur').exists()).toBe(true)
           })
         })
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 5d6ff1351..f2ec8327e 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -10,7 +10,7 @@
       <hc-teaser-image
         :contribution="contribution"
         @addTeaserImage="addTeaserImage"
-        :class="{ 'images-set-blur': checkedBlur }"
+        :class="{ 'images-set-blur': blurImage }"
         @addImageAspectRatio="addImageAspectRatio"
       >
         <img
@@ -20,20 +20,13 @@
         />
       </hc-teaser-image>
       <ds-text align="right" class="blurBox">
-        <div v-show="checkedBlur">
-          <ds-button
-            v-if="contribution"
-            class="bluricon-post"
-            icon="ban"
-            primary
-            @click.prevent="unBlur"
-          ></ds-button>
+        <div v-show="blurImage">
           <img
-            v-if="contribution"
             :src="contribution.image | proxyApiUrl"
             class="blurImgPreview"
             @click.prevent="unBlur"
           />
+          <ds-button class="bluricon-post" icon="ban" primary @click.prevent="unBlur"></ds-button>
         </div>
       </ds-text>
       <div style="clear: both" />
@@ -45,8 +38,8 @@
             class="blurImageCheckbox"
             type="checkbox"
             id="blur_img"
-            v-model="checkedBlur"
-            @change="form.checkbox = checkedBlur"
+            v-model="blurImage"
+            @change="form.checkbox = blurImage"
           />
 
           <label for="blur_img"><span class=""></span></label>
@@ -223,13 +216,13 @@ export default {
       contentMin: 3,
       hashtags: [],
       elem: null,
-      checkedBlur: false,
+      blurImage: false,
     }
   },
   created() {},
   mounted() {
     if (this.contribution && this.contribution.blurImage === true) {
-      this.checkedBlur = true
+      this.blurImage = true
     }
   },
   computed: {
@@ -242,8 +235,8 @@ export default {
   },
   methods: {
     unBlur() {
-      if (this.checkedBlur) {
-        this.checkedBlur = false
+      if (this.blurImage) {
+        this.blurImage = false
       }
     },
     submit() {
@@ -335,18 +328,6 @@ export default {
 </script>
 
 <style lang="scss">
-.img-blur-in {
-  -webkit-filter: blur(32px);
-  -moz-filter: blur(32px);
-  -ms-filter: blur(32px);
-  -o-filter: blur(32px);
-  filter: blur(32px);
-  -webkit-transition: all ease 0.2s;
-  -moz-transition: all ease 0.2s;
-  -ms-transition: all ease 0.2s;
-  -o-transition: all ease 0.2s;
-  transition: all ease 0.2s;
-}
 .images-set-blur img {
   -webkit-filter: blur(32px);
   -moz-filter: blur(32px);
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index 3aad9bc8d..a287d7ed9 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -149,7 +149,7 @@ export default {
   mounted() {
     const width = this.$el.offsetWidth
     const height = Math.min(width / this.post.imageAspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.ds-card-image')
+    const imageElement = this.$el.querySelector('.ds-card-imag')
 
     if (imageElement) {
       imageElement.style.height = `${height}px`
@@ -174,7 +174,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .ds-card-image {
   width: 100%;
   max-height: 2000px;
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index e0949498a..23dd14d14 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -10,27 +10,27 @@
         'images-set-blur': post.blurImage,
       }"
     >
-      <ds-text align="right" class="blurBox">
-        <ds-button
-          v-if="post.blurImage"
-          class="bluricon-post"
-          icon="eye"
-          primary
+      <ds-text v-show="post.blurImage" align="right" class="blurBox">
+        <img
+          v-show="!blurred"
+          :src="post.image | proxyApiUrl"
+          class="blurImgPreview"
           @click.prevent="unBlur"
-        ></ds-button>
+        />
         <ds-button
-          v-if="blur"
+          v-if="blurred"
           class="bluricon-post"
           icon="eye-slash"
           primary
           @click.prevent="setBlur"
         ></ds-button>
-        <img
-          v-if="post.blurImage"
-          :src="post.image | proxyApiUrl"
-          class="blurImgPreview"
+        <ds-button
+          v-else
+          class="bluricon-post"
+          icon="eye"
+          primary
           @click.prevent="unBlur"
-        />
+        ></ds-button>
       </ds-text>
       <div style="clear: both" />
       <hc-user :user="post.author" :date-time="post.createdAt">
@@ -151,7 +151,7 @@ export default {
       ready: false,
       title: 'loading',
       showNewCommentForm: true,
-      blur: false,
+      blurred: false,
     }
   },
   watch: {
@@ -180,13 +180,13 @@ export default {
     unBlur() {
       if (this.post.blurImage) {
         this.post.blurImage = false
-        this.blur = true
+        this.blurred = true
       }
     },
     setBlur() {
       if (!this.post.blurImage) {
         this.post.blurImage = true
-        this.blur = false
+        this.blurred = false
       }
     },
     isAuthor(id) {