Adding nsfw image blur. Fixes #438

ui/assets/css/main.css

@@ -163,3 +163,10 @@ hr {
   flex: 1;
 }
 
+.img-blur {
+  filter: blur(10px);
+  -webkit-filter: blur(10px);
+  -moz-filter: blur(10px);
+  -o-filter: blur(10px);
+  -ms-filter: blur(10px);
+}

ui/src/components/post-listing.tsx

@@ -160,18 +160,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </button>
           )}
         </div>
-        {post.url &&
+        {post.url && isImage(post.url) && !this.state.imageExpanded && (
-          isImage(post.url) &&
-          !post.nsfw &&
-          !post.community_nsfw &&
-          !this.state.imageExpanded && (
           <span
             title={i18n.t('expand_here')}
             class="pointer"
             onClick={linkEvent(this, this.handleImageExpandClick)}
           >
             <img
-                class="mx-2 mt-1 float-left img-fluid thumbnail rounded"
+              className={`mx-2 mt-1 float-left img-fluid thumbnail rounded ${(post.nsfw ||
+                post.community_nsfw) &&
+                'img-blur'}`}
               src={imageThumbnailer(post.url)}
             />
           </span>