Multiple UI improvements (#3220)

* Multiple UI improvements

* Pushing time fix

* Fixing absolute time stamps on IOS

7 files changed, 196 insertions, 109 deletions

diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 4753b4e9a..9e47e2a71 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -10,17 +10,19 @@
 }
 
 .mentions__name {
+    @include clearfix;
     cursor: pointer;
     font-size: 13px;
     height: 36px;
     line-height: 36px;
+    margin: 5px 0;
     padding: 2px;
     position: relative;
     white-space: nowrap;
     width: 100%;
     z-index: 101;
 
-    .mention-align {
+    .mention--align {
         @include clearfix;
         text-overflow: ellipsis;
         width: calc(100% - 50px);
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 7db561438..db2ba48bd 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -68,7 +68,6 @@
 .channel-intro {
     border-bottom: 1px solid $light-gray;
     margin: 0 auto 15px;
-    max-width: 990px;
     padding: 0 15px;
 
     .intro-links {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 745439ed8..d20cff8ae 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -258,6 +258,10 @@ body.ios {
         position: absolute;
         width: 100%;
 
+        .modal-open & {
+            @include clearfix;
+        }
+
         &.active {
             display: inline;
         }
@@ -484,6 +488,26 @@ body.ios {
     }
 
     &.post--compact {
+        blockquote {
+            display: inline-block;
+            font-size: 1em;
+            margin-left: 0;
+            padding: 3px 0 0 25px;
+            vertical-align: top;
+
+            &:before {
+                font-size: 15px;
+                left: 4px;
+                top: 2px;
+            }
+        }
+
+        .post__embed-container {
+            img {
+                max-height: 150px;
+                max-width: 150px;
+            }
+        }
 
         .markdown__heading {
             font-size: 1em;
@@ -492,8 +516,15 @@ body.ios {
 
         .post__body {
             background: transparent !important;
+            line-height: 1.2;
             margin-top: -1px;
             padding: 3px 0;
+
+            ol,
+            ul {
+                display: inline-block;
+                padding-left: 30px;
+            }
         }
 
         .post-image__columns {
@@ -547,7 +578,7 @@ body.ios {
 
         .post__img {
             padding-top: 3px;
-            width: 28px;
+            width: 27px;
 
             img,
             svg {
@@ -586,8 +617,8 @@ body.ios {
 
     &.post--comment {
         .post__body {
-            padding-left: 7px;
             border-left: 4px solid $gray;
+            padding-left: 7px;
         }
     }
 
@@ -595,6 +626,33 @@ body.ios {
         &.same--user {
             padding: 0 .5em 0 1em;
 
+            &.post--system {
+                padding: 8px .5em 0 1em;
+
+                .post__header {
+                    height: auto;
+                    margin-bottom: 2px;
+
+                    .col__name {
+                        display: inline-block;
+                    }
+
+                    .col__reply {
+
+                    }
+                }
+
+                .post__time {
+                    @include opacity(.6);
+                    font-size: .9em;
+                    left: inherit;
+                    line-height: inherit;
+                    position: inherit;
+                    text-rendering: inherit;
+                    top: inherit;
+                }
+            }
+
             &:hover {
                 .post__time {
                     @include opacity(.5);
@@ -1047,102 +1105,6 @@ body.ios {
     padding: 2px 4px;
 }
 
-.attachment {
-    .attachment__content {
-        border-radius: 4px;
-        border-style: solid;
-        border-width: 1px;
-        margin: 0 0 5px 0;
-        padding: 2px 5px;
-    }
-
-    .attachment__thumb-pretext {
-        background: transparent;
-        border: none;
-        margin-left: 5px;
-    }
-
-    .attachment__container {
-        border-left-style: solid;
-        border-left-width: 4px;
-        padding: 2px 0 2px 10px;
-
-        &.attachment__container--good {
-            border-left-color: #00c100;
-        }
-
-        &.attachment__container--warning {
-            border-left-color: #dede01;
-        }
-
-        &.attachment__container--danger {
-            border-left-color: #e40303;
-        }
-    }
-
-    .attachment__body {
-        float: left;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding-right: 5px;
-        width: 80%;
-
-        &.attachment__body--no_thumb {
-            width: 100%;
-        }
-    }
-
-    .attachment__text p:last-of-type {
-        display: inline-block;
-    }
-
-    .attachment__title {
-        font-size: 16px;
-        height: 22px;
-        line-height: 16px;
-        margin: 5px 0;
-        padding: 0;
-
-        a {
-            font-size: 16px;
-        }
-    }
-
-    .attachment__author-icon {
-        @include border-radius(50px);
-        height: 14px;
-        margin-right: 5px;
-        width: 14px;
-    }
-
-    .attachment__image {
-        margin-bottom: 1em;
-        max-width: 100%;
-    }
-
-    .attachment__thumb-container {
-        float: right;
-        width: 20%;
-
-        img {
-            max-height: 75px;
-            max-width: 100%;
-        }
-    }
-
-    .attachment___fields {
-        width: 100%;
-
-        .attachment___field-caption {
-            font-weight: 700;
-        }
-
-        .attachment___field p {
-            margin: 0;
-        }
-    }
-}
-
 .permalink-text {
     overflow: hidden;
 }
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index cc8f13730..6b8658d25 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -184,10 +184,6 @@
                     }
                 }
 
-                &.nav-more {
-                    text-decoration: underline;
-                }
-
                 &.unread-title {
                     font-weight: 600;
                 }
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index ffd8dd7dc..61658ea5e 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -35,3 +35,110 @@
         padding-right: 20px;
     }
 }
+
+
+.attachment {
+    .attachment__content {
+        border-radius: 4px;
+        border-style: solid;
+        border-width: 1px;
+        margin: 0 0 5px 0;
+        padding: 2px 5px;
+    }
+
+    .attachment__thumb-pretext {
+        background: transparent;
+        border: none;
+        margin-left: 5px;
+    }
+
+    .attachment__container {
+        border-left-style: solid;
+        border-left-width: 4px;
+        padding: 10px;
+
+        &.attachment__container--good {
+            border-left-color: #00c100;
+        }
+
+        &.attachment__container--warning {
+            border-left-color: #dede01;
+        }
+
+        &.attachment__container--danger {
+            border-left-color: #e40303;
+        }
+    }
+
+    .attachment__body {
+        float: left;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-right: 5px;
+        width: 80%;
+
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+
+    .attachment__author-name {
+        @include opacity(.6);
+    }
+
+    .attachment__title {
+        font-size: 14px;
+        font-weight: 600;
+        height: 22px;
+        line-height: 18px;
+        margin: 5px 0;
+        padding: 0;
+    }
+
+    .attachment-link-more {
+        display: inline-block;
+        font-size: .9em;
+        margin: 5px 0;
+    }
+
+    .attachment__author-icon {
+        @include border-radius(50px);
+        height: 14px;
+        margin-right: 5px;
+        width: 14px;
+    }
+
+    .attachment__image {
+        margin-bottom: 1em;
+        max-width: 100%;
+    }
+
+    .attachment__thumb-container {
+        float: right;
+        width: 20%;
+
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+
+    .attachment-fields {
+        width: 100%;
+
+        .attachment-field__caption {
+            font-weight: 600;
+            padding-top: .7em;
+        }
+
+        .attachment-field {
+            p {
+                margin: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index f5e341b25..0a62c0f79 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -113,6 +113,21 @@
 
                 .col__name {
                     font-weight: bold;
+                    margin-right: 2px;
+                    padding-right: 10px;
+                    position: relative;
+                    z-index: 1;
+
+                    &:after {
+                        content: ':';
+                        display: inline-block;
+                        font-family: FontAwesome;
+                        font-size: 19px;
+                        position: absolute;
+                        right: 3px;
+                        text-rendering: auto;
+                        top: -5px;
+                    }
                 }
 
                 .col__reply {
@@ -202,6 +217,13 @@
                 }
 
                 &.post--compact {
+                    &.post--system {
+                        .post__time {
+                            position: absolute;
+                            top: 3px;
+                        }
+                    }
+
                     .post__time {
                         font-size: .85em;
                         left: -70px;
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 6986959b2..376cf611e 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -141,17 +141,12 @@
                     }
 
                     .group--code {
-
                         select {
                             @include appearance(none);
                             appearance: none;
                             padding-right: 25px;
                         }
 
-                        select::ms-expand {
-                            display: none;
-                        }
-
                         &:before {
                             @include font-smoothing;
                             content: '\f0d7';
@@ -163,6 +158,10 @@
                             text-rendering: auto;
                             top: 11px;
                             z-index: 5;
+
+                            .browser--ie & {
+                                display: none;
+                            }
                         }
                     }