valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Andrew Dolgov 2021-03-10 20:27:20 +03:00
parent 143617afb1
commit 3e1b3e8ea8
7 changed files with 64 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/Headlines.js
View File

@ -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",

15
themes/compact.css
View File

@ -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;

15
themes/compact_night.css
View File

@ -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;

15
themes/light.css
View File

@ -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;

14
themes/light/tt-rss.less
View File

@ -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 {

15
themes/night.css
View File

@ -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;

15
themes/night_blue.css
View File

@ -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;