Browse Source

small stuck header fixes in grid mode

master
Andrew Dolgov 1 year ago
parent
commit
f58879c1dc
  1. 4
      js/Headlines.js
  2. 11
      themes/compact.css
  3. 11
      themes/compact_night.css
  4. 11
      themes/light.css
  5. 2
      themes/light/cdm.less
  6. 9
      themes/light/tt-rss.less
  7. 11
      themes/night.css
  8. 11
      themes/night_blue.css

4
js/Headlines.js

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

11
themes/compact.css

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

11
themes/compact_night.css

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

11
themes/light.css

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

2
themes/light/cdm.less

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

9
themes/light/tt-rss.less

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

11
themes/night.css

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

11
themes/night_blue.css

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

Loading…
Cancel
Save