mirror of
https://github.com/nkanaev/yarr.git
synced 2025-05-24 00:33:14 +00:00
basic nav functionality
This commit is contained in:
Nazar Kanaev
nkanaev
parent
0c711c5825
commit
d4e015c89e
@ -5,50 +5,44 @@
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="./static/stylesheets/app.css">
|
||||
<script src="./static/javascripts/vue.min.js"></script>
|
||||
<script src="./static/javascripts/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper d-flex vh-100">
|
||||
<div class="wrapper d-flex vh-100" id="app" v-cloak>
|
||||
<div class="vh-100 overflow-auto border-right" style="width: 300px;">
|
||||
<div class="mx-2 my-2">
|
||||
<div class="mb-4">
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/circle-full.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">All</span>
|
||||
<span class="counter text-right"></span>
|
||||
</div>
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/circle.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">Unread</span>
|
||||
<span class="counter text-right"></span>
|
||||
</div>
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/star.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">Starred</span>
|
||||
<span class="counter text-right">50</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="folder">
|
||||
<label class="nav-select d-block mb-1" v-for="filter in filters">
|
||||
<input type="radio" name="filter" :value="filter.value" v-model="filterSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/chevron-down.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">News</span>
|
||||
<img :src="'./static/images/' + filter.icon + '.svg'" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">{{filter.title}}</span>
|
||||
<span class="counter text-right"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">news.ycombinator.com</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="folder in foldersWithFeeds">
|
||||
<label class="nav-select d-block mb-1">
|
||||
<input type="radio" name="feed" :value="'folder-'+folder.id" v-model="feedSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100" v-if="folder.id">
|
||||
<img src="./static/images/chevron-right.svg"
|
||||
class="nav-icon"
|
||||
:class="{expanded: folder.is_expanded}"
|
||||
@click.prevent="toggleFolderExpanded(folder)">
|
||||
<span class="flex-fill text-left text-truncate">{{ folder.title }}</span>
|
||||
<span class="counter text-right"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">news.ycombinator.com</span>
|
||||
<span class="counter text-right">30</span>
|
||||
</label>
|
||||
<div v-show="!folder.id || folder.is_expanded" :class="{'pl-3': folder.id}">
|
||||
<label class="nav-select d-block mb-1"
|
||||
v-for="feed in folder.feeds">
|
||||
<input type="radio" name="feed" :value="'feed-'+feed.id" v-model="feedSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/rss.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
|
||||
<span class="counter text-right"></span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,5 +66,7 @@
|
||||
</div>
|
||||
<div class="m-3">three</div>
|
||||
</div>
|
||||
<script src="./static/javascripts/vue.min.js"></script>
|
||||
<script src="./static/javascripts/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
template/static/images/rss.svg
Normal file
1
template/static/images/rss.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user