diff --git a/config/config.json b/config/config.json
index 0fda6faaae..3250489d30 100644
--- a/config/config.json
+++ b/config/config.json
@@ -238,4 +238,4 @@
"TurnUsername": "",
"TurnSharedKey": ""
}
-}
+}
\ No newline at end of file
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 61cb103e3c..aa204add18 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 {
-
+
);
}
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index c8fd698b02..85fe8abdf0 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'
/>
-
+
);
}
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index b8aeeed2d1..a0edd716ea 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'
/>
-
+
);
}
diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss
index 91d325002e..39317358fc 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 96da542755..0cc20fd2f1 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 dae34d2fc1..6101849d5a 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 b8d54715a8..d862f46c8b 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1149,42 +1149,26 @@
}
@media screen and (max-width: 640px) {
- .post-list__table {
- .post-list__content {
- .dropdown-menu {
- &.bottom {
- bottom: auto;
- top: 30%;
- }
+ .app__body {
+ .post {
+ .open {
+ > .dropdown-menu__content {
+ display: table;
- bottom: auto;
- height: auto;
+ > .dropdown-menu {
+ display: table-cell;
+ }
+ }
+ }
+
+ .dropdown-menu__content {
+ height: 100%;
left: 0;
- margin-left: 25px;
position: fixed;
- top: 30%;
- width: calc(100% - 50px);
+ top: 0;
+ 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;
- }
- }
- }
-
&:before {
background: alpha-color($black, .3);
content: '';
@@ -1195,10 +1179,45 @@
width: 100%;
}
}
- }
- }
- .app__body {
+ .dropdown-menu {
+ &.bottom {
+ bottom: auto;
+ top: 0;
+ }
+
+ background: transparent;
+ border: none;
+ bottom: auto;
+ box-shadow: none;
+ float: none;
+ height: 100%;
+ left: 0;
+ margin: 0;
+ padding: 0 2em;
+ position: relative;
+ top: 0;
+ vertical-align: middle;
+ width: 100%;
+ z-index: 9999;
+
+ > li {
+ &:last-child {
+ a {
+ border: none;
+ }
+ }
+ }
+
+ a {
+ border-bottom: 1px solid;
+ line-height: 50px;
+ position: relative;
+ text-align: center;
+ }
+ }
+ }
+
.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 60df87d2a4..a1a49b1fa6 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);