summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--classes/pref/prefs.php2
-rw-r--r--classes/prefs.php2
-rwxr-xr-xclasses/rpc.php2
-rw-r--r--js/Feeds.js12
-rwxr-xr-xjs/Headlines.js13
-rw-r--r--themes/compact.css21
-rw-r--r--themes/compact_night.css21
-rw-r--r--themes/light.css21
-rw-r--r--themes/light/tt-rss.less25
-rw-r--r--themes/night.css21
-rw-r--r--themes/night_blue.css21
11 files changed, 152 insertions, 9 deletions
diff --git a/classes/pref/prefs.php b/classes/pref/prefs.php
index 34e8dc85b..807a35e10 100644
--- a/classes/pref/prefs.php
+++ b/classes/pref/prefs.php
@@ -54,6 +54,7 @@ class Pref_Prefs extends Handler_Protected {
'BLOCK_SEPARATOR',
Prefs::COMBINED_DISPLAY_MODE,
Prefs::CDM_EXPANDED,
+ Prefs::CDM_ENABLE_GRID,
'BLOCK_SEPARATOR',
Prefs::CDM_AUTO_CATCHUP,
Prefs::VFEED_GROUP_BY_FEED,
@@ -117,6 +118,7 @@ class Pref_Prefs extends Handler_Protected {
Prefs::HEADLINES_NO_DISTINCT => array(__("Don't enforce DISTINCT headlines"), __("May produce duplicate entries")),
Prefs::DEBUG_HEADLINE_IDS => array(__("Show article and feed IDs"), __("In the headlines buffer")),
Prefs::DISABLE_CONDITIONAL_COUNTERS => array(__("Disable conditional counter updates"), __("May increase server load")),
+ Prefs::CDM_ENABLE_GRID => array(__("Show as grid"), __("On wider screens, if always expanded")),
];
// hidden in the main prefs UI (use to hide things that have description set above)
diff --git a/classes/prefs.php b/classes/prefs.php
index 24f0f7a80..85e7c34db 100644
--- a/classes/prefs.php
+++ b/classes/prefs.php
@@ -60,6 +60,7 @@ class Prefs {
const DEBUG_HEADLINE_IDS = "DEBUG_HEADLINE_IDS";
const DISABLE_CONDITIONAL_COUNTERS = "DISABLE_CONDITIONAL_COUNTERS";
const WIDESCREEN_MODE = "WIDESCREEN_MODE";
+ const CDM_ENABLE_GRID = "CDM_ENABLE_GRID";
private const _DEFAULTS = [
Prefs::PURGE_OLD_DAYS => [ 60, Config::T_INT ],
@@ -120,6 +121,7 @@ class Prefs {
Prefs::DEBUG_HEADLINE_IDS => [ false, Config::T_BOOL ],
Prefs::DISABLE_CONDITIONAL_COUNTERS => [ false, Config::T_BOOL ],
Prefs::WIDESCREEN_MODE => [ false, Config::T_BOOL ],
+ Prefs::CDM_ENABLE_GRID => [ false, Config::T_BOOL ],
];
const _PROFILE_BLACKLIST = [
diff --git a/classes/rpc.php b/classes/rpc.php
index 35125ae04..47fdf105a 100755
--- a/classes/rpc.php
+++ b/classes/rpc.php
@@ -431,7 +431,7 @@ class RPC extends Handler_Protected {
Prefs::ENABLE_FEED_CATS, Prefs::FEEDS_SORT_BY_UNREAD,
Prefs::CONFIRM_FEED_CATCHUP, Prefs::CDM_AUTO_CATCHUP,
Prefs::FRESH_ARTICLE_MAX_AGE, Prefs::HIDE_READ_SHOWS_SPECIAL,
- Prefs::COMBINED_DISPLAY_MODE, Prefs::DEBUG_HEADLINE_IDS] as $param) {
+ Prefs::COMBINED_DISPLAY_MODE, Prefs::DEBUG_HEADLINE_IDS, Prefs::CDM_ENABLE_GRID] as $param) {
$params[strtolower($param)] = (int) get_pref($param);
}
diff --git a/js/Feeds.js b/js/Feeds.js
index b14caeaf9..9e65a06fd 100644
--- a/js/Feeds.js
+++ b/js/Feeds.js
@@ -321,8 +321,16 @@ const Feeds = {
this._active_feed_id = id;
this._active_feed_is_cat = is_cat;
- App.byId("headlines-frame").setAttribute("feed-id", id);
- App.byId("headlines-frame").setAttribute("is-cat", is_cat ? 1 : 0);
+ const container = App.byId("headlines-frame");
+
+ // TODO @deprecated: these two should be removed (replaced with data- attributes below)
+ container.setAttribute("feed-id", id);
+ container.setAttribute("is-cat", is_cat ? 1 : 0);
+ // ^
+
+ container.setAttribute("data-feed-id", id);
+ container.setAttribute("data-is-cat", is_cat ? "true" : "false");
+ container.setAttribute("data-enable-grid", App.getInitParam("cdm_enable_grid") ? "true" : "false");
this.select(id, is_cat);
diff --git a/js/Headlines.js b/js/Headlines.js
index 8d7e06f41..8f104c951 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -431,6 +431,8 @@ const Headlines = {
this.unpack_observer.observe(e)
});
+ dijit.byId('main').resize();
+
},
render: function (headlines, hl) {
let row = null;
@@ -459,6 +461,11 @@ const Headlines = {
this.vgroup_last_feed = hl.feed_id;
}
+ const container = App.byId("headlines-frame");
+
+ container.setAttribute("data-is-cdm", App.isCombinedMode() ? "true" : "false");
+ container.setAttribute("data-is-cdm-expanded", App.getInitParam("cdm_expanded"));
+
if (App.isCombinedMode()) {
row_class += App.getInitParam("cdm_expanded") ? " expanded" : " expandable";
@@ -677,9 +684,13 @@ const Headlines = {
// also called in renderAgain() after view mode switch
Headlines.setCommonClasses();
+ /** TODO: remove @deprecated */
App.byId("headlines-frame").setAttribute("is-vfeed",
reply['headlines']['is_vfeed'] ? 1 : 0);
+ App.byId("headlines-frame").setAttribute("data-is-vfeed",
+ reply['headlines']['is_vfeed'] ? "true" : "false");
+
Article.setActive(0);
try {
@@ -820,6 +831,8 @@ const Headlines = {
// unpack visible articles, fill buffer more, etc
this.scrollHandler();
+ dijit.byId('main').resize();
+
Notify.close();
},
reverse: function () {
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;