diff --git a/classes/rpc.php b/classes/rpc.php
index 59349a5f7..bde0b1e46 100755
--- a/classes/rpc.php
+++ b/classes/rpc.php
@@ -664,6 +664,7 @@ class RPC extends Handler_Protected {
"a e" => "toggle_full_text",
"e" => "email_article",
"a q" => "close_article",
+ "a s" => "article_span_grid",
"a a" => "select_all",
"a u" => "select_unread",
"a U" => "select_marked",
diff --git a/js/App.js b/js/App.js
index 649571593..e2da5433b 100644
--- a/js/App.js
+++ b/js/App.js
@@ -1204,6 +1204,9 @@ const App = {
Headlines.renderAgain();
});
};
+ this.hotkey_actions["article_span_grid"] = () => {
+ Article.cdmToggleGridSpan(Article.getActive());
+ };
}
},
openPreferences: function(tab) {
diff --git a/js/Article.js b/js/Article.js
index ed74051a6..5c39240c7 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -93,6 +93,19 @@ const Article = {
w.opener = null;
w.location = url;
},
+ cdmToggleGridSpan: function(id) {
+ const row = App.byId(`RROW-${id}`);
+
+ if (row) {
+
+ if (row.style.gridColumn != '1 / -1')
+ row.style.gridColumn = '1 / -1';
+ else
+ row.style.gridColumn = '';
+
+ this.cdmMoveToId(id);
+ }
+ },
cdmUnsetActive: function (event) {
const row = App.byId(`RROW-${Article.getActive()}`);
@@ -389,10 +402,12 @@ const Article = {
const ctr = App.byId("headlines-frame");
const row = App.byId(`RROW-${id}`);
- if (!row || !ctr) return;
+ if (ctr && row) {
+ const grid_gap = parseInt(window.getComputedStyle(ctr).gridGap) || 0;
- if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
- ctr.scrollTop = row.offsetTop;
+ if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
+ ctr.scrollTop = row.offsetTop - grid_gap;
+ }
}
},
setActive: function (id) {
diff --git a/js/Headlines.js b/js/Headlines.js
index 36cff4bc8..65cd2480c 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -506,6 +506,7 @@ const Headlines = {
${hl.updated}
+ fullscreen
${Article.getScorePic(hl.score)}
diff --git a/themes/compact.css b/themes/compact.css
index 02c3c8328..92f9000e7 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -680,6 +680,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
border-bottom-width: 0;
padding: 4px;
}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span {
+ display: inline;
+}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
display: none;
}
@@ -1031,10 +1034,14 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main i.icon-score {
+body.ttrss_main i.icon-score,
+body.ttrss_main i.icon-grid-span {
cursor: pointer;
color: #777;
}
+body.ttrss_main .icon-grid-span {
+ display: none;
+}
body.ttrss_main .panel {
border: 1px solid #ddd;
background: #f5f5f5;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index d941c4391..1c118be1a 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -680,6 +680,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
border-bottom-width: 0;
padding: 4px;
}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span {
+ display: inline;
+}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
display: none;
}
@@ -1031,10 +1034,14 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main i.icon-score {
+body.ttrss_main i.icon-score,
+body.ttrss_main i.icon-grid-span {
cursor: pointer;
color: #999;
}
+body.ttrss_main .icon-grid-span {
+ display: none;
+}
body.ttrss_main .panel {
border: 1px solid #222;
background: #222;
diff --git a/themes/light.css b/themes/light.css
index 9d8fe9dc2..04e58c776 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -680,6 +680,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
border-bottom-width: 0;
padding: 4px;
}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span {
+ display: inline;
+}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
display: none;
}
@@ -1031,10 +1034,14 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main i.icon-score {
+body.ttrss_main i.icon-score,
+body.ttrss_main i.icon-grid-span {
cursor: pointer;
color: #777;
}
+body.ttrss_main .icon-grid-span {
+ display: none;
+}
body.ttrss_main .panel {
border: 1px solid #ddd;
background: #f5f5f5;
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 688f34010..cc9a66bd6 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -792,6 +792,10 @@ body.ttrss_main {
border-bottom-width : 0;
padding : 4px;
+ .icon-grid-span {
+ display : inline;
+ }
+
.feed {
display : none;
}
@@ -1220,11 +1224,16 @@ body.ttrss_main {
opacity : 0.5;
}*/
- i.icon-score {
+ i.icon-score, i.icon-grid-span {
cursor : pointer;
color : @color-icon;
}
+ // only shown in grid mode
+ .icon-grid-span {
+ display : none;
+ }
+
.panel {
border : 1px solid @border-default;
background : @color-panel-bg;
diff --git a/themes/night.css b/themes/night.css
index 5c5c47289..4814ed5e2 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -681,6 +681,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
border-bottom-width: 0;
padding: 4px;
}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span {
+ display: inline;
+}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
display: none;
}
@@ -1032,10 +1035,14 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main i.icon-score {
+body.ttrss_main i.icon-score,
+body.ttrss_main i.icon-grid-span {
cursor: pointer;
color: #999;
}
+body.ttrss_main .icon-grid-span {
+ display: none;
+}
body.ttrss_main .panel {
border: 1px solid #222;
background: #222;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index c10c0a92d..9520f5ca6 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -681,6 +681,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"
border-bottom-width: 0;
padding: 4px;
}
+body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span {
+ display: inline;
+}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed {
display: none;
}
@@ -1032,10 +1035,14 @@ body.ttrss_main .score-high i.icon-score {
body.ttrss_main .score-low i.icon-score {
color: #500;
}
-body.ttrss_main i.icon-score {
+body.ttrss_main i.icon-score,
+body.ttrss_main i.icon-grid-span {
cursor: pointer;
color: #999;
}
+body.ttrss_main .icon-grid-span {
+ display: none;
+}
body.ttrss_main .panel {
border: 1px solid #222;
background: #222;