From 06cf73049a03b3043a5c84d30864c3bd0114d8e7 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Mon, 22 Aug 2016 16:01:15 +0200 Subject: [PATCH] Overhauled/unified mobile styling of message groups --- .../files/js/WoltLabSuite/Core/Ui/Mobile.js | 49 ++++++- .../install/files/style/ui/messageGroup.scss | 130 +++++++++++++++++- 2 files changed, 176 insertions(+), 3 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js index b08a4c5e49..1ec0911764 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js @@ -7,8 +7,8 @@ * @module WoltLabSuite/Core/Ui/Mobile */ define( - [ '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) + [ 'Core', 'Environment', 'EventHandler', 'Language', 'List', 'Dom/ChangeListener', 'Dom/Traverse', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'], + function(Core, Environment, EventHandler, Language, List, DomChangeListener, DomTraverse, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser) { "use strict"; @@ -20,6 +20,7 @@ define( var _options = {}; var _pageMenuMain = null; var _pageMenuUser = null; + var _messageGroups = null; /** * @exports WoltLabSuite/Core/Ui/Mobile @@ -45,6 +46,9 @@ define( document.documentElement.classList.add('mobile'); } + var messageGroupList = elBySel('.messageGroupList'); + if (messageGroupList) _messageGroups = elByClass('messageGroup', messageGroupList); + UiScreen.on('screen-md-down', { match: this.enable.bind(this), unmatch: this.disable.bind(this), @@ -62,6 +66,8 @@ define( _pageMenuMain.enable(); _pageMenuUser.enable(); } + + if (_messageGroups) this.rebuildShadow(_messageGroups, '.messageGroupLink'); }, /** @@ -74,6 +80,8 @@ define( _pageMenuMain.disable(); _pageMenuUser.disable(); } + + if (_messageGroups) this.removeShadow(_messageGroups); }, _init: function() { @@ -86,6 +94,8 @@ define( UiCloseOverlay.add('WoltLabSuite/Core/Ui/Mobile', this._closeAllMenus.bind(this)); DomChangeListener.add('WoltLabSuite/Core/Ui/Mobile', this._initButtonGroupNavigation.bind(this)); + + if (_messageGroups) this.rebuildShadow(_messageGroups, '.messageGroupLink'); }, _initSearchBar: function() { @@ -190,6 +200,41 @@ define( elBySelAll('.jsMobileButtonGroupNavigation.open, .jsMobileNavigation.open, .boxMenu.open', null, function (menu) { menu.classList.remove('open'); }); + }, + + rebuildShadow: function(elements, linkSelector) { + var element, parent, shadow; + for (var i = 0, length = elements.length; i < length; i++) { + element = elements[i]; + parent = element.parentNode; + + shadow = DomTraverse.childByClass(parent, 'mobileLinkShadow'); + if (shadow === null) { + shadow = elCreate('a'); + shadow.className = 'mobileLinkShadow'; + shadow.href = elBySel(linkSelector, element).href; + + parent.appendChild(shadow); + parent.classList.add('mobileLinkShadowContainer'); + } + } + }, + + removeShadow: function(elements) { + var element, parent, shadow; + for (var i = 0, length = elements.length; i < length; i++) { + element = elements[i]; + parent = element.parentNode; + + if (parent.classList.contains('mobileLinkShadowContainer')) { + shadow = DomTraverse.childByClass(parent, 'mobileLinkShadow'); + if (shadow !== null) { + elRemove(shadow); + } + + parent.classList.remove('mobileLinkShadowContainer'); + } + } } }; }); diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss index e6be7a10fb..fcefce91f2 100644 --- a/wcfsetup/install/files/style/ui/messageGroup.scss +++ b/wcfsetup/install/files/style/ui/messageGroup.scss @@ -205,8 +205,122 @@ margin-right: 5px; } } - + @include screen-md-up { + .messageGroupCounterMobile, + .messageGroupInfoMobile { + display: none; + } + } + + @include screen-sm-down { + .tabularListColumns > .columnMark { + display: none; + } + + .tabularListRowHead { + .columnMark, + .columnStats { + display: none; + } + + .columnSubject { + padding: 0; + } + + .columnLastPost { + flex-basis: auto; + padding: 0; + } + } + + .tabularListRow:not(.tabularListRowHead) > .tabularListColumns { + flex-wrap: wrap; + justify-content: flex-end; + padding: 5px 0; + + > li { + padding: 0; + } + + .columnAvatar { + margin-right: 10px; + padding: 0; + + div { + height: 32px; + width: 32px; + } + + img { + max-height: 32px; + max-width: 32px; + } + + .myAvatar { + display: none; + } + } + + .columnSubject { + /* 37px = avatar width + margin-right */ + flex-basis: calc(100% - 42px); + max-width: calc(100% - 42px); + + > h3 { + align-items: flex-start; + display: flex; + + > a { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + + @include wcfFontDefault; + } + + > .messageGroupCounterMobile { + flex: 0 0 auto; + margin-left: 10px; + } + } + + .messageGroupInfoMobile { + color: $wcfContentDimmedText; + display: flex; + + @include wcfFontSmall; + + > .messageGroupAuthorMobile { + flex: 1 1 auto; + } + + > .messageGroupLastPostTimeMobile { + flex: 0 0 auto; + margin-left: 10px; + } + } + + .statusDisplay, + .messageGroupInfo, + .messageGroupTime, + .messageGroupEditLink { + display: none; + } + + .labelList { + float: none; + padding-bottom: 2px; + padding-left: 0; + } + } + + .columnStats, + .columnLastPost { + display: none; + } + } + } } .messageGroupListStatsSimple { @@ -217,3 +331,17 @@ top: 50%; transform: translateX(-50%) translateY(-50%); } + +@include screen-md-down { + .mobileLinkShadowContainer { + position: relative; + + > .mobileLinkShadow { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + } + } +} \ No newline at end of file -- 2.20.1