Display the reaction button on mobile

See #3888

diff --git a/ts/WoltLabSuite/Core/Ui/Mobile.ts b/ts/WoltLabSuite/Core/Ui/Mobile.ts
index f343ce0e70085777d6e6f0a0309bd56367eef5d9..eff98789ea4d7be20a7656691fd1113dad2c0d0a 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Mobile.ts
+++ b/ts/WoltLabSuite/Core/Ui/Mobile.ts
@@ -290,13 +290,8 @@ function disableLGTouchNavigation(): void {
 
 function rebuildMobileNavigation(navigation: HTMLElement): void {
   navigation.querySelectorAll(".button").forEach((button: HTMLElement) => {
-    if (button.classList.contains("ignoreMobileNavigation")) {
-      // The reaction button was hidden up until 5.2.2, but was enabled again in 5.2.3. This check
-      // exists to make sure that there is no unexpected behavior in 3rd party apps or plugins that
-      // used the same code and hid the reaction button via a CSS class in the template.
-      if (!button.classList.contains("reactButton")) {
-        return;
-      }
+    if (button.classList.contains("ignoreMobileNavigation") || button.classList.contains("reactButton")) {
+      return;
     }
 
     const item = document.createElement("li");

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index 433c7bb95ca41d23f93a16fed90660bdba6a30cb..00c8f11849ef7e8bf4fd1255fe5a56be8a8e36ae 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
@@ -240,13 +240,8 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../
     }
     function rebuildMobileNavigation(navigation) {
         navigation.querySelectorAll(".button").forEach((button) => {
-            if (button.classList.contains("ignoreMobileNavigation")) {
-                // The reaction button was hidden up until 5.2.2, but was enabled again in 5.2.3. This check
-                // exists to make sure that there is no unexpected behavior in 3rd party apps or plugins that
-                // used the same code and hid the reaction button via a CSS class in the template.
-                if (!button.classList.contains("reactButton")) {
-                    return;
-                }
+            if (button.classList.contains("ignoreMobileNavigation") || button.classList.contains("reactButton")) {
+                return;
             }
             const item = document.createElement("li");
             if (button.classList.contains("active")) {

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 9936de3003fa04a1e0d82ebaeb95ded2d3655bc6..cce45575b41c4ffe7966e6a8efd56df3659f812f 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -520,17 +520,15 @@
                }
                
                @include screen-sm-down {
-                       display: block;
-                       margin-top: 0 !important;
-                       pointer-events: none;
-                       position: absolute;
-                       right: -1px;
-                       top: 9px;
-                       
-                       > li {
-                               height: 0;
-                               overflow: hidden;
-                       }
+            margin-left: auto;
+
+            .button:not(.reactButton) {
+                display: none;
+            }
+
+            .button.reactButton {
+                border-radius: 2px;
+            }
                }
        }
        
@@ -584,10 +582,10 @@
                opacity: 1;
        }
 }
-       
+
 .messageFooterButtons,
 .messageFooterButtonsExtra {
-       @extend .buttonGroup;
+    @extend .buttonGroup;
        
        justify-content: flex-end;