From d4e015c89e6d0a6ac27a3b6f8bdc2d9b10e955f9 Mon Sep 17 00:00:00 2001 From: Nazar Kanaev Date: Mon, 15 Jun 2020 15:06:29 +0100 Subject: [PATCH] basic nav functionality --- template/index.html | 64 ++++++++++++++--------------- template/static/images/rss.svg | 1 + template/static/javascripts/app.js | 53 +++++++++++++++++++++++- template/static/stylesheets/app.css | 30 +++++++++++--- 4 files changed, 108 insertions(+), 40 deletions(-) create mode 100644 template/static/images/rss.svg diff --git a/template/index.html b/template/index.html index c0c6523..43f4c82 100644 --- a/template/index.html +++ b/template/index.html @@ -5,50 +5,44 @@ - - -
+
-
- - All - -
-
- - Unread - -
-
- - Starred - 50 -
-
-
-
+
+ + diff --git a/template/static/images/rss.svg b/template/static/images/rss.svg new file mode 100644 index 0000000..c9a1368 --- /dev/null +++ b/template/static/images/rss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js index 7728117..20e39c2 100644 --- a/template/static/javascripts/app.js +++ b/template/static/javascripts/app.js @@ -1 +1,52 @@ -console.log("hello") +'use strict'; + +var FILTERS = [ + {'title': 'All', 'value': 'all', 'icon': 'circle-full'}, + {'title': 'Unread', 'value': 'unread', 'icon': 'circle'}, + {'title': 'Starred', 'value': 'starred', 'icon': 'star'}, +] + + +new Vue({ + el: '#app', + data: function() { + return { + 'filters': FILTERS, + 'filterSelected': 'all', + 'folders': [ + {'id': 1, 'title': 'Tech', 'is_expanded': false}, + {'id': 2, 'title': 'News', 'is_expanded': true}, + ], + 'feeds': [ + {'id': '1', 'title': 'news.ycombinator.com', 'folder_id': 1}, + {'id': '2', 'title': '/r/programming', 'folder_id': 1}, + {'id': '3', 'title': 'BBC', 'folder_id': 2}, + {'id': '4', 'title': 'The Guardian', 'folder_id': 2}, + {'id': '5', 'title': 'Random Stuff', 'folder_id': null}, + ], + 'feedSelected': null, + } + }, + computed: { + foldersWithFeeds: function() { + var feedsByFolders = this.feeds.reduce(function(folders, feed) { + if (!folders[feed.folder_id]) + folders[feed.folder_id] = [feed] + else + folders[feed.folder_id].push(feed) + return folders + }, {}) + var folders = this.folders.slice().map(function(folder) { + folder.feeds = feedsByFolders[folder.id] + return folder + }) + folders.push({id: null, feeds: feedsByFolders[null]}) + return folders + }, + }, + methods: { + toggleFolderExpanded: function(folder) { + folder.is_expanded = !folder.is_expanded + } + } +}) diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css index 9243588..4e546c5 100644 --- a/template/static/stylesheets/app.css +++ b/template/static/stylesheets/app.css @@ -1,12 +1,16 @@ +[v-cloak] { + display: none !important; +} + .wrapper { max-width: 1368px; } .nav-icon { - width: 16px; - height: 16px; - min-width: 16px; - margin-right: 8px; + width: 14px; + height: 14px; + min-width: 14px; + margin-right: 7px; } .feed-icon { @@ -28,11 +32,27 @@ border-radius: 4px; } +.nav-select { + position: relative; +} + +.nav-select input { + opacity: 0; + position: absolute; + z-index: -1; + top: 0; left: 0; +} + .nav-item:hover, .feed-item:hover { background-color: #f8f9fa; cursor: pointer; } -.nav-item:active, .feed-item:active { + +.feed-item:active, .nav-select input:checked + .nav-item { background-color: #007bff; color: white; } + +.expanded { + transform: rotate(90deg); +}