From 8a0db428bb50e2bab969d931ffd10ab7bc929ac4 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 30 Jan 2017 19:39:43 +0500 Subject: Bug fixes (#5218) * PLT-5319 - Fixing text alignment security modal * PLT-5280 - Fixing add comment button in RHS mobile * PLT-5397 - Fixing Floating timestamp on mobile * PLT-5129 - Hiding formatting help text * PLT-5242 - Adjusting team sidebar border on IE!! * PLT-5226 - Placing settings toggle over header * PLT-5222 - Placed team description tooltip on top * PLT-5201 - Account settings overlap on mobile * PLT-5138 - Adding bg to pending post actions * PLT-5286 - Adjusting play button on youtube videos * PLT-5313 - Adjusting space between emoji reactions * PLT-5187 - Adjusting text in channel switcher * PLT-5399 - Reverting button alignment in modal --- webapp/sass/components/_mentions.scss | 7 ++ webapp/sass/components/_videos.scss | 146 +++++++++++++++++----------------- webapp/sass/layout/_headers.scss | 13 ++- webapp/sass/layout/_post.scss | 78 +++++++++--------- webapp/sass/layout/_team-sidebar.scss | 2 + webapp/sass/responsive/_desktop.scss | 4 + webapp/sass/responsive/_mobile.scss | 15 +++- webapp/sass/responsive/_tablet.scss | 5 -- 8 files changed, 148 insertions(+), 122 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index e1e35ea29..86e7c0a28 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -21,6 +21,13 @@ width: 100%; z-index: 101; + .status { + font-size: 15px; + text-align: center; + vertical-align: bottom; + width: 20px; + } + .fa-user { position: relative; top: -1px; diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss index 93ad5707b..16e3468d1 100644 --- a/webapp/sass/components/_videos.scss +++ b/webapp/sass/components/_videos.scss @@ -1,93 +1,95 @@ @charset 'UTF-8'; -.video-div { - margin-bottom: 8px; - max-width: 480px; - position: relative; +.post { + .video-div { + margin-bottom: 8px; + max-width: 480px; + position: relative; - .video-thumbnail { - height: auto; - max-width: 100%; - } + .video-thumbnail { + height: auto; + max-width: 100%; + } + + .video-thumbnail__error { + height: 100%; + line-height: 2; + padding: 110px 0; + text-align: center; + width: 100%; - .video-thumbnail__error { - height: 100%; - line-height: 2; - padding: 110px 0; - text-align: center; - width: 100%; + .fa { + @include opacity(.5); + } - .fa { - @include opacity(.5); + div { + font-size: 1.2em; + } } - div { - font-size: 1.2em; + .block { + background-color: alpha-color($black, .5); + border-radius: 10px; + height: 150px; + left: 50%; + margin: -75px 0 0 -100px; + position: absolute; + top: 50%; + width: 200px; } } - .block { - background-color: alpha-color($black, .5); - border-radius: 10px; - height: 150px; - left: 50%; - margin: -75px 0 0 -100px; - position: absolute; - top: 50%; - width: 200px; + .video-type { + @include opacity(.8); + font-size: 15px; + margin: 0; + padding: 0; } -} - -.video-type { - @include opacity(.8); - font-size: 15px; - margin: 0; - padding: 0; -} - -.video-title { - font-size: 15px; - margin-top: 3px; -} -.play-button { - @include border-radius(14px); - border: 4px solid alpha-color($white, .4); - height: 100px; - position: absolute; - right: 51px; - top: 26px; - width: 100px; + .video-title { + font-size: 15px; + margin-top: 3px; + } - span { - border-bottom: 36px solid transparent; - border-left: 60px solid alpha-color($white, .4); - border-top: 36px solid transparent; - height: 0; - left: 20px; + .play-button { + @include border-radius(14px); + border: 4px solid alpha-color($white, .4); + height: 100px; position: absolute; - top: 10px; - width: 0; + right: 51px; + top: 26px; + width: 100px; + + span { + border-bottom: 36px solid transparent; + border-left: 60px solid alpha-color($white, .4); + border-top: 36px solid transparent; + height: 0; + left: 20px; + position: absolute; + top: 10px; + width: 0; + } } -} -.img-div { - -moz-force-broken-image-icon: 1; - border-radius: 5px; - margin-bottom: 8px; - max-height: 500px; - max-width: 450px; - position: relative; + .img-div { + -moz-force-broken-image-icon: 1; + border-radius: 5px; + margin-bottom: 8px; + max-height: 500px; + max-width: 450px; + position: relative; - &.placeholder { - height: 500px; + &.placeholder { + height: 500px; + } + + .sidebar--right & { + max-width: 100%; + } } - .sidebar--right & { - max-width: 100%; + .video-loading { + height: 360px; } } - -.video-loading { - height: 360px; -} \ No newline at end of file diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 710a8ad6a..ca5597bf9 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -275,8 +275,9 @@ .sidebar-header-dropdown, .admin-navbar-dropdown { font-size: .85em; - position: absolute; + left: 0; margin-right: -15px; + position: absolute; right: 22px; top: 10px; z-index: 5; @@ -287,16 +288,19 @@ @include single-transition(all, .1s, linear); background: none; color: $white; - float: right; + display: block; font-size: 1em; + height: 40px; + left: 0; line-height: 1.8; padding: 10px; + width: 100%; } .dropdown-menu { - width: 199px; - margin-top: 4px; margin-right: 3px; + margin-top: 4px; + width: 199px; a { overflow: hidden; @@ -308,6 +312,7 @@ .sidebar-header-dropdown__icon, .admin-navbar-dropdown__icon { fill: $white; + float: right; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 0428a20ae..0f72a7f26 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -311,7 +311,7 @@ &.scrolling { @include translateY(0); - @include opacity(.8); + @include opacity(.9); } &.rhs { @@ -322,6 +322,7 @@ @include border-radius(3px); @include font-smoothing(initial); background: $primary-color; + border: 1px solid; color: $white; display: inline-block; font-size: 12px; @@ -585,6 +586,7 @@ top: 2px; } } + .search-item-snippet { blockquote { margin-top: 0; @@ -1091,7 +1093,7 @@ } .pending-post-actions { - background: alpha-property($black, .7); + background: alpha-color($black, .7); color: $white; font-size: .9em; padding: 5px 7px; @@ -1111,6 +1113,42 @@ font-size: .87em; } } + + .post-reaction-list { + min-height: 30px; + } + + .post-reaction { + @include user-select(none); + @include border-radius(3px); + border: 1px solid $primary-color; + cursor: pointer; + display: inline-block; + font-size: 11px; + height: 23px; + margin-bottom: 5px; + margin-right: 5px; + padding: 0 4px 0 3px; + + .post-reaction__emoji { + height: 16px; + margin: 2px 3px 0 0; + vertical-align: top; + width: 16px; + } + + .post-reaction__count { + line-height: 10px; + position: relative; + top: 3px; + } + + &--current-user { + .post-reaction__count { + font-weight: 600; + } + } + } } .post__link { @@ -1299,39 +1337,3 @@ margin-left: 50px !important; min-width: 320px; } - -.post-reaction-list { - min-height: 30px; -} - -.post-reaction { - @include user-select(none); - @include border-radius(3px); - border: 1px solid $primary-color; - cursor: pointer; - display: inline-block; - font-size: 11px; - height: 23px; - padding: 0 4px 0 3px; - margin-right: 5px; - margin-bottom: 5px; - - .post-reaction__emoji { - height: 16px; - margin: 2px 3px 0 0; - vertical-align: top; - width: 16px; - } - - .post-reaction__count { - line-height: 10px; - position: relative; - top: 3px; - } - - &--current-user { - .post-reaction__count { - font-weight: 600; - } - } -} diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index 52f2dbd06..a600b8d44 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -21,6 +21,8 @@ width: 100%; a { + display: block; + margin-left: 11px; text-decoration: none; } diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index 68b47684e..891431f20 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -54,6 +54,10 @@ } } + .help__format-text { + display: none; + } + .inner-wrap { &.move--left, &.webrtc--show { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 5ade6046e..0914e2a18 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -608,6 +608,17 @@ display: block; .settings-content { + .section-title { + padding-right: 15px; + } + + .section-edit { + position: relative; + right: 0; + text-align: left; + top: 0; + } + .appearance-section { .theme-elements { .element { @@ -1080,16 +1091,14 @@ } .post-create-footer { - padding: 0 45px 0 45px; - .control-label { margin: .5em 0; top: 0; } .post-error { - top: 0; left: 0; + top: 0; } } } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index ac8b50961..a8fb2bbe7 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -33,7 +33,6 @@ } .post-error { - left: 32px; position: relative; top: 0; @@ -117,10 +116,6 @@ width: 100%; } - .help__format-text { - display: none; - } - .inner-wrap { &:not(.move--left) { margin-right: 0 !important; -- cgit v1.2.3-1-g7c22