grid: add a header icon (and a hotkey) to toggle article span entire row

3 files changed, 22 insertions, 3 deletions

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 = {
 							<span class="updated" title="${hl.imported}">${hl.updated}</span>
 
 							<div class="right">
+								<i class="material-icons icon-grid-span" title="${__("Span all columns")}" onclick="Article.cdmToggleGridSpan(${hl.id})">fullscreen</i>
 								<i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
 
 								<span style="cursor : pointer" title="${App.escapeHtml(hl.feed_title)}" onclick="Feeds.open({feed:${hl.feed_id}})">