From b1ce1a89236942ec844a1aa5563e7573cec918b1 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 16 Nov 2015 20:01:14 +0500 Subject: Multiple UI Improvements --- web/sass-files/sass/partials/_content.scss | 1 - web/sass-files/sass/partials/_files.scss | 8 +++--- web/sass-files/sass/partials/_headers.scss | 31 ++++++++++----------- web/sass-files/sass/partials/_post.scss | 11 ++++---- web/sass-files/sass/partials/_post_right.scss | 8 ++++-- web/sass-files/sass/partials/_responsive.scss | 34 +++++++++++++++++------ web/sass-files/sass/partials/_search.scss | 11 ++++++-- web/sass-files/sass/partials/_sidebar--left.scss | 2 +- web/sass-files/sass/partials/_sidebar--menu.scss | 5 +++- web/sass-files/sass/partials/_sidebar--right.scss | 26 +++++++++++++---- 10 files changed, 88 insertions(+), 49 deletions(-) (limited to 'web/sass-files/sass') diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss index 6228cc45e..44a959a9b 100644 --- a/web/sass-files/sass/partials/_content.scss +++ b/web/sass-files/sass/partials/_content.scss @@ -20,7 +20,6 @@ background: #fff; @include display-flex; @include flex-direction(column); - flex-direction: column; .channel__wrap & { padding-top: 0; } diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 49fb8e847..168634b5e 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -1,9 +1,9 @@ .preview-container { position: relative; - margin-top: 10px; + margin-top: 25px; width: 100%; - max-height: 110px; - height: 110px; + max-height: 100px; + height: 100px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; @@ -11,7 +11,7 @@ display: inline-block; width: 120px; height: 100px; - margin: 7px 0 0 5px; + margin: 0 0 0 5px; vertical-align: top; position: relative; border: 1px solid #DDD; diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 67c938b8c..69bc56841 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -1,8 +1,5 @@ #channel-header { - padding: 3px 0; - height: 58px; - flex: 0 0 58px; - @include flex(0 0 50px); + @include flex(0 0 56px); } .row { &.header { @@ -45,9 +42,9 @@ text-overflow: ellipsis; margin-top: 2px; max-height: 45px; - .markdown-inline-img { - max-height: 45px - } + .markdown-inline-img { + max-height: 45px + } } &.popover { white-space: normal; @@ -97,7 +94,7 @@ .sidebar--left, .sidebar--menu { .team__header { position: relative; - padding: 10px; + padding: 9px 10px; @include legacy-pie-clearfix; &:before { @include single-transition(all, 0.05s, linear); @@ -125,7 +122,7 @@ .navbar-right { font-size: 0.85em; position: absolute; - top: 11px; + top: 10px; right: 22px; z-index: 5; .dropdown-toggle { @@ -217,7 +214,7 @@ width:100%; border-left: none; font-size: 14px; - line-height: 50px; + line-height: 56px; #member_popover { margin-right: 5px; width: 45px; @@ -296,17 +293,19 @@ .channel-header__links { height: 32px; - vertical-align: top; - display: inline-block; - width: 15px; - margin: 9px 6px 3px 0; - a { + width: 32px; + @include border-radius(50px); + border: 1px solid #ccc; + margin-right: 10px; + > a { + @include border-radius(50px); height: 100%; display: block; + @include single-transition(all, 0.1s, ease-in); } svg { vertical-align: top; - margin-top: 8px; + margin: 7px 0 0 0px; fill: inherit; } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 45b7b7f23..a08ebfaf1 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -332,18 +332,19 @@ body.ios { } .post-create-footer { @include clearfix; - padding: 0; + padding: 3px 0 0 0; + font-size: 13px; .has-error { .control-label { + height: 0; + display: block; font-weight: normal; margin-bottom: 0; } } .msg-typing { min-height: 25px; - line-height: 25px; display: block; - font-size: 13px; @include opacity(0.7); } } @@ -417,9 +418,6 @@ body.ios { } } } - .post-create-footer { - padding: 0; - } p { margin: 0 0 1em; line-height: 1.6em; @@ -552,6 +550,7 @@ body.ios { display: block; white-space: nowrap; text-overflow: ellipsis; + margin: 0 20px 0 50px; } } .post-header-col { diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index ba41d3b95..58ede5c65 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -1,4 +1,7 @@ .post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; .post-right-root-message { padding: 1em 1em 0; @@ -44,7 +47,7 @@ } .post-create-footer { width: 100%; - padding-top: 5px; + padding: 5px 0 10px; } .post-right-comments-upload-in-progress { padding: 6px 0; @@ -103,8 +106,9 @@ .post-right__scroll { position: relative; - overflow: scroll; + overflow: auto; -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); } .post-right-comment-time { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index cb140dce6..966ae5cd1 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -275,6 +275,11 @@ } } @media screen and (max-width: 768px) { + .textarea-wrapper { + .textbox-preview-link { + display: none; + } + } .form-control { &.min-height { min-height: 100px; @@ -503,17 +508,22 @@ .post-create__container { .post-right__container & { padding: 0 1em; + .msg-typing { + display: none; + } } form { - padding: 0; + padding: 0.5em 0; } .post-create-footer { + padding: 0 1em; .msg-typing { - margin-left: 45px; - width: 55%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + display: none; + } + .has-error { + .control-label { + height: auto; + } } } .post-create-body { @@ -542,8 +552,8 @@ } } .preview-container { - padding: 0px 10px; - margin-top: 20px; + padding: 0px; + margin-top: 5px; .preview-div { margin-top: 0; } @@ -616,7 +626,7 @@ } .search-bar__container { padding: 0; - height: 45px; + @include flex(0 0 44px); background: $primary-color; color: #fff; &.focused { @@ -745,6 +755,12 @@ .sidebar--right__close { display: none; } + .sidebar-right__body { + height: calc(100% - 44px); + } + } + .search-items-container { + height: calc(100% - 44px); } .inner__wrap { &.move--right { diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 73b69c866..bedf35376 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -1,8 +1,9 @@ #channel-header .search-bar__container { - padding: 8px 8px 8px 0; + padding: 0 8px 0 0; } .search-bar__container { - padding: 12px 8px 12px 0; + padding: 12px 8px 0 0; + @include flex(0 0 56px); } .search__clear { display: none; @@ -71,8 +72,10 @@ .search-items-container { position: relative; - overflow: scroll; + overflow: auto; -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + height: calc(100% - 56px); } .search-results-header { @@ -92,9 +95,11 @@ padding: 10px 1em; margin: 0; cursor: pointer; + &:first-child { border: none; } + .search-channel__name { font-weight: 600; margin: 0 0 10px 0; diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index ab13d1b42..eb7c1b83f 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -47,7 +47,7 @@ .nav-pills__container { height: 100%; position: relative; - overflow: scroll; + overflow: auto; -webkit-overflow-scrolling: touch; } diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss index 6f4a0cc38..e34cd72c1 100644 --- a/web/sass-files/sass/partials/_sidebar--menu.scss +++ b/web/sass-files/sass/partials/_sidebar--menu.scss @@ -57,8 +57,11 @@ color: inherit; line-height: 40px; padding: 0 15px; - .glyphicon { + .fa ,.glyphicon { width: 25px; + text-align: center; + left: -5px; + position: relative; } } } diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index a4267294c..2527eef28 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -3,24 +3,38 @@ width: 400px; height: 100%; right: 0px; - padding: 0 0 2em 0; + padding: 0; background: #fff; @include single-transition(transform, 0.5s, ease); right: -320px; + &.move--left { right: 0; } + + .sidebar--right__content { + height: 100%; + @include display-flex; + @include flex-direction(column); + } + .sidebar--right__back { - color: #666; - width: 20px; + color: inherit; + @include opacity(0.8); + width: 30px; text-align: center; - margin: 0 0 0 -6px; - font-size: 12px; + margin: 0 0 0 -14px; + font-size: 13px; display: inline-block; } .sidebar-right__body { + @include flex(1 1 auto); border-left: $border-gray; border-top: $border-gray; + @include display-flex; + @include flex-direction(column); + height: calc(100% - 56px); + @include border-radius(2px 0 0 0); } .post { .post-header { @@ -75,7 +89,7 @@ height: 44px; padding: 0 1em; line-height: 44px; - background: #F5F5F5; + @include flex(0 0 44px); border-bottom: $border-gray; } .sidebar--right__subheader { -- cgit v1.2.3-1-g7c22