PLT-3506 Added flagged posts functionality (#3679)

* Added flagged posts functionality

* UI Improvements to flags (#3697)

* Added flag functionality for mobile

* Updating flagged text (#3699)

* Add back button to RHS thread when coming from flagged posts

* Updating position of flags (#3708)

* Plt 3506 - Reverting flag position (#3724)

* Revert "Updating position of flags (#3708)"

This reverts commit aaa05632c5d9eda35a048300a5bd7e99584c5b58.

* Fixing the icon in search

* Help text and white space improvements (#3730)

* Updatng help text and some white spacing.

* Updating help text

1 files changed, 44 insertions, 3 deletions

diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 605c03658..8513f779a 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -486,6 +486,7 @@ body.ios {
     &:hover {
         .dropdown,
         .comment-icon__container,
+        .flag-icon__container,
         .post__reply,
         .post__remove {
             visibility: visible;
@@ -561,7 +562,7 @@ body.ios {
             .img-div {
                 max-height: 150px;
                 max-width: 150px;
-        }
+            }
 
             p {
                 line-height: inherit;
@@ -573,7 +574,7 @@ body.ios {
 
             ol,
             ul {
-            clear: both;
+                clear: both;
                 padding-left: 20px;
             }
         }
@@ -694,6 +695,13 @@ body.ios {
                 }
             }
 
+            .flag-icon__container {
+                left: 36px;
+                margin-left: 5px;
+                position: absolute;
+                top: 8px;
+            }
+
             .post__img {
                 img {
                     display: none;
@@ -835,7 +843,9 @@ body.ios {
     }
 
     .post__img {
-        width: 42px;
+        padding-right: 10px;
+        text-align: right;
+        width: 53px;
 
         svg {
             height: 32px;
@@ -1076,6 +1086,7 @@ body.ios {
         display: inline-block;
         margin-right: 6px;
         visibility: hidden;
+
         svg {
             fill: inherit;
             position: relative;
@@ -1115,6 +1126,36 @@ body.ios {
         }
     }
 
+    .flag-icon__container {
+        display: inline-block;
+        font-size: 12px;
+        margin-left: 7px;
+        position: relative;
+        top: 1px;
+        visibility: hidden;
+
+        &.visible {
+            visibility: visible;
+        }
+
+        path {
+            fill: inherit;
+        }
+
+        .fa-star-o {
+            @include opacity(.8);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &.icon--visible {
+            visibility: visible;
+        }
+
+    }
+
     .web-embed-data {
         @include border-radius(2px);
         @include alpha-property(background, $black, 0.05);