grid: add workaround for a single loaded headline not spanning all columns

js/Headlines.js

@@ -379,7 +379,7 @@ const Headlines = {
 	objectById: function (id) {
 		return this.headlines[id];
 	},
-	setCommonClasses: function () {
+	setCommonClasses: function (headlines_count) {
 		const container = App.byId("headlines-frame");
 
 		container.removeClassName("cdm");
@@ -387,6 +387,7 @@ const Headlines = {
 
 		container.addClassName(App.isCombinedMode() ? "cdm" : "normal");
 		container.setAttribute("data-enable-grid", App.getInitParam("cdm_enable_grid") ? "true" : "false");
+		container.setAttribute("data-headlines-count", parseInt(headlines_count));
 
 		// for floating title because it's placed outside of headlines-frame
 		App.byId("main").removeClassName("expandable");
@@ -397,7 +398,7 @@ const Headlines = {
 	},
 	renderAgain: function () {
 		// TODO: wrap headline elements into a knockoutjs model to prevent all this stuff
-		Headlines.setCommonClasses();
+		Headlines.setCommonClasses(this.headlines.filter((h) => h.id).length);
 
 		App.findAll("#headlines-frame > div[id*=RROW]").forEach((row) => {
 			const id = row.getAttribute("data-article-id");
@@ -682,7 +683,7 @@ const Headlines = {
 				console.log('infscroll_disabled=', Feeds.infscroll_disabled);
 
 				// also called in renderAgain() after view mode switch
-				Headlines.setCommonClasses();
+				Headlines.setCommonClasses(headlines_count);
 
 				/** TODO: remove @deprecated */
 				App.byId("headlines-frame").setAttribute("is-vfeed",

themes/compact.css

@@ -654,6 +654,16 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
   grid-gap: 8px;
   padding: 8px;
 }
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .feed-title {
+  grid-column: 1;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
+}
 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;
@@ -691,11 +701,6 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
 body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate {
   word-break: break-all;
 }
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-  grid-column: 1 / -1;
-}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #ddd;

themes/compact_night.css

@@ -654,6 +654,16 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
   grid-gap: 8px;
   padding: 8px;
 }
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .feed-title {
+  grid-column: 1;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
+}
 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;
@@ -691,11 +701,6 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
 body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate {
   word-break: break-all;
 }
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-  grid-column: 1 / -1;
-}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #222;

themes/light.css

@@ -654,6 +654,16 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
   grid-gap: 8px;
   padding: 8px;
 }
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .feed-title {
+  grid-column: 1;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
+}
 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;
@@ -691,11 +701,6 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
 body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate {
   word-break: break-all;
 }
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-  grid-column: 1 / -1;
-}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #ddd;

themes/light/tt-rss.less

@@ -762,6 +762,16 @@ body.ttrss_main {
 		grid-gap : 8px;
 		padding : 8px;
 
+		&[data-headlines-count="1"] {
+			#headlines-spacer, .whiteBox, .feed-title {
+				grid-column: 1;
+			}
+		}
+
+		#headlines-spacer, .whiteBox, .feed-title {
+			grid-column : 1 e("/") -1;
+		}
+
 		.cdm.expanded {
 
 			.header, .content {
@@ -807,10 +817,6 @@ body.ttrss_main {
 				word-break: break-all;
 			}
 		}
-
-		#headlines-spacer, .whiteBox, .feed-title {
-			grid-column : 1 e("/") -1;
-		}
 	}
 
 	#headlines-frame {

themes/night.css

@@ -655,6 +655,16 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
   grid-gap: 8px;
   padding: 8px;
 }
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .feed-title {
+  grid-column: 1;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
+}
 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;
@@ -692,11 +702,6 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
 body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate {
   word-break: break-all;
 }
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-  grid-column: 1 / -1;
-}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #222;

themes/night_blue.css

@@ -655,6 +655,16 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
   grid-gap: 8px;
   padding: 8px;
 }
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"][data-headlines-count="1"] .feed-title {
+  grid-column: 1;
+}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
+  grid-column: 1 / -1;
+}
 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;
@@ -692,11 +702,6 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
 body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate {
   word-break: break-all;
 }
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox,
-body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title {
-  grid-column: 1 / -1;
-}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #222;