oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Remove row clicking from notification table (#22695)

Resolves #22692

I don't think there's a need for this entire row to be clickable (and
even different links depending on which segment you click)
The links still point to the same spot, so no information is lost here.

---------

Signed-off-by: jolheiser <john.olheiser@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

authored by

John Olheiser
wxiaoguang and committed by
GitHub 73b4010f de5b368b

+17 -37
+3 -3
templates/user/notification/notification_div.tmpl
··· 35 35 {{$issue := .Issue}} 36 36 {{$repo := .Repository}} 37 37 <tr id="notification_{{.ID}}"> 38 - <td class="collapsing gt-pl-4" data-href="{{.Link}}"> 38 + <td class="collapsing gt-pl-4"> 39 39 {{if eq .Status 3}} 40 40 {{svg "octicon-pin" 16 "text blue"}} 41 41 {{else if not $issue}} ··· 58 58 {{end}} 59 59 {{end}} 60 60 </td> 61 - <td class="eleven wide" data-href="{{.Link}}"> 61 + <td class="eleven wide"> 62 62 <a class="item" href="{{.Link}}"> 63 63 {{if $issue}} 64 64 #{{$issue.Index}} - {{$issue.Title}} ··· 67 67 {{end}} 68 68 </a> 69 69 </td> 70 - <td data-href="{{$repo.Link}}"> 70 + <td> 71 71 <a class="item" href="{{$repo.Link}}">{{$repo.FullName}}</a> 72 72 </td> 73 73 <td class="collapsing">
+14 -19
web_src/css/user.css
··· 90 90 padding: 8px 15px; 91 91 } 92 92 93 - .user.notification .content { 94 - float: left; 95 - margin-left: 7px; 96 - } 97 - 98 - .user.notification table form { 99 - display: inline-block; 100 - } 101 - 102 - .user.notification table button { 103 - padding: 3px 3px 3px 5px; 104 - } 105 - 106 - .user.notification table tr { 107 - cursor: pointer; 108 - } 109 - 110 93 .user .button.adopt, 111 94 .user .button.delete { 112 95 margin-top: -15px; ··· 152 135 object-fit: contain; 153 136 } 154 137 138 + .user.notification table button { 139 + padding: 3px 3px 3px 5px; 140 + } 141 + 155 142 #notification_div .tab.segment { 156 143 overflow-x: auto; 157 - padding: 0; 158 144 } 159 145 160 - #notification_div .menu .active.item { 146 + #notification_div .tabular.menu .active.item { 161 147 background: var(--color-box-body); 162 148 } 163 149 164 150 #notification_table { 165 151 border: none; 166 152 } 153 + 154 + #notification_table tr { 155 + cursor: default; 156 + } 157 + 158 + #notification_table td a { 159 + width: 100%; 160 + display: inline-block; 161 + }
-15
web_src/js/features/common-global.js
··· 124 124 toggleElem($($(this).data('target'))); 125 125 }); 126 126 127 - // make table <tr> and <td> elements clickable like a link 128 - $('tr[data-href], td[data-href]').on('click', function (e) { 129 - const href = $(this).data('href'); 130 - if (e.target.nodeName === 'A') { 131 - // if a user clicks on <a>, then the <tr> or <td> should not act as a link. 132 - return; 133 - } 134 - if (e.ctrlKey || e.metaKey) { 135 - // ctrl+click or meta+click opens a new window in modern browsers 136 - window.open(href); 137 - } else { 138 - window.location = href; 139 - } 140 - }); 141 - 142 127 // prevent multiple form submissions on forms containing .loading-button 143 128 document.addEventListener('submit', (e) => { 144 129 const btn = e.target.querySelector('.loading-button');