Overhauled/unified mobile styling of message groups

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index b08a4c5e49a874f1d1a06140e1976f257ce58867..1ec0911764700608313dda67da370e4039561569 100644 (file)
--- 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 e6be7a10fbd838d49d56e4d1cdc00ff980d356e7..fcefce91f264e6595d3a331e34211b1dc683fea9 100644 (file)
--- 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