Add CSS classes to differentiate between category/feed/entry view and icons

template/templates/common/feed_list.html

@@ -1,7 +1,7 @@
 {{ define "feed_list" }}
     <div class="items">
         {{ range .feeds }}
-        <article role="article" class="item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}">
+        <article role="article" class="item feed-item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if and (.Icon) (gt .Icon.IconID 0) }}
@@ -19,21 +19,21 @@
             </div>
             <div class="item-meta">
                 <ul class="item-meta-info">
-                    <li dir="auto">
+                    <li class="item-meta-info-site-url" dir="auto">
                         <a href="{{ .SiteURL | safeURL  }}" title="{{ .SiteURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-original-link="true">{{ domain .SiteURL }}</a>
                     </li>
-                    <li>
+                    <li class="item-meta-info-checked-at">
                         {{ t "page.feeds.last_check" }} <time datetime="{{ isodate .CheckedAt }}" title="{{ isodate .CheckedAt }}">{{ elapsed $.user.Timezone .CheckedAt }}</time>
                     </li>
                 </ul>
                 <ul class="item-meta-icons">
-                    <li>
+                    <li class="item-meta-icons-refresh">
                         <a href="{{ route "refreshFeed" "feedID" .ID }}">{{ icon "refresh" }}<span class="icon-label">{{ t "menu.refresh_feed" }}</span></a>
                     </li>
-                    <li>
+                    <li class="item-meta-icons-edit">
                         <a href="{{ route "editFeed" "feedID" .ID }}">{{ icon "edit" }}<span class="icon-label">{{ t "menu.edit_feed" }}</span></a>
                     </li>
-                    <li>
+                    <li class="item-meta-icons-remove">
                         <a href="#"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"
@@ -43,7 +43,7 @@
                             data-url="{{ route "removeFeed" "feedID" .ID }}">{{ icon "delete" }}<span class="icon-label">{{ t "action.remove" }}</span></a>
                     </li>
                     {{ if .UnreadCount }}
-                      <li>
+                      <li class="item-meta-icons-mark-as-read">
                         <a href="#"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"

template/templates/common/item_meta.html

@@ -1,10 +1,10 @@
 {{ define "item_meta" }}
 <div class="item-meta">
     <ul class="item-meta-info">
-        <li>
+        <li class="item-meta-info-title">
             <a href="{{ route "feedEntries" "feedID" .entry.Feed.ID }}" title="{{ .entry.Feed.SiteURL }}" data-feed-link="true">{{ truncate .entry.Feed.Title 35 }}</a>
         </li>
-        <li>
+        <li class="item-meta-info-timestamp">
             <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed .user.Timezone .entry.Date }}</time>
         </li>
         {{ if and .user.ShowReadingTime (gt .entry.ReadingTime 0) }}
@@ -16,7 +16,7 @@
         {{ end }}
     </ul>
     <ul class="item-meta-icons">
-        <li>
+        <li class="item-meta-icons-read">
             <a href="#"
                 title="{{ t "entry.status.title" }}"
                 data-toggle-status="true"
@@ -26,7 +26,7 @@
                 data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
                 >{{ if eq .entry.Status "read" }}{{ icon "unread" }}{{ else }}{{ icon "read" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "read" }}{{ t "entry.status.unread" }}{{ else }}{{ t "entry.status.read" }}{{ end }}</span></a>
         </li>
-        <li>
+        <li class="item-meta-icons-star">
             <a href="#"
                 data-toggle-bookmark="true"
                 data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
