Fully clickable notification items

diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index 33338e7f138bf9646c37636f4fca017cf9401221..5a3a5202d3038065ba4c5f127f19ebdbd209b5bc 100644 (file)
--- a/com.woltlab.wcf/templates/notificationList.tpl
+++ b/com.woltlab.wcf/templates/notificationList.tpl
@@ -51,7 +51,8 @@
                        
                                <ul class="containerList userNotificationItemList">
                {/if}
-                               <li class="jsNotificationItem notificationItem{if $notification[authors] > 1} groupedNotificationItem{/if}{if !$notification[event]->isConfirmed()} notificationUnconfirmed{/if}" data-link="{if $notification[event]->isConfirmed()}{$notification[event]->getLink()}{else}{link controller='NotificationConfirm' id=$notification[notificationID]}{/link}{/if}" data-link-replace-all="{if $notification[event]->isConfirmed()}false{else}true{/if}" data-object-id="{@$notification[notificationID]}" data-is-read="{if $notification[event]->isConfirmed()}true{else}false{/if}" data-is-grouped="{if $notification[authors] > 1}true{else}false{/if}">
+                               {capture assign='__notificationLink'}{if $notification[event]->isConfirmed()}{$notification[event]->getLink()}{else}{link controller='NotificationConfirm' id=$notification[notificationID]}{/link}{/if}{/capture}
+                               <li class="jsNotificationItem notificationItem{if $notification[authors] > 1} groupedNotificationItem{/if}{if !$notification[event]->isConfirmed()} notificationUnconfirmed{/if}" data-link="{@$__notificationLink}" data-link-replace-all="{if $notification[event]->isConfirmed()}false{else}true{/if}" data-object-id="{@$notification[notificationID]}" data-is-read="{if $notification[event]->isConfirmed()}true{else}false{/if}" data-is-grouped="{if $notification[authors] > 1}true{else}false{/if}">
                                        <div class="box32">
                                                {if $notification[authors] < 2}
                                                        <div class="jsTooltip" title="{$notification[event]->getAuthor()->username}">
@@ -61,7 +62,7 @@
                                                        <div class="details">
                                                                <p>
                                                                        {if !$notification[confirmed]}<span class="badge label newContentBadge">{lang}wcf.message.new{/lang}</span>{/if}
-                                                                       {@$notification[event]->getMessage()}
+                                                                       <a href="{@$__notificationLink}" class="userNotificationItemLink">{@$notification[event]->getMessage()}</a>
                                                                </p>
                                                                <p><small>{@$notification[time]|time}</small></p>
                                                        </div>
@@ -73,7 +74,7 @@
                                                        <div class="details">
                                                                <p>
                                                                        {if !$notification[confirmed]}<span class="badge label newContentBadge">{lang}wcf.message.new{/lang}</span>{/if}
-                                                                       {@$notification[event]->getMessage()}
+                                                                       <a href="{@$__notificationLink}" class="userNotificationItemLink">{@$notification[event]->getMessage()}</a>
                                                                </p>
                                                                <p><small>{@$notification[time]|time}</small></p>
                                                                

diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js
index 174694e1a5c594cda1f283ca0ecb7cb2b390c2a2..b6dc5fdbfd03649e2741f307d968e8e1b75a5693 100644 (file)
--- a/wcfsetup/install/files/js/WCF.User.js
+++ b/wcfsetup/install/files/js/WCF.User.js
@@ -1800,13 +1800,6 @@ if (COMPILER_TARGET_DEFAULT) {
                                        var $markAsConfirmed = $('<a href="#" class="icon icon24 fa-check notificationItemMarkAsConfirmed jsTooltip" title="' + WCF.Language.get('wcf.user.notification.markAsConfirmed') + '" />').appendTo($item);
                                        $markAsConfirmed.click($.proxy(this._markAsConfirmed, this));
                                }
-                               
-                               // work-around for legacy notifications
-                               var details = item.querySelector('.details > p:first-child');
-                               details.classList.add("pointer");
-                               details.addEventListener('click', function(event) {
-                                       window.location.href = $item.data('link');
-                               });
                        }).bind(this));
                        
                        WCF.DOMNodeInsertedHandler.execute();

diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index e16d7d02628f732c46900f45b98c5918be69174f..3891dca182c25d772bed2b2d17ee8086e1b35726 100644 (file)
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -320,6 +320,7 @@
                
                > .box32 {
                        flex: 1 1 auto;
+                       position: relative;
                }
                
                > .notificationItemMarkAsConfirmed {
@@ -328,6 +329,19 @@
        }
 }
 
+.userNotificationItemList .userNotificationItemLink {
+       color: inherit;
+
+       &::before {
+               bottom: 0;
+               content: "";
+               left: 0;
+               position: absolute;
+               right: 0;
+               top: 0;
+       }
+}
+
 .userProfilePreviewAvatar {
        align-self: flex-start;
        display: block;