Add pinned posts (#4217)

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