unblur function by contribution

webapp/components/ContributionForm/ContributionForm.vue

@@ -159,7 +159,6 @@ export default {
     let slug = null
     const form = { ...formDefaults }
     if (this.contribution && this.contribution.id) {
-      //  console.log("edit jaaa")
       id = this.contribution.id
       slug = this.contribution.slug
       form.title = this.contribution.title
@@ -171,9 +170,6 @@ export default {
           : null
       form.categoryIds = this.categoryIds(this.contribution.categories)
       form.checkedBlur = this.contribution.checkedBlur
-
-      // console.log(this.contribution.checkedBlur)
-      // console.log(this.contribution)
     }
 
     return {
@@ -221,11 +217,6 @@ export default {
   },
   methods: {
     checkedChange() {
-      // console.log( 'checkedChange')
-      // console.log( 'this.checkedBlur old', this.checkedBlur)
-      // console.log( 'THIS', this.$el)
-      // console.log( 'THIS.form', this.form)
-
       if (this.$el) {
         this.elem = this.$el.querySelector('img')
       } else {
@@ -243,7 +234,6 @@ export default {
         this.form.checkedBlur = true
         this.form.checkbox = true
       }
-      //  console.log( 'this.checkedBlur new', this.checkedBlur)
     },
     submit() {
       const {
@@ -329,7 +319,7 @@ export default {
 </script>
 
 <style lang="scss">
-.img-blur-in .ds-card-image img {
+.img-blur-in {
   -webkit-filter: blur(32px);
   -moz-filter: blur(32px);
   -ms-filter: blur(32px);

webapp/components/PostCard/PostCard.vue

@@ -9,10 +9,6 @@
       'images-set-blur': post.checkedBlur,
     }"
   >
-    <ds-text v-show="post.checkedBlur" align="center" class="blurbox">
-      <ds-button class="bluricon" icon="eye-slash" primary></ds-button>
-    </ds-text>
-
     <!-- Post Link Target -->
     <nuxt-link
       class="post-link"
@@ -166,18 +162,6 @@ export default {
   -o-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
-
-.blurbox {
-  padding: 13px 0px;
-  top: 67px;
-  right: 34px;
-  left: 25px;
-  position: absolute;
-  color: floralwhite;
-}
-.bluricon {
-  font-size: xx-large;
-}
 </style>
 
 <style lang="scss" scoped>

webapp/pages/post/_id/_slug/index.vue

@@ -4,9 +4,28 @@
       :lang="post.language"
       v-if="post && ready"
       :image="post.image | proxyApiUrl"
-      :class="{ 'post-card': true, 'disabled-content': post.disabled }"
+      :class="{
+        'post-card': true,
+        'disabled-content': post.disabled,
+        'images-set-blur': post.checkedBlur,
+      }"
     >
-      <ds-space margin-bottom="small" />
+      <ds-text align="right" class="blurBox">
+        <ds-button
+          v-show="post.checkedBlur"
+          class="bluricon-post"
+          icon="eye-slash"
+          primary
+          @click.prevent="unBlur"
+        ></ds-button>
+        <img
+          v-show="post.checkedBlur"
+          :src="post.image | proxyApiUrl"
+          class="blurImgPreview"
+          @click.prevent="unBlur"
+        />
+      </ds-text>
+      <div style="clear: both" />
       <hc-user :user="post.author" :date-time="post.createdAt">
         <template v-slot:dateTime>
           <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
@@ -150,6 +169,11 @@ export default {
     },
   },
   methods: {
+    unBlur() {
+      if (this.post.checkedBlur) {
+        this.post.checkedBlur = false
+      }
+    },
     isAuthor(id) {
       return this.$store.getters['auth/user'].id === id
     },
@@ -206,8 +230,38 @@ export default {
   },
 }
 </script>
-
 <style lang="scss">
+.images-set-blur .ds-card-image img {
+  -webkit-filter: blur(22px);
+  -moz-filter: blur(22px);
+  -ms-filter: blur(22px);
+  -o-filter: blur(22px);
+  filter: blur(22px);
+  -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;
+}
+
+.blurBox {
+  text-align: right;
+  position: relative;
+  top: -70px;
+  float: right;
+}
+.blurImgPreview {
+  width: 100px;
+}
+
+.bluricon-post {
+  font-size: xx-large;
+  /* padding: 13px; */
+  /* position: absolute; */
+  background-color: green;
+  /* top: 131px; */
+}
+
 .page-name-post-id-slug {
   .content-menu {
     float: right;