From 3e1b3e8ea8098847d9769b37c340cb3255b5399b Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Wed, 10 Mar 2021 20:27:20 +0300 Subject: [PATCH] grid: add workaround for a single loaded headline not spanning all columns --- js/Headlines.js | 7 ++++--- themes/compact.css | 15 ++++++++++----- themes/compact_night.css | 15 ++++++++++----- themes/light.css | 15 ++++++++++----- themes/light/tt-rss.less | 14 ++++++++++---- themes/night.css | 15 ++++++++++----- themes/night_blue.css | 15 ++++++++++----- 7 files changed, 64 insertions(+), 32 deletions(-) diff --git a/js/Headlines.js b/js/Headlines.js index 08192ea6b..4cedce491 100755 --- a/js/Headlines.js +++ b/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", diff --git a/themes/compact.css b/themes/compact.css index 768cb0a6a..09f9d7876 100644 --- a/themes/compact.css +++ b/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; diff --git a/themes/compact_night.css b/themes/compact_night.css index 83fa2be4a..78cbe1807 100644 --- a/themes/compact_night.css +++ b/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; diff --git a/themes/light.css b/themes/light.css index 241789759..72e9552f7 100644 --- a/themes/light.css +++ b/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; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index db17647a4..fe8dd91a0 100644 --- a/themes/light/tt-rss.less +++ b/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 { diff --git a/themes/night.css b/themes/night.css index 8b4b797c5..72c4d02af 100644 --- a/themes/night.css +++ b/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; diff --git a/themes/night_blue.css b/themes/night_blue.css index a5ddb243a..c1ede396d 100644 --- a/themes/night_blue.css +++ b/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;