Commit 4e6ec20947fcc765efbf7a8e5947553f574943da
have cards arrive more gently
mix irving committed on 2/13/2018, 11:36:38 PMParent: 140bd2aa4c9baa0075ccea378b2376a4c90cf8fc
Files changed
app/html/blogCard.js | changed |
app/html/blogCard.mcss | changed |
app/html/channelCard.mcss | changed |
app/html/comments.mcss | changed |
app/page/blogIndex.mcss | changed |
app/page/blogSearch.mcss | changed |
app/page/blogShow.mcss | changed |
app/page/channelShow.mcss | changed |
app/page/channelSubscriptions.mcss | changed |
app/page/settings.mcss | changed |
app/page/userShow.mcss | changed |
styles/mixins.js | changed |
app/html/blogCard.js | ||
---|---|---|
@@ -1,6 +1,6 @@ | ||
1 | 1 … | var nest = require('depnest') |
2 | -var h = require('mutant/h') | |
2 … | +var { h, Array: MutantArray } = require('mutant') | |
3 | 3 … | // var maxBy = require('lodash/maxBy') |
4 | 4 … | // var markdown = require('ssb-markdown') |
5 | 5 … | // var ref = require('ssb-ref') |
6 | 6 … | // var htmlEscape = require('html-escape') |
@@ -103,11 +103,13 @@ | ||
103 | 103 … | h('i.fa.fa-file-text-o') |
104 | 104 … | ]) |
105 | 105 … | } |
106 | 106 … | |
107 | - const className = blog.unread ? '-unread' : '' | |
107 … | + var classList = MutantArray(['-arriving']) | |
108 … | + if (blog.unread) classList.push('-unread') | |
109 … | + setImmediate(() => classList.delete('-arriving')) | |
108 | 110 … | |
109 | - var b = h('BlogCard', { id, className, 'ev-click': onClick }, [ | |
111 … | + var b = h('BlogCard', { id, classList, 'ev-click': onClick }, [ | |
110 | 112 … | h('div.context', [ |
111 | 113 … | api.about.html.avatar(author, 'tiny'), |
112 | 114 … | h('div.name', api.about.obs.name(author)), |
113 | 115 … | api.message.html.timeago(blog) |
app/html/blogCard.mcss | ||
---|---|---|
@@ -1,5 +1,10 @@ | ||
1 | 1 … | BlogCard { |
2 … | + -arriving { | |
3 … | + opacity: 0 | |
4 … | + $borderBottomLight | |
5 … | + } | |
6 … | + | |
2 | 7 … | padding: 1.5rem 0 |
3 | 8 … | $backgroundPrimaryText |
4 | 9 … | |
5 | 10 … | border: 1px solid #fff |
app/html/channelCard.mcss | ||
---|---|---|
@@ -2,9 +2,9 @@ | ||
2 | 2 … | $backgroundPrimaryText |
3 | 3 … | padding: 2rem 1.5rem 2rem 1.5rem |
4 | 4 … | flex-basis: 100% |
5 | 5 … | |
6 | - border-bottom: 1px solid rgba(0,0,0, .1) | |
6 … | + $borderBottomLight | |
7 | 7 … | transition: all .5s ease |
8 | 8 … | |
9 | 9 … | div.content { |
10 | 10 … | padding: 2rem 0 |
app/html/comments.mcss | ||
---|---|---|
@@ -19,9 +19,9 @@ | ||
19 | 19 … | |
20 | 20 … | div.right { |
21 | 21 … | flex-grow: 1 |
22 | 22 … | |
23 | - border-bottom: 1px solid gainsboro | |
23 … | + $borderBottomLight | |
24 | 24 … | padding-bottom: 1rem |
25 | 25 … | margin-bottom: 1rem |
26 | 26 … | |
27 | 27 … | section.context { |
app/page/blogIndex.mcss | ||
---|---|---|
@@ -8,9 +8,9 @@ | ||
8 | 8 … | |
9 | 9 … | section.content { |
10 | 10 … | div.BlogCard { |
11 | 11 … | flex-basis: 100% |
12 | - border-bottom: 1px solid rgba(0,0,0, .1) | |
12 … | + $borderBottomLight | |
13 | 13 … | |
14 | 14 … | :last-child { |
15 | 15 … | border-bottom: none |
16 | 16 … | } |
app/page/blogSearch.mcss | ||
---|---|---|
@@ -46,9 +46,9 @@ | ||
46 | 46 … | section.content { |
47 | 47 … | div.BlogCard { |
48 | 48 … | flex-basis: 100% |
49 | 49 … | |
50 | - border-bottom: 1px solid gainsboro | |
50 … | + $borderBottomLight | |
51 | 51 … | |
52 | 52 … | :last-child { |
53 | 53 … | border-bottom: none |
54 | 54 … | } |
app/page/blogShow.mcss | ||
---|---|---|
@@ -77,9 +77,9 @@ | ||
77 | 77 … | |
78 | 78 … | hr { |
79 | 79 … | margin: 0 |
80 | 80 … | border: none |
81 | - border-bottom: 1px solid gainsboro | |
81 … | + $borderBottomLight | |
82 | 82 … | } |
83 | 83 … | } |
84 | 84 … | |
85 | 85 … | section.blog { |
app/page/channelShow.mcss | ||
---|---|---|
@@ -48,9 +48,9 @@ | ||
48 | 48 … | |
49 | 49 … | div.BlogCard { |
50 | 50 … | flex-basis: 100% |
51 | 51 … | |
52 | - border-bottom: 1px solid gainsboro | |
52 … | + $borderBottomLight | |
53 | 53 … | |
54 | 54 … | :last-child { |
55 | 55 … | border-bottom: none |
56 | 56 … | } |
app/page/channelSubscriptions.mcss | ||
---|---|---|
@@ -5,9 +5,9 @@ | ||
5 | 5 … | margin: 0 auto |
6 | 6 … | padding: .5rem 2rem |
7 | 7 … | |
8 | 8 … | div.ChannelCard { |
9 | - border-bottom: 1px solid rgba(0,0,0, .1) | |
9 … | + $borderBottomLight | |
10 | 10 … | } |
11 | 11 … | |
12 | 12 … | div.Button { |
13 | 13 … | max-width: 20rem |
app/page/settings.mcss | |||
---|---|---|---|
@@ -10,9 +10,9 @@ | |||
10 | 10 … | font-size: 1.5rem | |
11 | 11 … | font-weight: 300 | |
12 | 12 … | ||
13 | 13 … | padding-bottom: 1rem | |
14 | - border-bottom: 1px solid gainsboro | ||
14 … | + $borderBottomLight | ||
15 | 15 … | margin-top: 0 | |
16 | 16 … | margin-bottom: 4rem | |
17 | 17 … | } | |
18 | 18 … |
Built with git-ssb-web