diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-15 14:05:05 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-15 14:05:05 -0400 |
commit | 3745204097b2f03cd5f3fc1292ea62fb4f931232 (patch) | |
tree | 3380ee0fd2341dac1814aed8cf851bfe274a21a7 /web/sass-files/sass/responsive | |
parent | bf7ae0711743926cfbb031675cc3320d7a942465 (diff) | |
parent | 7d79a916dd58d51989d35721060cfca6dce1baca (diff) | |
download | chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.gz chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.bz2 chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.zip |
Merge pull request #2429 from asaadmahmoodspin/ui-improvements
PLT-963 - Improving scss structure
Diffstat (limited to 'web/sass-files/sass/responsive')
-rw-r--r-- | web/sass-files/sass/responsive/_desktop.scss | 65 | ||||
-rw-r--r-- | web/sass-files/sass/responsive/_mobile.scss | 901 | ||||
-rw-r--r-- | web/sass-files/sass/responsive/_module.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/responsive/_tablet.scss | 35 |
4 files changed, 1005 insertions, 0 deletions
diff --git a/web/sass-files/sass/responsive/_desktop.scss b/web/sass-files/sass/responsive/_desktop.scss new file mode 100644 index 000000000..dcabb807f --- /dev/null +++ b/web/sass-files/sass/responsive/_desktop.scss @@ -0,0 +1,65 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 1800px) { + .inner-wrap { + &.move--left { + .date-separator, + .new-separator { + &.hovered--comment { + &:before, + &:after { + background: none; + } + } + } + } + } +} + +@media screen and (max-width: 1440px) { + .date-separator, + .new-separator { + &.hovered--comment { + &:before, + &:after { + background: none !important; + } + } + } +} + +@media screen and (max-width: 1140px) { + .tip-overlay { + &.tip-overlay--chat { + margin: -10px 0 0 -10px; + .arrow { + right: 15px; + left: auto; + } + } + } + .inner-wrap { + &.move--left { + .file-overlay { + font-size: em(18px); + + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + } + } +} + +@media (min-width: 992px) { + .modal-lg { + width: 700px; + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/responsive/_mobile.scss b/web/sass-files/sass/responsive/_mobile.scss new file mode 100644 index 000000000..a452cb420 --- /dev/null +++ b/web/sass-files/sass/responsive/_mobile.scss @@ -0,0 +1,901 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 768px) { + .signup-team__container { + font-size: 1em; + } + + .date-separator.hovered--before:after, + .date-separator.hovered--after:before, + .new-separator.hovered--after:before, + .new-separator.hovered--before:after { + background: none !important; + } + + .post { + .post__dropdown { + line-height: 9px; + text-decoration: none; + width: 20px; + display: inline-block; + text-align: center; + height: 20px; + + &:after { + font-size: 20px; + content: '...'; + top: -3px; + } + } + + .comment-icon__container { + visibility: visible; + display: none; + + &.icon--show { + display: inline-block; + } + } + + .post-list__content & { + &:hover { + background: transparent; + } + + .comment-icon__container { + visibility: visible; + } + } + + .dropdown, + .post__reply { + visibility: visible; + } + + .post__body { + width: calc(100% - 75px); + } + + .post__reply { + margin-right: 20px; + float: right; + + svg { + top: 1px; + } + } + + &.other--root .post__reply { + &.post__reply--hide { + visibility: hidden; + } + } + + .post__header { + .col__reply { + width: 65px; + } + + .col__name { + pointer-events: none; + + .user-popover { + max-width: 130px; + } + } + } + + &.same--root { + &.same--user { + .post__time { + display: none; + } + } + } + + .post__img { + width: 40px; + + img { + width: 32px; + height: 32px; + } + } + } + + .post-image__column { + width: 200px; + height: 95px; + } + + .textarea-wrapper { + .textbox-preview-link, + .textbox-help-link { + display: none; + } + } + .form-control { + &.min-height { + min-height: 100px; + } + } + + .img-div { + max-width: 100%; + } + + .tip-div { + left: 15px; + right: auto; + } + + .tip-overlay { + &.tip-overlay--chat { + margin-left: 10px; + .arrow { + left: 32px; + } + } + } + + .file-details__container { + display: block; + + .file-details__preview { + display: block; + width: 100%; + height: 150px; + border-right: none; + border-bottom: 1px solid #ddd; + img { + width: 64px; + height: 64px; + } + } + + .file-details { + width: 100%; + height: auto; + } + } + + .search-help-popover.visible { + visibility: hidden; + } + + .modal-direct-channels { + .member-count { + float: none; + margin-top: 10px; + display: block; + } + } + + .file-overlay { + font-size: em(18px); + + &.center-file-overlay { + .overlay__indent { + margin-left: 0; + } + } + + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + + .date-separator, + .new-separator { + &.hovered--after { + &:before { + background: none; + } + } + + &.hovered--before { + &:after { + background: none; + } + } + } + + .post-list__timestamp { + display: block; + } + + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: .9em; + + .signup-team__name { + font-size: 2em; + } + + .btn.btn-full { + padding-left: 10px; + } + + .btn { + .icon, + .fa { + margin-right: 6px; + } + } + } + + .row--invite { + .col-sm-6 { + padding: 0; + } + } + + .modal { + .info__label { + text-align: left; + padding-bottom: 5px; + } + + .modal-header { + .modal-action { + margin-top: 10px; + } + + button.close { + font-weight: normal; + font-size: 27px; + } + + .modal-title { + float: none; + max-width: 90%; + } + + .btn { + &.btn-primary { + display: block; + margin: 10px 0 6px; + width: 100%; + float: none; + } + } + } + + .settings-modal { + &.display--content { + .modal-header { + display: none; + } + + .settings-table { + display: block; + + .settings-content { + &.minimize-settings { + display: block; + } + + .section-min:hover { + background: none; + } + + .no-padding--left { + padding-left: 15px; + } + } + + .settings-links { + display: none; + } + + .modal-header { + display: block; + position: absolute; + top: 0; + width: 100%; + z-index: 5; + + .modal-title { + width: 100%; + text-align: center; + } + } + + .user-settings { + .tab-header { + display: none; + } + + .divider-dark.first { + display: none; + } + } + } + } + + .settings-table { + padding: 0; + .nav { + position: relative; + top: auto; + width: 100%; + + &.position--top { + top: auto; + } + } + + .settings-content { + .section-edit { + position: absolute; + top: 14px; + right: 0; + padding-right: 0; + .fa { + display: inline-block; + } + } + + &.minimize-settings { + padding: 0; + display: none; + .user-settings { + padding: 70px 20px 30px; + } + } + + .section-min:hover { + background: none !important; + } + } + + .nav { + > li { + > a { + border-top: 1px solid #ddd; + font-size: 1.1em; + line-height: 2.7; + color: #555; + + .glyphicon { + margin-left: 7px; + } + } + } + } + } + } + } + + .post-create__container { + .post-right__container & { + padding: 0 1em; + + .msg-typing { + display: none; + } + } + + form { + padding: .5em 0; + } + + .post-create-footer { + padding: 0 1em; + + .msg-typing { + display: none; + } + + .control-label { + top: 0; + } + } + + .post-create-body { + display: table; + width: 100%; + + .post-body__cell { + display: table-cell; + padding-left: 45px; + .sidebar--right & { + padding-left: 0; + } + } + + .app__content & { + .btn-file { + width: 45px; + padding: 0; + line-height: 36px; + bottom: -2px; + left: 0; + top: auto; + } + } + + .send-button { + display: table-cell; + } + } + } + + .file-preview__container { + margin: 5px 0 0; + } + + .file-preview { + margin-top: 0; + } + + .file-preview__remove { + width: 28px; + height: 28px; + left: auto; + right: 0; + top: 0; + background: #444; + background: rgba(#000, .5); + text-align: center; + + &:after { + display: none; + } + + i { + line-height: 29px; + top: auto; + right: auto; + position: relative; + font-size: 16px; + } + } + + #navbar { + .navbar-default { + .navbar-header { + float: none; + margin: 0 -15px; + + .dropdown__icon { + background: url('../images/dropdown-icon.png'); + width: 4px; + height: 16px; + @include background-size(100% 100%); + display: inline-block; + } + } + + .navbar-toggle { + display: block; + } + + .navbar-brand { + white-space: nowrap; + } + } + } + + body { + &.white { + .inner-wrap { + > .row.content { + margin-bottom: -185px; + } + } + } + } + + .footer, + .footer-pane, + .footer-push { + height: 187px; + } + + .footer-pane { + .footer-link { + padding: 0; + width: 100%; + text-align: right; + line-height: 1.7; + &.copyright { + width: 100%; + } + } + } + + .search__clear { + display: block; + } + + .search-bar__container { + padding: 0; + @include flex(0 0 44px); + background: $color--primary; + color: #fff; + + &.focused { + .sidebar__collapse { + @include translateX(-45px); + } + + .search__form { + @include translateX(-45px); + padding-left: 55px; + padding-right: 24px; + } + + .search__clear { + @include translateX(0px); + } + } + .search__form { + border: none; + @include translateX(0px); + padding: 7px 20px 0 49px; + height: 45px; + position: relative; + @include single-transition(all, .2s, linear); + + .glyphicon-refresh-animate { + right: 33px; + top: 15px; + color: #fff; + color: rgba(255,255,255,.5); + } + + .form-control { + border: none; + padding: 0 10px 0 31px; + background: rgba(black, .2); + @include border-radius(3px); + color: #444; + background: #fff; + } + } + } + .sidebar--menu { + @include single-transition(transform, .5s, ease); + @include translate3d(290px, 0, 0); + width: 290px; + border: none; + display: block; + + &.move--left { + @include translate3d(0, 0, 0); + } + } + + .sidebar--left { + @include single-transition(transform, .5s, ease); + @include translate3d(-290px, 0, 0); + width: 290px; + border: none; + &.sidebar--padded { + padding-top: 0; + } + + &.move--right { + @include translate3d(0, 0, 0); + } + + > div { + padding-bottom: 70px; + } + + .nav-pills__unread-indicator-bottom { + bottom: 10px; + } + + .badge { + top: 13px; + } + + .team__header { + @include clearfix; + pointer-events: none; + + .user__name { + display: none; + } + + .team__name { + margin: 10px 0; + } + + .navbar-right { + display: none; + } + } + + .search__form { + display: block; + } + + .nav { + li { + &.dropdown.open { + padding-bottom: 25px; + + ul { + clear: both; + background: #fff; + border-radius: 3px; + top: 5px; + position: relative; + + li { + a { + line-height: 30px; + } + } + } + } + + h4 { + margin: 16px 0 8px; + } + + > a { + font-size: 15px; + margin: 0; + line-height: 2.5; + + &:hover, + &:focus { + background: transparent; + } + + &.has-close { + .btn-close { + width: 40px; + text-align: center; + right: 0; + display: block; + @include opacity(.5); + } + } + } + } + } + } + + .sidebar--right { + width: 100%; + right: 0; + @include translate3d(100%, 0, 0); + z-index: 5; + + &.move--left { + @include translate3d(0, 0, 0); + } + + .sidebar__collapse, + .sidebar__search-icon { + display: block; + } + + .sidebar--right__close { + display: none; + } + + .sidebar-right__body { + height: calc(100% - 44px); + } + } + + .search-items-container { + height: calc(100% - 44px); + } + + .inner-wrap { + @include single-transition(all, .5s, ease); + + &.move--right { + @include translate3d(290px, 0, 0); + + &:before { + z-index: 9999; + content: ''; + width: 100%; + height: 100%; + left: -15px; + top: 0; + position: absolute; + background: rgba(0, 0, 0, .4); + } + } + + &.move--left-small { + @include translate3d(-290px, 0, 0); + &:before { + z-index: 9999; + content: ''; + width: 100%; + height: 100%; + right: -15px; + top: 0; + position: absolute; + background: rgba(0, 0, 0, .4); + } + } + + &.move--left { + margin: 0; + @include translate3d(-100%, 0, 0); + } + } + + .modal { + .modal-image { + .image-wrapper { + > div { + font-size: 12px; + min-width: 250px; + } + + .modal-close { + @include opacity(1); + } + } + + .modal-button-bar { + @include opacity(1); + } + } + } + + .app__content { + padding-top: 45px; + margin: 0; + .channel__wrap & { + padding-top: 45px; + } + #channel-header { + display: none; + } + } + + .channel__wrap { + .row { + &.header { + display: block; + } + } + } + + .post-comments { + padding: 9px 21px 10px 10px !important; + } + + .post-image__column .post-image .file-playback__controls.stop, + .image-wrapper > a .file-playback__controls.stop { + @include opacity(1); + } +} + +@media screen and (max-width: 640px) { + .access-history__table { + > div { + display: block; + } + + .access__report { + margin: 0 0 15px 15px; + } + + .access__date { + div { + margin-bottom: 15px; + } + } + } + .activity-log__table { + > div { + display: block; + } + + .activity-log__report { + width: 100%; + } + + .activity-log__action { + text-align: left; + margin-top: 10px; + } + } +} + +@media screen and (max-width: 480px) { + .modal { + .settings-modal { + .settings-table { + .security-links { + margin-bottom: 10px; + display: block; + + &:last-child { + margin-bottom: 0; + } + } + } + } + } + + .tip-overlay.tip-overlay--sidebar { + min-height: 350px; + } + + .modal { + .modal-body { + max-height: 70%; + } + + .settings-modal { + &.display--content { + .modal-body { + max-height: 90%; + } + } + } + } + + .member-div { + padding: 8px 0; + + .member-drop, + .member-role { + position: relative; + margin: 0px 0 0 44px; + padding: 5px 0; + top: 0; + right: 0; + } + + .open > .dropdown-menu { + left: 0; + right: auto; + } + } + + .sidebar--left { + @include translate3d(-260px, 0, 0); + width: 260px; + } + + .inner-wrap { + &.move--right { + @include translate3d(260px, 0, 0); + } + } + + .modal { + .modal-image { + .modal-button-bar { + line-height: 30px; + padding: 5px; + } + } + } +} + +@media screen and (max-height: 640px) { + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: .9em; + + .signup-team__name { + font-size: 2em; + } + } +} diff --git a/web/sass-files/sass/responsive/_module.scss b/web/sass-files/sass/responsive/_module.scss new file mode 100644 index 000000000..a799c145e --- /dev/null +++ b/web/sass-files/sass/responsive/_module.scss @@ -0,0 +1,4 @@ +@charset 'UTF-8'; +@import 'desktop'; +@import 'tablet'; +@import 'mobile'; diff --git a/web/sass-files/sass/responsive/_tablet.scss b/web/sass-files/sass/responsive/_tablet.scss new file mode 100644 index 000000000..14641cfa5 --- /dev/null +++ b/web/sass-files/sass/responsive/_tablet.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +@media screen and (max-width: 960px) { + .sidebar--right { + z-index: 5; + @include translateX(100%); + @include single-transition(all, .5s, ease); + + &.move--left { + @include translateX(0); + + .search-bar__container { + padding-right: 8px; + } + } + } + + .inner-wrap { + &.move--left { + margin-right: 0; + + .channel-header__links { + position: relative; + right: auto; + top: auto; + } + } + } +} + +@media screen and (min-width: 768px) { + .second-bar { + display: none; + } +}
\ No newline at end of file |