Apply the mobile reaction UI for touch devices on large screens (iPad Pro)

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Environment.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Environment.js
index ed0cda55fd08383960cacd98a8526dce0a8d13b4..0768db8fd1482b29779a03511f257b6322e3b486 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Environment.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Environment.js
@@ -68,6 +68,12 @@ define([], function() {
                        
                        _editor = 'redactor';
                        _touch = (!!('ontouchstart' in window) || (!!('msMaxTouchPoints' in window.navigator) && window.navigator.msMaxTouchPoints > 0) || window.DocumentTouch && document instanceof DocumentTouch);
+                       
+                       // The iPad Pro 12.9" masquerades as a desktop browser.
+                       if (window.navigator.platform === 'macIntel' && window.navigator.maxTouchPoints > 1) {
+                               _browser = 'safari';
+                               _platform = 'ios';
+                       }
                },
                
                /**

diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index 40f8cd4217d622066161cad7206f301c88c7aeea..b22db4f6ef66f69de1a607fa232b87b4737fa0d2 100644 (file)
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -140,6 +140,18 @@
        }
 }
 
+@include screen-lg {
+       html.touch .reactionPopoverContent .reactionTypeButton {
+               display: block;
+               margin-left: 0;
+               
+               > .reactionTypeButtonTitle {
+                       display: inline;
+                       margin-left: 10px;
+               }
+       }
+}
+
 @include screen-sm-down {
        .reactionStatusContainer {
                display: none;