From f58879c1dc284a60bce4199ccf05448198498ff4 Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Wed, 10 Mar 2021 12:10:11 +0300
Subject: [PATCH] small stuck header fixes in grid mode

---
 js/Headlines.js          |  4 ++--
 themes/compact.css       | 11 ++++++-----
 themes/compact_night.css | 11 ++++++-----
 themes/light.css         | 11 ++++++-----
 themes/light/cdm.less    |  2 +-
 themes/light/tt-rss.less |  9 +++++----
 themes/night.css         | 11 ++++++-----
 themes/night_blue.css    | 11 ++++++-----
 8 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/js/Headlines.js b/js/Headlines.js
index fce371904..028f277ff 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -20,10 +20,10 @@ const Headlines = {
 				const header = entry.target.nextElementSibling;
 
 				if (entry.intersectionRatio == 0) {
-					header.setAttribute("stuck", "1");
+					header.setAttribute("data-is-stuck", "true");
 
 				} else if (entry.intersectionRatio == 1) {
-					header.removeAttribute("stuck");
+					header.removeAttribute("data-is-stuck");
 				}
 
 				//console.log(entry.target, header, entry.intersectionRatio);
diff --git a/themes/compact.css b/themes/compact.css
index 2ce06f803..8e5e725a6 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -655,9 +655,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     grid-gap: 8px;
     padding: 8px;
   }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
-    top: -8px;
-  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
     background: white;
@@ -668,6 +665,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     border-top-width: 0;
     padding: 0 4px 4px 4px;
   }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+    top: -8px;
+    border-bottom-width: 1px;
+  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
     border-bottom-width: 0;
     padding: 4px;
@@ -1468,8 +1469,8 @@ div.cdm.expandable:not(.active) .content,
 div.cdm.expandable:not(.active) .collapse {
   display: none;
 }
-div.cdm.expandable.active .header[stuck],
-div.cdm.expanded .header[stuck] {
+div.cdm.expandable.active .header[data-is-stuck],
+div.cdm.expanded .header[data-is-stuck] {
   box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
   border: 0 solid #ddd;
   border-bottom-width: 1px;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index bfca85611..b3c4cc2cb 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -655,9 +655,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     grid-gap: 8px;
     padding: 8px;
   }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
-    top: -8px;
-  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
     background: #333;
@@ -668,6 +665,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     border-top-width: 0;
     padding: 0 4px 4px 4px;
   }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+    top: -8px;
+    border-bottom-width: 1px;
+  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
     border-bottom-width: 0;
     padding: 4px;
@@ -1468,8 +1469,8 @@ div.cdm.expandable:not(.active) .content,
 div.cdm.expandable:not(.active) .collapse {
   display: none;
 }
-div.cdm.expandable.active .header[stuck],
-div.cdm.expanded .header[stuck] {
+div.cdm.expandable.active .header[data-is-stuck],
+div.cdm.expanded .header[data-is-stuck] {
   box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
   border: 0 solid #222;
   border-bottom-width: 1px;
diff --git a/themes/light.css b/themes/light.css
index e55cd23f6..1e280effe 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -655,9 +655,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     grid-gap: 8px;
     padding: 8px;
   }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
-    top: -8px;
-  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
     background: white;
@@ -668,6 +665,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     border-top-width: 0;
     padding: 0 4px 4px 4px;
   }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+    top: -8px;
+    border-bottom-width: 1px;
+  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
     border-bottom-width: 0;
     padding: 4px;
@@ -1468,8 +1469,8 @@ div.cdm.expandable:not(.active) .content,
 div.cdm.expandable:not(.active) .collapse {
   display: none;
 }
-div.cdm.expandable.active .header[stuck],
-div.cdm.expanded .header[stuck] {
+div.cdm.expandable.active .header[data-is-stuck],
+div.cdm.expanded .header[data-is-stuck] {
   box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
   border: 0 solid #ddd;
   border-bottom-width: 1px;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index dfcc42e20..abedd7c01 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -323,7 +323,7 @@ div.cdm.expandable:not(.active) {
 div.cdm {
 	&.expandable.active,
 	&.expanded {
-		.header[stuck] {
+		.header[data-is-stuck] {
 			box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1);
 			border: 0 solid @border-default;
 			border-bottom-width: 1px;
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 8735c1415..fa7e3e2a1 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -763,10 +763,6 @@ body.ttrss_main {
 			grid-gap : 8px;
 			padding : 8px;
 
-			.header[stuck] {
-				top : -8px;
-			}
-
 			.cdm.expanded {
 
 				.header, .content {
@@ -780,6 +776,11 @@ body.ttrss_main {
 					padding : 0 4px 4px 4px;
 				}
 
+				.header[data-is-stuck] {
+					top : -8px;
+					border-bottom-width: 1px;
+				}
+
 				.header {
 					border-bottom-width : 0;
 					padding : 4px;
diff --git a/themes/night.css b/themes/night.css
index 0cd83a564..edfd2e76e 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -656,9 +656,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     grid-gap: 8px;
     padding: 8px;
   }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
-    top: -8px;
-  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
     background: #333;
@@ -669,6 +666,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     border-top-width: 0;
     padding: 0 4px 4px 4px;
   }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+    top: -8px;
+    border-bottom-width: 1px;
+  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
     border-bottom-width: 0;
     padding: 4px;
@@ -1469,8 +1470,8 @@ div.cdm.expandable:not(.active) .content,
 div.cdm.expandable:not(.active) .collapse {
   display: none;
 }
-div.cdm.expandable.active .header[stuck],
-div.cdm.expanded .header[stuck] {
+div.cdm.expandable.active .header[data-is-stuck],
+div.cdm.expanded .header[data-is-stuck] {
   box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
   border: 0 solid #222;
   border-bottom-width: 1px;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 4f1862aca..5f459cae7 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -656,9 +656,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     grid-gap: 8px;
     padding: 8px;
   }
-  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
-    top: -8px;
-  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header,
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
     background: #333;
@@ -669,6 +666,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
     border-top-width: 0;
     padding: 0 4px 4px 4px;
   }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
+    top: -8px;
+    border-bottom-width: 1px;
+  }
   body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header {
     border-bottom-width: 0;
     padding: 4px;
@@ -1469,8 +1470,8 @@ div.cdm.expandable:not(.active) .content,
 div.cdm.expandable:not(.active) .collapse {
   display: none;
 }
-div.cdm.expandable.active .header[stuck],
-div.cdm.expanded .header[stuck] {
+div.cdm.expandable.active .header[data-is-stuck],
+div.cdm.expanded .header[data-is-stuck] {
   box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
   border: 0 solid #222;
   border-bottom-width: 1px;