Adding compact layout (#2991)

* Adding compact layout

* Fixing ESLint error

webapp/sass/responsive/_mobile.scss

@@ -45,6 +45,11 @@
     }
 
     .post {
+        &.post--compact {
+
+
+        }
+
         .post__dropdown {
             display: inline-block;
             height: 20px;

webapp/sass/responsive/_tablet.scss

@@ -65,6 +65,7 @@
     }
 }
 
+// Tablet and desktop
 @media screen and (min-width: 768px) {
     .second-bar {
         display: none;
@@ -83,6 +84,111 @@
     }
 
     .post {
+        &.post--compact {
+            padding: 5px .5em 0 80px;
+
+            .post__link {
+                margin: 4px 0 7px;
+            }
+
+            .post__time {
+                font-size: .85em;
+                left: -70px;
+                position: absolute;
+                top: 2px;
+            }
+
+            span {
+                p {
+                    &:last-child {
+                        margin-bottom: .3em;
+                    }
+                }
+            }
+
+            .post__header {
+                float: left;
+                height: 18px;
+                padding-top: 3px;
+
+                .col__name {
+                    font-weight: bold;
+                }
+
+                .col__reply {
+                    top: 2px;
+                }
+            }
+
+            &.other--root {
+                .post__body {
+                    > div {
+                        &:first-child {
+                            min-height: 21px;
+                        }
+                    }
+                }
+
+                .post__link + .post__body {
+                    clear: both;
+                }
+
+                &.post--comment {
+                    .post__header {
+                        .col__reply {
+                            top: 0;
+                        }
+                    }
+                }
+            }
+
+            .post-code {
+                clear: both;
+            }
+
+            &.same--root {
+                &.same--user {
+                    padding-left: 80px;
+
+                    .post__img {
+                        img {
+                            display: none;
+                        }
+                    }
+                }
+
+                &.post--comment {
+                    padding-top: 1px;
+
+                    .post__img {
+                        img {
+                            display: inline-block;
+                        }
+                    }
+
+                    &.same--user {
+                        .post__img {
+                            img {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    .post__header {
+                        margin-left: 12px;
+                    }
+                }
+            }
+
+            .post__body {
+                width: 100%;
+            }
+
+            .post__content {
+                padding-right: 85px;
+            }
+        }
+
         &.same--root {
             &.same--user {
                 .post__time {
@@ -94,6 +200,14 @@
                     text-rendering: auto;
                     top: -2px;
                 }
+
+                &.post--compact {
+                    .post__time {
+                        font-size: .85em;
+                        left: -70px;
+                        top: -5px;
+                    }
+                }
             }
         }
     }