diff options
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r-- | web/sass-files/sass/partials/_content.scss | 1 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_files.scss | 8 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_forms.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 31 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 68 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post_right.scss | 17 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 152 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 11 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--left.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--menu.scss | 5 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--right.scss | 26 |
11 files changed, 211 insertions, 114 deletions
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/_forms.scss b/web/sass-files/sass/partials/_forms.scss index 2d7b6cd26..685677ad0 100644 --- a/web/sass-files/sass/partials/_forms.scss +++ b/web/sass-files/sass/partials/_forms.scss @@ -43,3 +43,7 @@ margin: 10px 0 0; color: #999; } + +.disabled-input { + background-color: #dddddd !important; +} 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..fad6f5074 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -47,20 +47,25 @@ body.ios { .textarea-wrapper { position:relative; - .textbox-preview-area { - position: absolute; - z-index: 2; - top: 0; - left: 0; - box-shadow: none; - } - .textbox-preview-link { - position: absolute; - z-index: 3; - bottom: -23px; - right: 0; + .textbox-preview-area { + position: absolute; + z-index: 2; + top: 0; + left: 0; + box-shadow: none; + } + .textbox-preview-link, .textbox-help-link { + position: absolute; + z-index: 3; + bottom: -23px; font-size: 13px; - cursor: pointer; + cursor: pointer; + } + .textbox-preview-link { + right: 45px; + } + .textbox-help-link { + right: 0; } min-height:36px; } @@ -332,18 +337,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); } } @@ -392,6 +398,15 @@ body.ios { .post-body { @include border-radius(0 4px 4px 0); } + .post-body { + border-left: 4px solid #EEE; + width: 570px; + margin-left: 30px; + padding-left: 10px; + .post-link { + display: none; + } + } } } &.same--root { @@ -407,19 +422,15 @@ body.ios { .post__content { padding: 0; } - .post-body { - border-left: 4px solid #EEE; - width: 570px; - margin-left: 30px; - padding-left: 10px; - .post-link { - display: none; + &.same--user { + .post__content { + padding-left: 46px; + } + .post-header-post { + visibility: hidden; } } } - .post-create-footer { - padding: 0; - } p { margin: 0 0 1em; line-height: 1.6em; @@ -545,13 +556,14 @@ body.ios { } &.post-info { .post-profile-time { - color: #a8adb7; vertical-align: top; + width: 150px; max-width: 220px; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; + margin: 0 0 0 50px; } } .post-header-col { @@ -577,7 +589,7 @@ body.ios { } } .post-profile-time { - color: #a8adb7; + @include opacity(0.5); } } .post-comment { diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index ba41d3b95..54c3bcdf8 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; @@ -19,6 +22,15 @@ margin: 1em 0 0 0; } } + .post-header { + .post-profile-time { + width: 200px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } } .post-create__container { @@ -44,7 +56,7 @@ } .post-create-footer { width: 100%; - padding-top: 5px; + padding: 5px 0 10px; } .post-right-comments-upload-in-progress { padding: 6px 0; @@ -103,8 +115,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 37626e303..aad991035 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -9,25 +9,26 @@ } } .post { - &.same--root { - margin-left: 60px; - padding-left: 10px; - border-left: 4px solid #EEE; - div.post-profile-img__container { - .post-profile-img { - display: none; - } - } - .post__content { - width: 825px; - } - .post-body { - width: 736px; - border: none; - margin: 3px 0 0; - } - } &.post--comment { + &.same--root { + margin-left: 104px; + padding-left: 10px; + border-left: 4px solid #EEE; + div.post-profile-img__container { + .post-profile-img { + display: none; + } + } + .post__content { + width: 825px; + margin-left: 0; + } + .post-body { + width: 736px; + border: none; + margin: 3px 0 0; + } + } &.other--root { .post-comment { margin-left: 0; @@ -105,34 +106,61 @@ } } .post { - &.same--root { - margin-left: 60px; - padding-left: 10px; - border-left: 4px solid #EEE; - div.post-profile-img__container { - .post-profile-img { - display: none; - } - } - .post__content { - width: 825px; - } - .post-body { - width: 736px; - border: none; - margin: 3px 0 0; - } - } + &.same--root.same--user { + .post-header-post { + visibility: hidden; + width: 100%; + position: relative; + top: -5px; + .post-header-col.post-header__name { + display: none; + } + } + .post-body { + top: -15px; + margin-bottom: -10px; + } + &:hover .post-header-post { + visibility: visible; + } + } + &.post--comment { &.other--root { .post-comment { margin-left: 0; } } - &.same--root { - margin-top: 5px; - margin-bottom: 5px; - } + &.same--root { + margin-top: 5px; + margin-bottom: 5px; + margin-left: 104px; + padding-left: 10px; + border-left: 4px solid #EEE; + div.post-profile-img__container { + .post-profile-img { + display: none; + } + } + .post-body { + margin-left: 0; + border-left: 0; + } + &.same--user { + .post__content { + margin-left: 0; + padding-left: 0; + } + } + } + .post__content { + width: 810px; + } + .post-body { + width: 736px; + border: none; + margin: 3px 0 0; + } } .post__content { width: 880px; @@ -275,6 +303,11 @@ } } @media screen and (max-width: 768px) { + .textarea-wrapper { + .textbox-preview-link { + display: none; + } + } .form-control { &.min-height { min-height: 100px; @@ -353,9 +386,6 @@ } } .post { - &.same--root { - margin-left: 25px; - } &:hover { background: none; .post-header .post-header-col.post-header__reply { @@ -365,7 +395,11 @@ } } &.post--comment { + &.same--root { + margin-left: 25px; + } &.other--root { + margin-left: 0; &:hover { background: none; } @@ -376,6 +410,9 @@ content: '...'; } } + &.same--root.same--user .post__content{ + padding-left: 0; + } } .signup-team__container { padding: 30px 0; @@ -503,17 +540,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 +584,8 @@ } } .preview-container { - padding: 0px 10px; - margin-top: 20px; + padding: 0px; + margin-top: 5px; .preview-div { margin-top: 0; } @@ -616,7 +658,7 @@ } .search-bar__container { padding: 0; - height: 45px; + @include flex(0 0 44px); background: $primary-color; color: #fff; &.focused { @@ -745,6 +787,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 { |