@@ -37,12 +37,12 @@
                 >{{ if .entry.Starred }}{{ icon "unstar" }}{{ else }}{{ icon "star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
         </li>
         {{ if .entry.ShareCode }}
-            <li>
+            <li class="item-meta-icons-share">
                 <a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
                     title="{{ t "entry.shared_entry.title" }}"
                     target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.shared_entry.label" }}</span></a>
             </li>
-            <li>
+            <li class="item-meta-icons-delete">
                 <a href="#"
                     data-confirm="true"
                     data-url="{{ route "unshareEntry" "entryID" .entry.ID }}"
@@ -63,7 +63,7 @@
                     >{{ icon "save" }}<span class="icon-label">{{ t "entry.save.label" }}</span></a>
             </li>
         {{ end }}
-        <li>
+        <li class="item-meta-icons-external-url">
             <a href="{{ .entry.URL | safeURL  }}"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -71,7 +71,7 @@
                 data-original-link="true">{{ icon "external-link" }}<span class="icon-label">{{ t "entry.external_link.label" }}</span></a>
         </li>
         {{ if .entry.CommentsURL }}
-            <li>
+            <li class="item-meta-icons-comments">
                 <a href="{{ .entry.CommentsURL | safeURL  }}"
                     title="{{ t "entry.comments.title" }}"
                     target="_blank"

template/templates/views/bookmark_entries.html

@@ -13,7 +13,7 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}

template/templates/views/categories.html

@@ -15,7 +15,7 @@
 {{ else }}
     <div class="items">
         {{ range .categories }}
-        <article role="article" class="item{{if gt .TotalUnread 0 }} category-has-unread{{end}}">
+        <article role="article" class="item category-item {{if gt .TotalUnread 0 }} category-has-unread{{end}}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     <a href="{{ route "categoryEntries" "categoryID" .ID }}">{{ .Title }}</a>
@@ -24,22 +24,22 @@
             </div>
             <div class="item-meta">
                 <ul class="item-meta-info">
-                    <li>
+                    <li class="item-meta-info-feed-count">
                         {{ if eq .FeedCount 0 }}{{ t "page.categories.no_feed" }}{{ else }}{{ plural "page.categories.feed_count" .FeedCount .FeedCount }}{{ end }}
                     </li>
                 </ul>
                 <ul class="item-meta-icons">
-                    <li>
+                    <li class="item-meta-icons-entries">
                         <a href="{{ route "categoryEntries" "categoryID" .ID }}">{{ icon "entries" }}<span class="icon-label">{{ t "page.categories.entries" }}</span></a>
                     </li>
-                    <li>
+                    <li class="item-meta-icons-feeds">
                         <a href="{{ route "categoryFeeds" "categoryID" .ID }}">{{ icon "feeds" }}<span class="icon-label">{{ t "page.categories.feeds" }}</span></a>
                     </li>
-                    <li>
+                    <li class="item-meta-icons-edit">
                         <a href="{{ route "editCategory" "categoryID" .ID }}">{{ icon "edit" }}<span class="icon-label">{{ t "menu.edit_category" }}</span></a>
                     </li>
                     {{ if eq .FeedCount 0 }}
-                    <li>
+                    <li class="item-meta-icons-delete">
                         <a href="#"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"
@@ -50,7 +50,7 @@
                     </li>
                     {{ end }}
                     {{ if gt .TotalUnread 0 }}
-                      <li>
+                      <li class="item-meta-icons-mark-as-read">
                         <a href="#"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"

template/templates/views/category_entries.html

@@ -50,7 +50,7 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}

template/templates/views/feed_entries.html

@@ -75,7 +75,7 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}

template/templates/views/history_entries.html

@@ -29,7 +29,7 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}

template/templates/views/search_entries.html

@@ -13,7 +13,7 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}

template/templates/views/shared_entries.html

@@ -26,7 +26,7 @@
 {{ else }}
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
@@ -43,15 +43,15 @@
             </div>
             <div class="item-meta">
                 <ul class="item-meta-info">
-                    <li>
+                    <li class="item-meta-info-site-url">
                         <a href="{{ route "feedEntries" "feedID" .Feed.ID }}" title="{{ .Feed.SiteURL }}">{{ truncate .Feed.Title 35 }}</a>
                     </li>
-                    <li>
+                    <li class="item-meta-info-timestamp">
                         <time datetime="{{ isodate .Date }}" title="{{ isodate .Date }}">{{ elapsed $.user.Timezone .Date }}</time>
                     </li>
                 </ul>
                 <ul class="item-meta-icons">
-                    <li>
+                    <li class="item-meta-icons-delete">
                         {{ icon "delete" }}
                         <a href="#"
                             data-confirm="true"

template/templates/views/unread_entries.html

@@ -36,7 +36,7 @@
     </div>
     <div class="items hide-read-items">
         {{ range .entries }}
-        <article role="article" class="item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}