Optimize react dialog for mobile devices

See #2508

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
index 46249fb79c15370581f859797011f45b09aebbe5..2b7da0422ea764910a21a0e4b33262ae15f54fa4 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
@@ -172,8 +172,14 @@ define(
                                                elData(reactionTypeItem, 'title', reactionType.title);
                                                reactionTypeItem.title = reactionType.title;
                                                
+                                               var reactionTypeItemSpan = elCreate('span');
+                                               reactionTypeItemSpan.classList = 'reactionTypeButtonTitle';
+                                               reactionTypeItemSpan.innerHTML = reactionType.title;
+                                               
                                                reactionTypeItem.innerHTML = reactionType.renderedIcon;
                                                
+                                               reactionTypeItem.appendChild(reactionTypeItemSpan);
+                                               
                                                reactionTypeItem.addEventListener(WCF_CLICK_EVENT, this._react.bind(this, key));
                                                
                                                popoverContentHTML.appendChild(reactionTypeItem);

diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index 8101eced1ad93307b0ea523ac67a5f5aea0ddfc5..74eabe65f540bb6c1e6dff41fd4289259c2e7750 100644 (file)
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -39,16 +39,6 @@
                }
        }
        
-       > ul > li.reactionTypeButton {
-               display: inline;
-               cursor: pointer;
-               margin-left: 10px;
-       }
-       
-       > ul > li.reactionTypeButton:first-child {
-               margin-left: 0px;
-       }
-       
        > ul > li.reactionTypeButton > img:hover {
                transform: scale(1.2);
        }
@@ -60,6 +50,35 @@
        > ul > li.reactionTypeButton > span.icon {
                cursor: pointer;
        }
+       
+       @include screen-md-down {
+               > ul > li.reactionTypeButton {
+                       margin: 0px;
+                       display: block;
+                       padding: 5px 10px;
+               }
+               
+               > ul > li.reactionTypeButton > .reactionTypeButtonTitle {
+                       vertical-align: middle;
+                       padding-left: 5px;
+               }
+       }
+       
+       @include screen-lg {
+               > ul > li.reactionTypeButton > .reactionTypeButtonTitle {
+                       display: none;
+               }
+               
+               > ul > li.reactionTypeButton {
+                       display: inline;
+                       cursor: pointer;
+                       margin-left: 10px;
+               }
+               
+               > ul > li.reactionTypeButton:first-child {
+                       margin-left: 0px;
+               }
+       }
 }
 
 li.reactCountButton {