experimental: add preference to show combined mode headlines as a 2 column grid

6 files changed, 124 insertions, 6 deletions

diff --git a/themes/compact.css b/themes/compact.css
index 3bc7f6f5c..f11072b5c 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
   margin: 0px;
   border-width: 0px;
 }
-body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed {
+body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
+@media screen and (min-width: 1500px) {
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+    display: grid;
+    grid-template-columns: repeat(2, 0.5fr);
+    background-color: #f5f5f5;
+    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 {
+    background: white;
+    border: 1px solid #ddd;
+  }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+    border: 0;
+  }
+}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #ddd;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index b6fde0963..48651ce2d 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
   margin: 0px;
   border-width: 0px;
 }
-body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed {
+body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
+@media screen and (min-width: 1500px) {
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+    display: grid;
+    grid-template-columns: repeat(2, 0.5fr);
+    background-color: #222;
+    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 {
+    background: #333;
+    border: 1px solid #222;
+  }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+    border: 0;
+  }
+}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #222;
diff --git a/themes/light.css b/themes/light.css
index c3092723d..c639d888d 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
   margin: 0px;
   border-width: 0px;
 }
-body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed {
+body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
+@media screen and (min-width: 1500px) {
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+    display: grid;
+    grid-template-columns: repeat(2, 0.5fr);
+    background-color: #f5f5f5;
+    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 {
+    background: white;
+    border: 1px solid #ddd;
+  }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+    border: 0;
+  }
+}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #ddd;
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index a47d61dba..645ba13d3 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -751,10 +751,33 @@ body.ttrss_main {
 		border-width : 0px;
 	}
 
-	#headlines-frame[is-vfeed="0"] .header .feed {
+	#headlines-frame[data-is-vfeed="false"] .header .feed {
 		display : none;
 	}
 
+	@media screen and (min-width: 1500px) {
+		#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+			display : grid;
+			grid-template-columns: repeat(2, 0.5fr);
+			background-color: @color-panel-bg;
+			grid-gap : 8px;
+			padding : 8px;
+
+			.header[stuck] {
+				top : -8px;
+			}
+
+			.cdm.expanded {
+				background : @default-bg;
+				border : 1px solid @border-default;
+
+				.footer {
+					border : 0;
+				}
+			}
+		}
+	}
+
 	#headlines-frame {
 		padding : 0px;
 		border: 0px @border-default;
diff --git a/themes/night.css b/themes/night.css
index 7c1b3a874..a12b14c01 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -645,9 +645,28 @@ body.ttrss_main #headlines-wrap-inner {
   margin: 0px;
   border-width: 0px;
 }
-body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed {
+body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
+@media screen and (min-width: 1500px) {
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+    display: grid;
+    grid-template-columns: repeat(2, 0.5fr);
+    background-color: #222;
+    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 {
+    background: #333;
+    border: 1px solid #222;
+  }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+    border: 0;
+  }
+}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #222;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index b0bcfd348..e4d7894c3 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -645,9 +645,28 @@ body.ttrss_main #headlines-wrap-inner {
   margin: 0px;
   border-width: 0px;
 }
-body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed {
+body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
   display: none;
 }
+@media screen and (min-width: 1500px) {
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+    display: grid;
+    grid-template-columns: repeat(2, 0.5fr);
+    background-color: #222;
+    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 {
+    background: #333;
+    border: 1px solid #222;
+  }
+  body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
+    border: 0;
+  }
+}
 body.ttrss_main #headlines-frame {
   padding: 0px;
   border: 0px #222;