From ddfa39015e374f7bee0d5b241391c87752db2dc4 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Wed, 10 Mar 2021 08:33:56 +0300 Subject: experimental: add preference to show combined mode headlines as a 2 column grid --- themes/compact.css | 21 ++++++++++++++++++++- themes/compact_night.css | 21 ++++++++++++++++++++- themes/light.css | 21 ++++++++++++++++++++- themes/light/tt-rss.less | 25 ++++++++++++++++++++++++- themes/night.css | 21 ++++++++++++++++++++- themes/night_blue.css | 21 ++++++++++++++++++++- 6 files changed, 124 insertions(+), 6 deletions(-) (limited to 'themes') 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; -- cgit v1.2.3