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

small stuck header fixes in grid mode

This commit is contained in:
Andrew Dolgov 2021-03-10 12:10:11 +03:00
parent bdc72e5b63
commit f58879c1dc
8 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/Headlines.js
View File

@ -20,10 +20,10 @@ const Headlines = {
const header = entry.target.nextElementSibling; const header = entry.target.nextElementSibling;
if (entry.intersectionRatio == 0) { if (entry.intersectionRatio == 0) {
header.setAttribute("stuck", "1"); header.setAttribute("data-is-stuck", "true");
} else if (entry.intersectionRatio == 1) { } else if (entry.intersectionRatio == 1) {
header.removeAttribute("stuck"); header.removeAttribute("data-is-stuck");
} }
//console.log(entry.target, header, entry.intersectionRatio); //console.log(entry.target, header, entry.intersectionRatio);

11
themes/compact.css
View File

@ -655,9 +655,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
grid-gap: 8px; grid-gap: 8px;
padding: 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 .header,
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
background: white; background: white;
@ -668,6 +665,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
border-top-width: 0; border-top-width: 0;
padding: 0 4px 4px 4px; 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 { 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; border-bottom-width: 0;
padding: 4px; padding: 4px;
@ -1468,8 +1469,8 @@ div.cdm.expandable:not(.active) .content,
div.cdm.expandable:not(.active) .collapse { div.cdm.expandable:not(.active) .collapse {
display: none; display: none;
} }
div.cdm.expandable.active .header[stuck], div.cdm.expandable.active .header[data-is-stuck],
div.cdm.expanded .header[stuck] { div.cdm.expanded .header[data-is-stuck] {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #ddd; border: 0 solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;

11
themes/compact_night.css
View File

@ -655,9 +655,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
grid-gap: 8px; grid-gap: 8px;
padding: 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 .header,
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
background: #333; background: #333;
@ -668,6 +665,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
border-top-width: 0; border-top-width: 0;
padding: 0 4px 4px 4px; 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 { 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; border-bottom-width: 0;
padding: 4px; padding: 4px;
@ -1468,8 +1469,8 @@ div.cdm.expandable:not(.active) .content,
div.cdm.expandable:not(.active) .collapse { div.cdm.expandable:not(.active) .collapse {
display: none; display: none;
} }
div.cdm.expandable.active .header[stuck], div.cdm.expandable.active .header[data-is-stuck],
div.cdm.expanded .header[stuck] { div.cdm.expanded .header[data-is-stuck] {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #222; border: 0 solid #222;
border-bottom-width: 1px; border-bottom-width: 1px;

11
themes/light.css
View File

@ -655,9 +655,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
grid-gap: 8px; grid-gap: 8px;
padding: 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 .header,
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
background: white; background: white;
@ -668,6 +665,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
border-top-width: 0; border-top-width: 0;
padding: 0 4px 4px 4px; 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 { 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; border-bottom-width: 0;
padding: 4px; padding: 4px;
@ -1468,8 +1469,8 @@ div.cdm.expandable:not(.active) .content,
div.cdm.expandable:not(.active) .collapse { div.cdm.expandable:not(.active) .collapse {
display: none; display: none;
} }
div.cdm.expandable.active .header[stuck], div.cdm.expandable.active .header[data-is-stuck],
div.cdm.expanded .header[stuck] { div.cdm.expanded .header[data-is-stuck] {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #ddd; border: 0 solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;

2
themes/light/cdm.less
View File

@ -323,7 +323,7 @@ div.cdm.expandable:not(.active) {
div.cdm { div.cdm {
&.expandable.active, &.expandable.active,
&.expanded { &.expanded {
.header[stuck] { .header[data-is-stuck] {
box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1); box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1);
border: 0 solid @border-default; border: 0 solid @border-default;
border-bottom-width: 1px; border-bottom-width: 1px;

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

@ -763,10 +763,6 @@ body.ttrss_main {
grid-gap : 8px; grid-gap : 8px;
padding : 8px; padding : 8px;
.header[stuck] {
top : -8px;
}
.cdm.expanded { .cdm.expanded {
.header, .content { .header, .content {
@ -780,6 +776,11 @@ body.ttrss_main {
padding : 0 4px 4px 4px; padding : 0 4px 4px 4px;
} }
.header[data-is-stuck] {
top : -8px;
border-bottom-width: 1px;
}
.header { .header {
border-bottom-width : 0; border-bottom-width : 0;
padding : 4px; padding : 4px;

11
themes/night.css
View File

@ -656,9 +656,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
grid-gap: 8px; grid-gap: 8px;
padding: 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 .header,
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
background: #333; background: #333;
@ -669,6 +666,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
border-top-width: 0; border-top-width: 0;
padding: 0 4px 4px 4px; 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 { 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; border-bottom-width: 0;
padding: 4px; padding: 4px;
@ -1469,8 +1470,8 @@ div.cdm.expandable:not(.active) .content,
div.cdm.expandable:not(.active) .collapse { div.cdm.expandable:not(.active) .collapse {
display: none; display: none;
} }
div.cdm.expandable.active .header[stuck], div.cdm.expandable.active .header[data-is-stuck],
div.cdm.expanded .header[stuck] { div.cdm.expanded .header[data-is-stuck] {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #222; border: 0 solid #222;
border-bottom-width: 1px; border-bottom-width: 1px;

11
themes/night_blue.css
View File

@ -656,9 +656,6 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
grid-gap: 8px; grid-gap: 8px;
padding: 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 .header,
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content {
background: #333; background: #333;
@ -669,6 +666,10 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
border-top-width: 0; border-top-width: 0;
padding: 0 4px 4px 4px; 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 { 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; border-bottom-width: 0;
padding: 4px; padding: 4px;
@ -1469,8 +1470,8 @@ div.cdm.expandable:not(.active) .content,
div.cdm.expandable:not(.active) .collapse { div.cdm.expandable:not(.active) .collapse {
display: none; display: none;
} }
div.cdm.expandable.active .header[stuck], div.cdm.expandable.active .header[data-is-stuck],
div.cdm.expanded .header[stuck] { div.cdm.expanded .header[data-is-stuck] {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #222; border: 0 solid #222;
border-bottom-width: 1px; border-bottom-width: 1px;