Adding compact layout (#2991)

* Adding compact layout

* Fixing ESLint error

webapp/sass/components/_modal.scss

@@ -448,7 +448,7 @@
             @include opacity(.8);
             float: right;
             margin-right: 3px;
-            margin-top: 12px;
+            margin-top: 8px;
         }
 
         .member-select__container {
@@ -459,7 +459,7 @@
             select {
                 @include opacity(.8);
                 float: right;
-                margin: 5px 5px 0 2px;
+                margin: 1px 5px 0 2px;
                 width: auto;
             }
         }

webapp/sass/layout/_post.scss

@@ -417,7 +417,8 @@ body.ios {
     .post-create-footer {
         @include clearfix;
         font-size: 13px;
-        padding: 3px 0 0 0;
+        padding: 3px 0 0;
+
         .control-label {
             font-weight: normal;
             margin-bottom: 0;
@@ -482,6 +483,79 @@ body.ios {
         background-color: beige;
     }
 
+    &.post--compact {
+
+        .markdown__heading {
+            font-size: 1em;
+            margin: 0 0 7px;
+        }
+
+        .post__body {
+            background: transparent !important;
+            margin-top: -1px;
+            padding: 3px 0;
+        }
+
+        .post-image__columns {
+            clear: both;
+        }
+
+        .post-image__column {
+            @include border-radius(2px);
+            font-size: .9em;
+            height: 26px;
+            line-height: 25px;
+            padding: 0 7px;
+
+            .post-image__thumbnail {
+                display: none;
+            }
+
+            .post-image__details {
+                background: transparent;
+                border: none;
+                padding: 0;
+                width: 100%;
+
+                > div {
+                    display: none;
+                }
+            }
+
+            .post-image__name {
+                @include clearfix;
+                display: block;
+                margin: 0;
+                padding-right: 10px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+                i {
+                    font-size: .9em;
+                    margin-right: 5px;
+                    opacity: .5;
+                }
+            }
+
+            a {
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+        }
+
+        .post__img {
+            padding-top: 3px;
+            width: 28px;
+
+            img,
+            svg {
+                height: 20px;
+                width: 20px;
+            }
+        }
+    }
+
     p {
         font-size: .97em;
         line-height: 1.6em;

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