From 9ae451025463bac291f78cd53d20b83bf0b81892 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 14 Jul 2016 15:16:44 +0200 Subject: [PATCH] Fixed mobile menus --- .../install/files/js/WoltLab/WCF/Ui/Mobile.js | 42 +++- .../style/bootstrap/mixin/dropdownMenu.scss | 183 ++++++++++++++++++ .../files/style/layout/containerList.scss | 2 +- wcfsetup/install/files/style/ui/dropdown.scss | 182 +---------------- wcfsetup/install/files/style/ui/message.scss | 35 +++- 5 files changed, 254 insertions(+), 190 deletions(-) create mode 100644 wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js index 5863867684..0b2c0d4518 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js @@ -7,14 +7,16 @@ * @module WoltLab/WCF/Ui/Mobile */ define( - [ 'Core', 'Environment', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'], - function(Core, Environment, EventHandler, Language, DomChangeListener, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser) + [ 'Core', 'Environment', 'EventHandler', 'Language', 'List', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'], + function(Core, Environment, EventHandler, Language, List, DomChangeListener, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser) { "use strict"; - var _buttonGroupNavigations = null; + var _buttonGroupNavigations = elByClass('buttonGroupNavigation'); var _enabled = false; + var _knownMessages = new List(); var _main = null; + var _messages = elByClass('message'); var _options = {}; var _pageMenuMain = null; var _pageMenuUser = null; @@ -33,7 +35,6 @@ define( enableMobileMenu: true }, options); - _buttonGroupNavigations = elByClass('buttonGroupNavigation'); _main = elById('main'); if (Environment.touch()) { @@ -76,8 +77,11 @@ define( }, _init: function() { + _enabled = true; + this._initSearchBar(); this._initButtonGroupNavigation(); + this._initMessages(); this._initMobileMenu(); UiCloseOverlay.add('WoltLab/WCF/Ui/Mobile', this._closeAllMenus.bind(this)); @@ -135,6 +139,34 @@ define( } }, + _initMessages: function() { + Array.prototype.forEach.call(_messages, function(message) { + if (_knownMessages.has(message)) { + return; + } + + var navigation = elBySel('.jsMobileNavigation', message); + var quickOptions = elBySel('.messageQuickOptions', message); + + if (quickOptions) { + quickOptions.addEventListener(WCF_CLICK_EVENT, function (event) { + if (_enabled) { + event.preventDefault(); + event.stopPropagation(); + + navigation.classList.toggle('open'); + } + }); + + navigation.addEventListener(WCF_CLICK_EVENT, function(event) { + event.stopPropagation(); + }); + } + + _knownMessages.add(message); + }); + }, + _initMobileMenu: function() { if (_options.enableMobileMenu) { _pageMenuMain = new UiPageMenuMain(); @@ -155,7 +187,7 @@ define( }, _closeAllMenus: function() { - elBySelAll('.jsMobileButtonGroupNavigation.open, .boxMenu.open', null, function (menu) { + elBySelAll('.jsMobileButtonGroupNavigation.open, .jsMobileNavigation.open, .boxMenu.open', null, function (menu) { menu.classList.remove('open'); }); } diff --git a/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss b/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss new file mode 100644 index 0000000000..144316d33a --- /dev/null +++ b/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss @@ -0,0 +1,183 @@ +@mixin dropdownMenu { + background-color: $wcfDropdownBackground; + border-radius: 2px; + box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); + color: $wcfDropdownText; + display: none; + min-width: 160px; + padding: 3px 0; + pointer-events: all; + position: absolute; + text-align: left; + visibility: hidden; + z-index: 450; + + &.dropdownMenuPageSearch { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + &.dropdownArrowRight { + &::after { + left: auto; + right: 9px; + } + + &::before { + left: auto; + right: 10px; + } + } + + &.dropdownArrowBottom { + &::after { + border: 10px transparent solid; + border-top-color: $wcfDropdownBorder; + border-bottom-width: 0; + bottom: -10px; + top: auto; + } + + &::before { + border: 9px transparent solid; + border-top-color: $wcfDropdownBackground; + border-bottom-width: 0; + bottom: -9px; + top: auto; + } + } + + &.dropdownOpen { + display: block; + visibility: visible; + } + + li { + display: block; + + &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), + &.dropdownList > li:hover:not(.dropdownDivider), + &.dropdownNavigationItem, + &.active { + background-color: $wcfDropdownBackgroundActive; + color: $wcfDropdownLinkActive; + + > a { + color: $wcfDropdownLinkActive; + } + } + + &.dropdownDivider { + border-top: 1px solid $wcfDropdownBorderInner; + margin: 3px 0; + } + + &.dropdownText { + padding: $wcfGapTiny $wcfGapMedium; + + @include wcfFontSmall; + } + + &.boxFlag { + padding-top: 2px; + } + + /* + // @TODO + &.missingValue > span { + position: relative; + + &:after { + color: @wcfWarningBackgroundColor; + content: @fa-var-exclamation-triangle; + font-family: FontAwesome; + position: absolute; + right: @wcfGapMedium; + top: @wcfGapTiny; + } + } + */ + + > a, + > span { + clear: both; + cursor: pointer; + display: block; + max-width: 350px; + overflow: hidden; + padding: 5px 20px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; + + > div > h3 { + overflow: hidden; + text-overflow: ellipsis; + } + } + + > a { + color: $wcfDropdownLink; + } + + > a > small { + display: block; + } + + > a + span.badge { + display: none; + } + + > .box16 { + align-items: center; + cursor: pointer; + min-height: 0; + padding: 5px 10px; + } + + > label { + display: block; + } + + .containerHeadline { + margin-bottom: 0; + + > p { + @include wcfFontSmall; + } + } + + .icon { + color: inherit; + } + } + + .scrollableDropdownMenu { + max-height: 300px; + overflow: auto; + } + + @include screen-xs { + left: 0 !important; + right: 0 !important; + } + + @include screen-md-down { + li { + overflow: hidden; + + > a, + > span { + max-width: none; + white-space: normal; + } + } + } + + @include screen-md-up { + .dropdownMenu.pageHeaderSearchDropdown { + transform: translateY(-10px); + } + } +} diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss index afbbc8a815..bd30749a72 100644 --- a/wcfsetup/install/files/style/layout/containerList.scss +++ b/wcfsetup/install/files/style/layout/containerList.scss @@ -70,7 +70,7 @@ } > .buttonList { - @extend .dropdownMenu; + @include dropdownMenu; position: static !important; top: 0; diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss index 660fd24ecd..cbc849d732 100644 --- a/wcfsetup/install/files/style/ui/dropdown.scss +++ b/wcfsetup/install/files/style/ui/dropdown.scss @@ -116,187 +116,7 @@ } .dropdownMenu { - background-color: $wcfDropdownBackground; - border-radius: 2px; - box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); - color: $wcfDropdownText; - display: none; - min-width: 160px; - padding: 3px 0; - pointer-events: all; - position: absolute; - text-align: left; - visibility: hidden; - z-index: 450; - - &.dropdownMenuPageSearch { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - &.dropdownArrowRight { - &::after { - left: auto; - right: 9px; - } - - &::before { - left: auto; - right: 10px; - } - } - - &.dropdownArrowBottom { - &::after { - border: 10px transparent solid; - border-top-color: $wcfDropdownBorder; - border-bottom-width: 0; - bottom: -10px; - top: auto; - } - - &::before { - border: 9px transparent solid; - border-top-color: $wcfDropdownBackground; - border-bottom-width: 0; - bottom: -9px; - top: auto; - } - } - - &.dropdownOpen { - display: block; - visibility: visible; - } - - li { - display: block; - - &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), - &.dropdownList > li:hover:not(.dropdownDivider), - &.dropdownNavigationItem, - &.active { - background-color: $wcfDropdownBackgroundActive; - color: $wcfDropdownLinkActive; - - > a { - color: $wcfDropdownLinkActive; - } - } - - &.dropdownDivider { - border-top: 1px solid $wcfDropdownBorderInner; - margin: 3px 0; - } - - &.dropdownText { - padding: $wcfGapTiny $wcfGapMedium; - - @include wcfFontSmall; - } - - &.boxFlag { - padding-top: 2px; - } - - /* - // @TODO - &.missingValue > span { - position: relative; - - &:after { - color: @wcfWarningBackgroundColor; - content: @fa-var-exclamation-triangle; - font-family: FontAwesome; - position: absolute; - right: @wcfGapMedium; - top: @wcfGapTiny; - } - } - */ - - > a, - > span { - clear: both; - cursor: pointer; - display: block; - max-width: 350px; - overflow: hidden; - padding: 5px 20px; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - word-wrap: normal; - - > div > h3 { - overflow: hidden; - text-overflow: ellipsis; - } - } - - > a { - color: $wcfDropdownLink; - } - - > a > small { - display: block; - } - - > a + span.badge { - display: none; - } - - > .box16 { - align-items: center; - cursor: pointer; - min-height: 0; - padding: 5px 10px; - } - - > label { - display: block; - } - - .containerHeadline { - margin-bottom: 0; - - > p { - @include wcfFontSmall; - } - } - - .icon { - color: inherit; - } - } - - .scrollableDropdownMenu { - max-height: 300px; - overflow: auto; - } - - @include screen-xs { - left: 0 !important; - right: 0 !important; - } - - @include screen-md-down { - li { - overflow: hidden; - - > a, - > span { - max-width: none; - white-space: normal; - } - } - } - - @include screen-md-up { - .dropdownMenu.pageHeaderSearchDropdown { - transform: translateY(-10px); - } - } + @include dropdownMenu; } .dropdownIndicator::after { diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss index a506f97df3..54b91b33b9 100644 --- a/wcfsetup/install/files/style/ui/message.scss +++ b/wcfsetup/install/files/style/ui/message.scss @@ -235,6 +235,7 @@ @include screen-sm-down { margin-top: 20px; + position: relative; } &.loading { @@ -337,17 +338,20 @@ } @include screen-sm-down { - flex: 0 0 24px; + flex: 0 0 24px !important; height: 1.5em; position: relative; &::before { - content: $fa-var-bars; + content: $fa-var-ellipsis-v; font-family: FontAwesome; font-size: 18px; + height: 24px; position: absolute; right: 0; + text-align: center; top: -2px; + width: 24px; } > li { @@ -434,7 +438,32 @@ } @include screen-sm-down { - display: none; + &:not(.open) { + display: none; + } + + // uses pointless additional classes to increase selector specificity :( + &.buttonList.open { + @include dropdownMenu; + + display: block; + position: absolute; + visibility: visible; + top: 10px; + + .button { + // these three are required to work around the .button default styling + background-color: transparent; + color: $wcfDropdownLink; + + @include wcfFontDefault; + + > .invisible { + display: inline; + margin-left: 5px; + } + } + } } } } -- 2.20.1