diff --git a/template/index.html b/template/index.html index fad519e..429db63 100644 --- a/template/index.html +++ b/template/index.html @@ -8,7 +8,7 @@
-
+
-
+
- Police confiscates illegal Antimatter from scientists + {{entry.title}}
-
three
+
+
+

{{entrySelectedDetails.title}}

+
+
{{ feedsById[entrySelectedDetails.feed_id].title }}
+ +
+
+
+ content goes here +
+
+
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js index 1d0e144..149c1c2 100644 --- a/template/static/javascripts/app.js +++ b/template/static/javascripts/app.js @@ -31,12 +31,10 @@ new Vue({ {'id': '789', 'title': 'Marques Brownlee: ‘Reflecting on the Color of My Skin’', 'status': 'read', 'feed_id': 2, 'date': 1592250298}, ], 'entrySelected': null, + 'entrySelectedDetails': {}, } }, computed: { - feedsById: function() { - return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {}) - }, foldersWithFeeds: function() { var feedsByFolders = this.feeds.reduce(function(folders, feed) { if (!folders[feed.folder_id]) @@ -52,6 +50,12 @@ new Vue({ folders.push({id: null, feeds: feedsByFolders[null]}) return folders }, + feedsById: function() { + return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {}) + }, + entriesById: function() { + return this.entries.reduce(function(acc, entry) { acc[entry.id] = entry; return acc }, {}) + }, }, watch: { 'feedSelected': function(newVal, oldVal) { @@ -59,6 +63,9 @@ new Vue({ var type = parts[0] var guid = parts[1] }, + 'entrySelected': function(newVal, oldVal) { + this.entrySelectedDetails = this.entriesById[newVal] + }, }, methods: { toggleFolderExpanded: function(folder) { diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css index 4e546c5..e53bad1 100644 --- a/template/static/stylesheets/app.css +++ b/template/static/stylesheets/app.css @@ -4,6 +4,7 @@ .wrapper { max-width: 1368px; + margin: 0 auto; } .nav-icon {