git ssb

2+

mixmix / ticktack



Commit d01f8cc07bc8311ed0717219f766c6a4dd7cec7a

Browse Files

make search page, refactor mutant-scroll a little

mix irving committed on 11/30/2017, 2:13:28 AM
Parent: e521f4fb1c6acfda5614b65c29e094159a72a2b6

Files changed

app/html/app.mcsschanged
app/html/blogHeader.jschanged
app/html/header.jschanged
app/index.jschanged
app/page/blogIndex.mcsschanged
app/page/blogSearch.jsadded
app/page/blogSearch.mcssadded
package-lock.jsonchanged
package.jsonchanged
router/sync/routes.jschanged
app/html/app.mcssView
@@ -1,7 +1,7 @@
11 App {
22 overflow: hidden
3- position: absolute
3+ position: fixed
44 top: 0
55 bottom: 0
66 right: 0
77 left: 0
app/html/blogHeader.jsView
@@ -13,17 +13,17 @@
1313 return nest('app.html.blogHeader', (location) => {
1414 const strings = api.translations.sync.strings()
1515 const goTo = (loc) => () => api.history.sync.push(loc)
1616
17- if (location.page === 'blogIndex') {
17+ if (location.page === 'blogIndex' || location.page === 'blogSearch') {
1818 return h('BlogHeader', [
1919 h('div.left', [
2020 h('div', {
2121 className: location.page === 'blogIndex' ? '-active' : '',
2222 'ev-click': goTo({ page: 'blogIndex' })
2323 }, strings.blogHeader.blogsAll),
2424 h('div', {
25- className: location.page === 'blogSearch' ? 'active' : '',
25+ className: location.page === 'blogSearch' ? '-active' : '',
2626 'ev-click': goTo({ page: 'blogSearch' })
2727 }, strings.blogHeader.blogSearch),
2828 ]),
2929 h('div.right', [
app/html/header.jsView
@@ -5,15 +5,8 @@
55 exports.gives = nest('app.html.header')
66
77 exports.needs = nest('keys.sync.id', 'first')
88
9-const FEED_PAGES = [
10- 'blogIndex',
11- 'blogNew',
12- 'threadShow', // TODO - this doesn't work (`threadSHow` isn't part of the location atm)
13- 'threadNew',
14- // 'blogSearch',
15-]
169 const SETTINGS_PAGES = [
1710 'settings',
1811 'userEdit',
1912 ]
@@ -27,16 +20,14 @@
2720
2821 return location || {}
2922 })
3023
31- const isFeed = computed(loc, loc => {
32- return FEED_PAGES.includes(loc.page) || (loc.key && loc.feed)
33- })
34-
3524 const isSettings = computed(loc, loc => {
3625 return SETTINGS_PAGES.includes(loc.page)
3726 })
3827
28+ const isFeed = computed([isSettings], isSettings => !isSettings)
29+
3930 return h('Header', [
4031 h('nav', [
4132 h('i.fa', {
4233 'ev-click': () => push({page: 'blogIndex'}),
app/index.jsView
@@ -15,8 +15,9 @@
1515 },
1616 page: {
1717 blogIndex: require('./page/blogIndex'),
1818 blogNew: require('./page/blogNew'),
19+ blogSearch: require('./page/blogSearch'),
1920 blogShow: require('./page/blogShow'),
2021 error: require('./page/error'),
2122 settings: require('./page/settings'),
2223 // channel: require('./page/channel'),
app/page/blogIndex.mcssView
@@ -1,38 +1,30 @@
11 Page -blogIndex {
22 div.content { padding: 0 }
33
44 div.Scroller.content {
5+ section.top {
6+ position: sticky
7+ left: 0
8+ right: 0
9+ top: 0
10+ }
511
6- div.wrapper {
7- display: flex
8- flex-wrap: wrap
9- justify-content: center
12+ section.content {
13+ background-color: #fff
14+ $maxWidth
15+ margin: .8rem
16+ padding: 0 2rem
1017
11- section.top {
12- position: sticky
13- left: 0
14- right: 0
15- top: 0
16- flex-basis: 100%
18+ div.BlogCard {
19+ border-bottom: 1px solid gainsboro
1720 }
21+ }
1822
19- section.content {
20- background-color: #fff
21- $maxWidth
22- margin: .8rem
23- padding: 0 2rem
24-
25- div.BlogCard {
26- border-bottom: 1px solid gainsboro
27- }
23+ section.bottom {
24+ div.Button {
25+ margin: 1rem 0
2826 }
29-
30- section.bottom {
31- div.Button {
32- margin: 1rem 0
33- }
34- }
3527 }
3628 }
3729 }
3830
app/page/blogSearch.jsView
@@ -1,0 +1,63 @@
1+const nest = require('depnest')
2+const { h } = require('mutant')
3+const pull = require('pull-stream')
4+
5+exports.gives = nest('app.page.blogSearch')
6+
7+exports.needs = nest({
8+ 'app.html.context': 'first',
9+ 'app.html.blogCard': 'first',
10+ 'app.html.blogHeader': 'first',
11+ 'app.html.scroller': 'first',
12+ 'feed.pull.public': 'first',
13+ 'history.sync.push': 'first',
14+ 'keys.sync.id': 'first',
15+ 'translations.sync.strings': 'first',
16+ 'unread.sync.isUnread': 'first'
17+})
18+
19+exports.create = (api) => {
20+ return nest('app.page.blogSearch', blogSearch)
21+
22+ function blogSearch (location) {
23+ // location here can expected to be: { page: 'blogSearch'}
24+
25+ var strings = api.translations.sync.strings()
26+
27+ var blogs = api.app.html.scroller({
28+ classList: ['content'],
29+ prepend: api.app.html.blogHeader(location),
30+ stream: api.feed.pull.public,
31+ filter: () => pull(
32+ pull.filter(msg => {
33+ const type = msg.value.content.type
34+ return type === 'post' || type === 'blog'
35+ }),
36+ pull.filter(msg => !msg.value.content.root) // show only root messages
37+ ),
38+ // FUTURE : if we need better perf, we can add a persistent cache. At the moment this page is fast enough though.
39+ // See implementation of app.html.context for example
40+ // store: recentMsgCache,
41+ // updateTop: updateRecentMsgCache,
42+ // updateBottom: updateRecentMsgCache,
43+ render
44+ })
45+
46+ return h('Page -blogSearch', {title: strings.home}, [
47+ api.app.html.context(location),
48+ blogs
49+ ])
50+ }
51+
52+
53+ function render (blog) {
54+ const { recps, channel } = blog.value.content
55+ var onClick
56+ if (channel && !recps)
57+ onClick = (ev) => api.history.sync.push(Object.assign({}, blog, { page: 'blogShow' }))
58+
59+ return api.app.html.blogCard(blog, { onClick })
60+ }
61+}
62+
63+
app/page/blogSearch.mcssView
@@ -1,0 +1,32 @@
1+Page -blogSearch {
2+ div.content { padding: 0 }
3+
4+ div.Scroller.content {
5+ section.top {
6+ position: sticky
7+ left: 0
8+ right: 0
9+ top: 0
10+ flex-basis: 100%
11+ }
12+
13+ section.content {
14+ background-color: #fff
15+ $maxWidth
16+ margin: .8rem
17+ padding: 0 2rem
18+
19+ div.BlogCard {
20+ border-bottom: 1px solid gainsboro
21+ }
22+ }
23+
24+ section.bottom {
25+ div.Button {
26+ margin: 1rem 0
27+ }
28+ }
29+ }
30+}
31+
32+
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 211063 bytes
New file size: 211063 bytes
package.jsonView
@@ -34,9 +34,9 @@
3434 "markdown-summary": "^1.0.3",
3535 "micro-css": "^2.0.1",
3636 "morphdom": "^2.3.3",
3737 "mutant": "^3.21.2",
38- "mutant-scroll": "0.0.3",
38+ "mutant-scroll": "0.0.4",
3939 "open-external": "^0.1.1",
4040 "patch-history": "^1.0.0",
4141 "patch-profile": "^1.0.2",
4242 "patch-settings": "^1.0.0",
router/sync/routes.jsView
@@ -8,8 +8,9 @@
88 exports.needs = nest({
99 'app.page.error': 'first',
1010 'app.page.blogIndex': 'first',
1111 'app.page.blogNew': 'first',
12+ 'app.page.blogSearch': 'first',
1213 'app.page.blogShow': 'first',
1314 'app.page.settings': 'first',
1415 // 'app.page.channel': 'first',
1516 // 'app.page.groupFind': 'first',
@@ -34,8 +35,9 @@
3435
3536 // Blog pages
3637 [ location => location.page === 'blogIndex', pages.blogIndex ],
3738 [ location => location.page === 'blogNew', pages.blogNew ],
39+ [ location => location.page === 'blogSearch', pages.blogSearch ],
3840 [ location => location.page === 'blogShow', pages.blogShow ],
3941 [ location => isMsg(location.key) && get(location, 'value.content.type') === 'blog', pages.blogShow ],
4042 [ location => {
4143 return isMsg(location.key)

Built with git-ssb-web