diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/post_view/components/post_info.jsx | 15 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 14 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 14 | ||||
-rw-r--r-- | webapp/sass/components/_dropdown.scss | 17 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 1 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 89 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 9 |
8 files changed, 96 insertions, 64 deletions
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 61cb103e3..aa204add1 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -167,6 +167,7 @@ export default class PostInfo extends React.Component { <li key='editPost' role='presentation' + className='dropdown-submenu' > <a href='#' @@ -205,12 +206,14 @@ export default class PostInfo extends React.Component { aria-expanded='false' onClick={this.handleDropdownClick} /> - <ul - className='dropdown-menu' - role='menu' - > - {dropdownContents} - </ul> + <div className='dropdown-menu__content'> + <ul + className='dropdown-menu' + role='menu' + > + {dropdownContents} + </ul> + </div> </div> ); } diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index c8fd698b0..85fe8abdf 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -226,12 +226,14 @@ export default class RhsComment extends React.Component { data-toggle='dropdown' aria-expanded='false' /> - <ul - className='dropdown-menu' - role='menu' - > - {dropdownContents} - </ul> + <div className='dropdown-menu__content'> + <ul + className='dropdown-menu' + role='menu' + > + {dropdownContents} + </ul> + </div> </div> ); } diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index b8aeeed2d..a0edd716e 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -236,12 +236,14 @@ export default class RhsRootPost extends React.Component { data-toggle='dropdown' aria-expanded='false' /> - <ul - className='dropdown-menu' - role='menu' - > - {dropdownContents} - </ul> + <div className='dropdown-menu__content'> + <ul + className='dropdown-menu' + role='menu' + > + {dropdownContents} + </ul> + </div> </div> ); } diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss index 91d325002..39317358f 100644 --- a/webapp/sass/components/_dropdown.scss +++ b/webapp/sass/components/_dropdown.scss @@ -17,8 +17,9 @@ @include opacity(.15); } - > li > a { + div > a { color: inherit; + text-decoration: none; &:focus, &:hover { @@ -26,3 +27,17 @@ } } } + +.open { + > .dropdown-menu__content { + display: block; + + > .dropdown-menu { + display: block; + } + } +} + +.dropdown-menu__content { + display: none; +} diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 96da54275..0cc20fd2f 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -590,6 +590,7 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; + min-height: 65px; padding: 8px 15px; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index dae34d2fc..6101849d5 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -117,6 +117,7 @@ > a { border-radius: 0; line-height: 1.5; + outline: none; overflow: hidden; padding: 3px 10px 3px 25px; text-overflow: ellipsis; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index b8d54715a..d862f46c8 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1149,35 +1149,59 @@ } @media screen and (max-width: 640px) { - .post-list__table { - .post-list__content { + .app__body { + .post { + .open { + > .dropdown-menu__content { + display: table; + + > .dropdown-menu { + display: table-cell; + } + } + } + + .dropdown-menu__content { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 9999; + + &:before { + background: alpha-color($black, .3); + content: ''; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + } + } + .dropdown-menu { &.bottom { bottom: auto; - top: 30%; + top: 0; } + background: transparent; + border: none; bottom: auto; - height: auto; + box-shadow: none; + float: none; + height: 100%; left: 0; - margin-left: 25px; - position: fixed; - top: 30%; - width: calc(100% - 50px); + margin: 0; + padding: 0 2em; + position: relative; + top: 0; + vertical-align: middle; + width: 100%; z-index: 9999; > li { - > a { - border-bottom: 1px solid; - line-height: 50px; - position: relative; - text-align: center; - - &:hover { - background: transparent; - } - } - &:last-child { a { border: none; @@ -1185,20 +1209,15 @@ } } - &:before { - background: alpha-color($black, .3); - content: ''; - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; + a { + border-bottom: 1px solid; + line-height: 50px; + position: relative; + text-align: center; } } } - } - .app__body { .modal { overflow: hidden; padding: 0 !important; @@ -1398,18 +1417,6 @@ min-height: 440px; } } - - .post-list__table { - .post-list__content { - .dropdown-menu { - &.bottom { - top: 25%; - } - - top: 25%; - } - } - } } // on iOS, allow clicks within an input's label to actually propagate through to the input itself diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 60df87d2a..a1a49b1fa 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -484,7 +484,7 @@ export function applyTheme(theme) { } if (theme.sidebarTextHoverBg) { - changeCss('.app__body .sidebar--left .nav-pills__container li>a:hover, .app__body .sidebar--left .nav-pills__container li>a:focus, .app__body .modal .settings-modal .nav-pills>li:hover a, .app__body .modal .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('.app__body .sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } @@ -545,7 +545,7 @@ export function applyTheme(theme) { if (theme.centerChannelBg) { changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1); - changeCss('#post-list .post-list-holder-by-time, .app__body .post-list__table .post-list__content .dropdown-menu a', 'background:' + theme.centerChannelBg, 1); + changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .post-image__details, .app__body .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); @@ -566,7 +566,7 @@ export function applyTheme(theme) { changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor, 1); changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); - changeCss('.app__body .post-list__table .post-list__content .dropdown-menu a, .app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .post .dropdown-menu a, .app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); @@ -597,6 +597,7 @@ export function applyTheme(theme) { changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor, 2); changeCss('.app__body .input-group-addon, .app__body .search-bar__container .search__form, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); @@ -610,7 +611,7 @@ export function applyTheme(theme) { changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('.app__body .post:hover, .app__body .post.post--hovered, .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), 1); 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), 1); - changeCss('.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), 1); + 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), 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), 1); changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor, 2); |