From 848a8663ed7f856aee3f801a62b82e87b20de0ea Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 3 Jun 2016 00:34:47 +0500 Subject: Multiple UI improvements (#3220) * Multiple UI improvements * Pushing time fix * Fixing absolute time stamps on IOS --- webapp/sass/components/_mentions.scss | 4 +- webapp/sass/layout/_headers.scss | 1 - webapp/sass/layout/_post.scss | 158 +++++++++++++--------------------- webapp/sass/layout/_sidebar-left.scss | 4 - webapp/sass/layout/_webhooks.scss | 107 +++++++++++++++++++++++ webapp/sass/responsive/_tablet.scss | 22 +++++ webapp/sass/routes/_settings.scss | 9 +- 7 files changed, 196 insertions(+), 109 deletions(-) (limited to 'webapp/sass') 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; + } } } -- cgit v1.2.3-1-g7c22