уведомления: css таблица

теперь ссылкой является вся строка, как в других таблицах сайта
maxcom · Sep 17, 2023 · d7bb879 · d7bb879
1 parent 989373d
commit d7bb879
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 14 deletions.
diff --git a/src/main/webapp/WEB-INF/jsp/show-replies-new.jsp b/src/main/webapp/WEB-INF/jsp/show-replies-new.jsp
@@ -98,11 +98,10 @@
   </div>
 </c:if>
 
-<div class=forum>
-<table width="100%" class="message-table">
+<div class="notifications">
 <c:forEach var="topic" items="${topicsList}">
-<tr>
-  <td style="text-align: center; border-right: 1px; width: 1.5em">
+<a href="${topic.link}" class="event-unread-${topic.event.unread} notifications-item">
+  <div class="notifications-type">
     <c:choose>
       <c:when test="${topic.event.eventType == 'DELETED'}">
         <img src="/img/del.png" alt="[X]" title="Сообщение удалено" width="15" height="15">
@@ -117,12 +116,10 @@
         <i class="icon-tag icon-tag-color" title="Избранный тег"></i>
       </c:when>
     </c:choose>
-  </td>
-  <td style="vertical-align: top; border-left: 1px; border-right: 1px">
+  </div>
+  <div class="notifications-title">
     <c:if test="${topic.commentId() != 0}"><i class="icon-comment"></i></c:if>
-    <a href="${topic.link}" class="event-unread-${topic.event.unread}">
-      <l:title>${topic.event.subj}</l:title>
-    </a>
+    <l:title>${topic.event.subj}</l:title>
     (${topic.section.name})
     <c:if test="${topic.event.unread}">&nbsp;&bull;</c:if>
 
@@ -150,20 +147,19 @@
         <c:out value="${topic.event.eventMessage}" escapeXml="true"/> (${topic.bonus})
       </c:when>
     </c:choose>
-  </td>
-  <td title="${topic.authorsText}" style="text-align: right; border-left: 1px">
+  </div>
+  <div title="${topic.authorsText}" class="notifications-who">
     <c:if test="${topic.count > 1}">
       <i class="icon-comment"></i> ${topic.count}<br>
     </c:if>
     <c:if test="${topic.count == 1 and topic.event.eventType != 'REACTION'}">
       <lor:user user="${topic.author}"/><br>
     </c:if>
     <lor:dateinterval date="${topic.date}" compact="true"/>
-  </td>
-</tr>
+  </div>
+</a>
 </c:forEach>
 
-</table>
 </div>
 
 <div class="container" style="margin-bottom: 1em">

diff --git a/src/main/webapp/sass/_tracker.scss b/src/main/webapp/sass/_tracker.scss
@@ -456,3 +456,52 @@
   }
 }
 
+.notifications {
+  display: table;
+  width: 100%;
+  margin-bottom: 1em;
+  border-collapse: collapse;
+}
+
+.notifications-item {
+  display: table-row;
+
+  border: 1px solid;
+  border-color: $table_border_color;
+  background: $table_background_color;
+
+  div {
+    padding: 0.3em;
+    display: table-cell;
+  }
+
+  .notifications-type {
+    text-align: center;
+    width: 1.5em;
+    vertical-align: middle;
+  }
+
+  .notifications-who {
+    text-align: right;
+    vertical-align: middle;
+  }
+
+  &:hover {
+    background-color: $table_hover_background;
+  }
+
+  text-decoration: none;
+  color: $table_link_color;
+  &:visited {
+    color: $text_color;
+  }
+
+  &.event-unread-false {
+    color: $text_color;
+  }
+
+  &.event-unread-true:visited {
+    color: $table_link_color;
+  }
+}
+