git ssb

2+

mixmix / ticktack



Commit 4e6ec20947fcc765efbf7a8e5947553f574943da

have cards arrive more gently

mix irving committed on 2/13/2018, 11:36:38 PM
Parent: 140bd2aa4c9baa0075ccea378b2376a4c90cf8fc

Files changed

app/html/blogCard.jschanged
app/html/blogCard.mcsschanged
app/html/channelCard.mcsschanged
app/html/comments.mcsschanged
app/page/blogIndex.mcsschanged
app/page/blogSearch.mcsschanged
app/page/blogShow.mcsschanged
app/page/channelShow.mcsschanged
app/page/channelSubscriptions.mcsschanged
app/page/settings.mcsschanged
app/page/userShow.mcsschanged
styles/mixins.jschanged
app/html/blogCard.jsView
@@ -1,6 +1,6 @@
11 var nest = require('depnest')
2-var h = require('mutant/h')
2 +var { h, Array: MutantArray } = require('mutant')
33 // var maxBy = require('lodash/maxBy')
44 // var markdown = require('ssb-markdown')
55 // var ref = require('ssb-ref')
66 // var htmlEscape = require('html-escape')
@@ -103,11 +103,13 @@
103103 h('i.fa.fa-file-text-o')
104104 ])
105105 }
106106
107- const className = blog.unread ? '-unread' : ''
107 + var classList = MutantArray(['-arriving'])
108 + if (blog.unread) classList.push('-unread')
109 + setImmediate(() => classList.delete('-arriving'))
108110
109- var b = h('BlogCard', { id, className, 'ev-click': onClick }, [
111 + var b = h('BlogCard', { id, classList, 'ev-click': onClick }, [
110112 h('div.context', [
111113 api.about.html.avatar(author, 'tiny'),
112114 h('div.name', api.about.obs.name(author)),
113115 api.message.html.timeago(blog)
app/html/blogCard.mcssView
@@ -1,5 +1,10 @@
11 BlogCard {
2 + -arriving {
3 + opacity: 0
4 + $borderBottomLight
5 + }
6 +
27 padding: 1.5rem 0
38 $backgroundPrimaryText
49
510 border: 1px solid #fff
app/html/channelCard.mcssView
@@ -2,9 +2,9 @@
22 $backgroundPrimaryText
33 padding: 2rem 1.5rem 2rem 1.5rem
44 flex-basis: 100%
55
6- border-bottom: 1px solid rgba(0,0,0, .1)
6 + $borderBottomLight
77 transition: all .5s ease
88
99 div.content {
1010 padding: 2rem 0
app/html/comments.mcssView
@@ -19,9 +19,9 @@
1919
2020 div.right {
2121 flex-grow: 1
2222
23- border-bottom: 1px solid gainsboro
23 + $borderBottomLight
2424 padding-bottom: 1rem
2525 margin-bottom: 1rem
2626
2727 section.context {
app/page/blogIndex.mcssView
@@ -8,9 +8,9 @@
88
99 section.content {
1010 div.BlogCard {
1111 flex-basis: 100%
12- border-bottom: 1px solid rgba(0,0,0, .1)
12 + $borderBottomLight
1313
1414 :last-child {
1515 border-bottom: none
1616 }
app/page/blogSearch.mcssView
@@ -46,9 +46,9 @@
4646 section.content {
4747 div.BlogCard {
4848 flex-basis: 100%
4949
50- border-bottom: 1px solid gainsboro
50 + $borderBottomLight
5151
5252 :last-child {
5353 border-bottom: none
5454 }
app/page/blogShow.mcssView
@@ -77,9 +77,9 @@
7777
7878 hr {
7979 margin: 0
8080 border: none
81- border-bottom: 1px solid gainsboro
81 + $borderBottomLight
8282 }
8383 }
8484
8585 section.blog {
app/page/channelShow.mcssView
@@ -48,9 +48,9 @@
4848
4949 div.BlogCard {
5050 flex-basis: 100%
5151
52- border-bottom: 1px solid gainsboro
52 + $borderBottomLight
5353
5454 :last-child {
5555 border-bottom: none
5656 }
app/page/channelSubscriptions.mcssView
@@ -5,9 +5,9 @@
55 margin: 0 auto
66 padding: .5rem 2rem
77
88 div.ChannelCard {
9- border-bottom: 1px solid rgba(0,0,0, .1)
9 + $borderBottomLight
1010 }
1111
1212 div.Button {
1313 max-width: 20rem
app/page/settings.mcssView
@@ -10,9 +10,9 @@
1010 font-size: 1.5rem
1111 font-weight: 300
1212
1313 padding-bottom: 1rem
14- border-bottom: 1px solid gainsboro
14 + $borderBottomLight
1515 margin-top: 0
1616 margin-bottom: 4rem
1717 }
1818
app/page/userShow.mcssView
@@ -48,9 +48,9 @@
4848
4949 section.content {
5050 div.BlogCard {
5151 flex-basis: 100%
52- border-bottom: 1px solid rgba(0,0,0, .1)
52 + $borderBottomLight
5353
5454 div.context {
5555 div.Link { display: none }
5656 div.name { display: none }
styles/mixins.jsView
@@ -68,8 +68,12 @@
6868 $borderPrimary {
6969 border: 1px #2f63ad solid
7070 }
7171
72 +$borderBottomLight {
73 + border-bottom: 1px rgba(224, 224, 224 , 0.8) solid
74 +}
75 +
7276 $circleTiny {
7377 min-width: 2rem
7478 min-height: 2rem
7579 width: 2rem

Built with git-ssb-web