diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/new_channel_modal.jsx | 1 | ||||
-rw-r--r-- | webapp/components/sidebar_right_menu.jsx | 1 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 2 | ||||
-rw-r--r-- | webapp/sass/components/_scrollbar.scss | 16 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 132 | ||||
-rw-r--r-- | webapp/sass/routes/_admin-console.scss | 2 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 7 |
7 files changed, 115 insertions, 46 deletions
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx index 6ca8911c5..fa52c56a7 100644 --- a/webapp/components/new_channel_modal.jsx +++ b/webapp/components/new_channel_modal.jsx @@ -206,6 +206,7 @@ class NewChannelModal extends React.Component { return ( <span> <Modal + dialogClassName='new-channel__modal' show={this.props.show} bsSize='large' onHide={this.props.onModalDismissed} diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index 86026967a..f201adfcf 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -68,6 +68,7 @@ export default class SidebarRightMenu extends React.Component { getFlagged(e) { e.preventDefault(); getFlaggedPosts(); + this.hideSidebars(); } componentDidMount() { diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index f89fb5c40..beb9ee8a1 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -612,7 +612,7 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; - min-height: 50px; + min-height: 70px; padding: 8px 15px; } diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss index a4df8230d..66b476166 100644 --- a/webapp/sass/components/_scrollbar.scss +++ b/webapp/sass/components/_scrollbar.scss @@ -15,13 +15,15 @@ } body { - scrollbar-3dlight-color: #7D7E94; - scrollbar-arrow-color: #C1C1D1; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-face-color: rgba(0, 0, 0, .1); - scrollbar-highlight-color: #7D7E94; - scrollbar-shadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, .1); + &.app__body { + scrollbar-3dlight-color: #7D7E94; + scrollbar-arrow-color: #C1C1D1; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-face-color: rgba(0, 0, 0, .1); + scrollbar-highlight-color: #7D7E94; + scrollbar-shadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, .1); + } } .scrollbar--horizontal, diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 00f89ff15..0f7ac0eb4 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,23 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .modal { + .modal-dialog { + &.new-channel__modal { + position: fixed; + @include translate3d(0, 100%, 0); + } + } + + &.in { + .modal-dialog { + &.new-channel__modal { + @include translate3d(0, 0, 0); + } + } + } + } + .webrtc__notification--rhs { left: auto; right: 0; @@ -17,15 +34,21 @@ } #header-popover { + @include single-transition(all, .35s, ease); + @include translate3d(0, 100%, 0); @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: 100%; + height: calc(100% - 45px); max-width: 100%; position: fixed; top: 47px; width: 100%; + &.in { + @include translate3d(0, 0, 0); + } + .arrow { display: none; } @@ -37,23 +60,23 @@ } .close { - font-family: 'Open Sans', sans-serif; - display: block; - position: fixed; + @include border-radius(50%); + border: 1px solid $white; bottom: 25px; + color: $white; + display: block; + font-family: 'Open Sans', sans-serif; + font-size: 23px; + font-weight: 200; height: 30px; - width: 30px; - margin-left: -15px; left: 50%; - font-size: 23px; line-height: 27px; - border-radius: 50%; - border: 1px solid $white; - text-align: center; + margin-left: -15px; opacity: 1; + position: fixed; + text-align: center; text-shadow: none; - color: white; - font-weight: 200; + width: 30px; } } @@ -743,34 +766,47 @@ white-space: nowrap; } + .dropdown { + &.open { + .dropdown-menu { + @include translate3d(0, 0, 0); + visibility: visible; + } + } + } + .dropdown-menu { + @include single-transition(all, .35s, ease); + @include translate3d(0, 100%, 0); background: alpha-color($black, .9); - height: 100%; + display: block; + height: calc(100% - 45px); left: 0; overflow: auto; - padding: 1.4em 0 140px; + padding: 1.4em 0 0; position: fixed; top: 42px; + visibility: hidden; width: 100%; .close { - font-family: 'Open Sans', sans-serif; - display: block; - position: fixed; + @include border-radius(50%); + border: 1px solid $white; bottom: 25px; + color: $white; + display: block; + font-family: 'Open Sans', sans-serif; + font-size: 23px; + font-weight: 200; height: 30px; - width: 30px; - margin-left: -15px; left: 50%; - font-size: 23px; line-height: 27px; - border-radius: 50%; - border: 1px solid $white; - text-align: center; + margin-left: -15px; opacity: 1; + position: fixed; + text-align: center; text-shadow: none; - color: white; - font-weight: 200; + width: 30px; } > li { @@ -1056,7 +1092,7 @@ } &.move--right { - @include translate3d(290px, 0, 0); + @include translate3d(0, 0, 0); &:before { @include single-transition(all, .35s, ease); @@ -1281,11 +1317,7 @@ } .post__header { - .col__name { - .user-popover { - max-width: 100%; - } - } + padding-right: 50px; } } } @@ -1394,7 +1426,7 @@ .inner-wrap { &.move--right { - @include translate3d(260px, 0, 0); + @include translate3d(0, 0, 0); } } @@ -1415,26 +1447,41 @@ } @media screen and (max-width: 320px) { + .post { + .post__header { + .col__name { + .user-popover { + max-width: 105px; + } + } + } + } + .tutorial-steps__container { .tutorial__content { .tutorial__steps { padding: 0 20px; width: 100%; + h1 { font-size: 35px; margin: -5px 0 20px; } + h3 { margin-bottom: 10px; } + .tutorial__app-icons { margin: 10px 0; } + .tutorial__circles { - margin: 0 0 15px; bottom: 60px; + margin: 0 0 15px; position: absolute; } + .tutorial__footer { bottom: 30px; position: absolute; @@ -1450,13 +1497,30 @@ } } +@media screen and (max-width: 320px) and (max-height: 560px) { + #navbar { + .navbar-default { + .dropdown-menu { + padding-top: 1em; + + > li { + > a { + border: none; + line-height: 28px; + } + } + } + } + } +} + // on iOS, allow clicks within an input's label to actually propagate through to the input itself // http://stackoverflow.com/a/34810294/6325807 label span { pointer-events: none; } -@media screen and (-webkit-min-device-pixel-ratio:0) { +@media screen and (-webkit-min-device-pixel-ratio: 0) { select, textarea, input { diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index aa90a7eaf..5cec54e6b 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -61,7 +61,7 @@ .log__panel { background-color: white; border: 1px solid #ddd; - height: 800px; + height: calc(100vh - 200px); margin-top: 10px; overflow: scroll; padding: 5px; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 248fabd9a..5c2823f41 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -611,13 +611,14 @@ export function applyTheme(theme) { changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); - changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .suggestion--selected, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); + changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); + changeCss('.app__body .suggestion--selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;'); changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor); changeCss('.app__body .search-help-popover .search-autocomplete__item:hover, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); - changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4)); + changeCss('body.app__body ::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1); changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor); changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor); changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5)); @@ -686,7 +687,7 @@ export function applyFont(fontName) { } export function changeCss(className, classValue) { - let styleEl = document.querySelector('style[data-class="' + className + '"]'); + let styleEl = document.querySelector('style[data-class="' + className + classValue + '"]'); if (!styleEl) { styleEl = document.createElement('style'); styleEl.setAttribute('data-class', className); |