Add pinned posts (#4217)

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
         }
     }
 }

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;
             }
         }

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;
 }

webapp/sass/responsive/_desktop.scss

@@ -76,6 +76,23 @@
                 }
             }
         }
+
+        &.move--left {
+            .post {
+                &.post--root,
+                &.other--root {
+                    .post__header {
+                        padding-right: 70px;
+                    }
+                }
+
+                &.post--comment {
+                    .post__header {
+                        padding-right: 70px;
+                    }
+                }
+            }
+        }
     }
 }
 

webapp/sass/responsive/_mobile.scss

@@ -252,6 +252,7 @@
                     }
                 }
             }
+
             blockquote {
                 margin-top: 0;
             }
@@ -273,6 +274,7 @@
 
         .post__header {
             margin-bottom: 0;
+            padding-right: 70px;
 
             .col__reply {
                 top: -3px;

webapp/sass/responsive/_tablet.scss

@@ -127,6 +127,15 @@
                 top: auto;
             }
         }
+
+        &.move--left,
+        &.webrtc--show,
+        &.move--right {
+            .header-list__right {
+                // hide it behind the RHS
+                z-index: -1;
+            }
+        }
     }
     .post {
         .attachment {
@@ -182,6 +191,14 @@
                 }
             }
         }
+
+        .sidebar--right__title {
+            display: inline-block;
+            max-width: 300px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 
     .inner-wrap {
@@ -213,6 +230,11 @@
                 }
             }
 
+            .post__pinned-badge {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+
             &:not(.post--thread) {
                 padding: 5px .5em 0 77px;
 
@@ -359,9 +381,16 @@
                 }
 
                 .post__header {
+                    float: left;
+                    padding-top: 3px;
+
                     .col__reply {
                         top: -21px;
                     }
+
+                    .post__pinned-badge {
+                        margin-right: 5px;
+                    }
                 }
 
                 &:not(.post--compact) {
@@ -381,6 +410,12 @@
                     }
                 }
             }
+
+            &.post--comment:not(.post--compact) {
+                .post__pinned-badge {
+                    margin-left: 10px;
+                }
+            }
         }
     }
 }