Add pinned posts (#4217)

3 files changed, 56 insertions, 11 deletions

diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index 02f063573..b6fe98eb4 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -9,10 +9,20 @@
         .search-btns {
             display: none;
         }
-        .header-list__members {
+        .header-list__right {
+            // the negative margin-right is used
+            // to prevent the icons in the header from
+            // moving to the left when the RHS is open
+            //
+            // the below z-index is used to ensure the icons
+            // stays on the top and don't get hidden by the
+            // search's input block
+            position: relative;
+            z-index: 6;
+
             margin-right: -18px;
-            float: right;
             padding-right: 0px !important;
+            float: right;
         }
     }
 
@@ -23,10 +33,20 @@
         .search-btns {
             display: none;
         }
-        .header-list__members {
+        .header-list__right {
+            // the negative margin-right is used
+            // to prevent the icons in the header from
+            // moving to the left when the RHS is open
+            //
+            // the below z-index is used to ensure the icons
+            // stays on the top and don't get hidden by the
+            // search's input block
+            position: relative;
+            z-index: 6;
+
             margin-right: -18px;
-            float: right;
             padding-right: 0px !important;
+            float: right
         }
     }
 }
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 8ee6e8fdc..d38819d03 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -7,26 +7,43 @@
     line-height: 56px;
     width: 100%;
 
-    .member-popover__trigger {
+    .member-popover__trigger,
+    .pinned-posts-button {
+        display: inline-block;
+        min-width: 30px;
         cursor: pointer;
-        min-width: 60px;
-        padding-right: 10px;
-        text-align: right;
+        margin-left: 10px;
+        text-align: center;
         white-space: nowrap;
 
         .fa {
             font-size: 16px;
+        }
+    }
+
+    .member-popover__container,
+    .member-popover__trigger {
+        display: inline;
+    }
+
+    .member-popover__trigger {
+        .fa {
             margin-left: 4px;
         }
     }
 
+    .pinned-posts-button svg {
+        position: relative;
+        top: 2px;
+    }
+
     &.alt {
         margin: 0;
 
         th {
             font-weight: normal !important;
 
-            &.header-list__members {
+            &.header-list__right {
                 padding-right: 4px;
             }
         }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index de45eedd5..debcd70e7 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1343,15 +1343,23 @@
     }
 }
 
-.bot-indicator {
+.bot-indicator,
+.post__pinned-badge {
     border-radius: 2px;
     font-family: inherit;
     font-size: 10px;
     font-weight: 600;
-    margin: 2px 10px 0 -4px;
     padding: 1px 4px;
 }
 
+.bot-indicator {
+    margin: 2px 10px 0 -4px;
+}
+
+.post__pinned-badge {
+    margin-left: 7px;
+}
+
 .permalink-text {
     overflow: hidden;
 }