james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic entry view ui

Browse Source
This commit is contained in:
Nazar Kanaev 2020-06-15 21:38:05 +01:00 committed by nkanaev
parent d7a7e5747c
commit 0f9214ffeb
3 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
template/index.html
View File

@ -8,7 +8,7 @@
</head>
<body>
<div class="wrapper d-flex vh-100" id="app" v-cloak>
<div class="vh-100 overflow-auto border-right" style="width: 300px;">
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
<div class="mx-2 my-2">
<div class="mb-4">
<label class="nav-select d-block mb-1" v-for="filter in filters">
@ -48,7 +48,7 @@
</div>
</div>
</div>
<div class="vh-100 overflow-auto border-right" style="width: 300px;">
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
<div class="my-2 mx-2">
<label class="nav-select mb-1" v-for="entry in entries" :class="{'text-muted': entry.status === 'read'}">
<input type="radio" name="entry" :value="entry.id" v-model="entrySelected">
@ -62,14 +62,26 @@
<small class="">{{formatDate(entry.date)}}</small>
</div>
<span class="font-weight-bold">
Police confiscates illegal Antimatter from scientists
{{entry.title}}
</span>
</div>
</div>
</label>
</div>
</div>
<div class="m-3">three</div>
<div class="vh-100 overflow-auto w-100">
<div v-if="entrySelected" class="mx-3 my-2">
<h3>{{entrySelectedDetails.title}}</h3>
<div class="text-muted">
<div>{{ feedsById[entrySelectedDetails.feed_id].title }}</div>
<time>{{ formatDate(entrySelectedDetails.date) }}</time>
</div>
<hr>
<div>
content goes here
</div>
</div>
</div>
</div>
<script src="./static/javascripts/vue.min.js"></script>
<script src="./static/javascripts/app.js"></script>

13
template/static/javascripts/app.js
View File

@ -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) {

1
template/static/stylesheets/app.css
View File

@ -4,6 +4,7 @@
.wrapper {
max-width: 1368px;
margin: 0 auto;
}
.nav-icon {