git ssb

2+

mixmix / ticktack



Commit 55f65b5f081677702c9c21215926ac33bbda7272

Browse Files

blog card styling

mix irving committed on 10/16/2017, 3:31:22 AM
Parent: 30cc7a8935378d1ee6fddd76239383d8da592a47

Files changed

app/html/blog-card.jschanged
app/html/blog-card.mcsschanged
app/index.jschanged
styles/button.mcsschanged
styles/mixins.jschanged
app/html/blog-card.jsView
@@ -91,41 +91,40 @@
9191 const onClick = opts.onClick || function () { api.history.sync.push(thread) }
9292 const id = `${thread.key.replace(/[^a-z0-9]/gi, '')}` //-${JSON.stringify(opts)}`
9393 // id is only here to help morphdom morph accurately
9494
95- var img = marksum.image(thread.value.content.text)
96- var m = /\!\[[^]+\]\(([^\)]+)\)/.exec(img)
95+ const { content, author, timestamp } = thread.value
9796
97+ var img = h('Thumbnail')
98+ var m = /\!\[[^]+\]\(([^\)]+)\)/.exec(marksum.image(content.text))
9899 if(m) {
99100 //Hey this works! fit an image into a specific size (see thread-card.mcss)
100101 //centered, and scaled to fit the square (works with both landscape and portrait!)
101102 //This is functional css not opinionated css, so all embedded.
102- img = h('Thumbnail')
103103 img.style = 'background-image: url("'+api.blob.sync.url(m[1])+'"); background-position:center; background-size: cover;'
104104 }
105- else img = ''
106- var title = render(marksum.title(thread.value.content.text))
107- var summary = render(marksum.summary(thread.value.content.text))
108105
109- var className = thread.unread ? '-unread': ''
106+ const title = render(marksum.title(content.text))
107+ const summary = render(marksum.summary(content.text))
108+
109+ const className = thread.unread ? '-unread': ''
110+
110111 return h('BlogCard', { id, className }, [
111112 h('div.context', [
112- api.about.html.avatar(thread.value.author),
113- ' ',
114- api.about.obs.name(thread.value.author),
115- ' ',
116- humanTime(new Date(thread.value.timestamp)),
117- ' ',
118- thread.value.content.channel ? '#'+thread.value.content.channel : null
113+ api.about.html.avatar(author),
114+ h('div.name', api.about.obs.name(author)),
115+ h('div.timeago', humanTime(new Date(timestamp))),
119116 ]),
120117 h('div.content', {'ev-click': onClick}, [
121118 img,
122- h('Text', [
119+ h('div.text', [
123120 h('h2', {innerHTML: title}),
124- h('Summary', {innerHTML: summary})
121+ content.channel
122+ ? h('Button -channel', '#'+content.channel)
123+ : '',
124+ h('div.summary', {innerHTML: summary})
125125 ])
126126 ])
127127 ])
128128 })
129129 }
130130
131-
app/html/blog-card.mcssView
@@ -1,54 +1,66 @@
11 BlogCard {
2+ padding: 1rem
3+ background-color: #fff
4+ margin-bottom: .5rem
5+
6+ border: 1px solid #fff
7+ transition: all .5s ease
8+
9+ :hover {
10+ border: 1px solid #999
11+ }
12+
213 display: flex
3-// align-items: center
414 flex-direction: column
5- margin-bottom: .5rem
615
716 div.context {
17+ font-size: .8rem
18+ margin-bottom: 1rem
19+
820 display: flex
9- margin-right: 1rem
10- font-weight: inherit
21+ align-items: center
22+
23+ div.Link {
24+ height: 2rem
25+ img.Avatar {
26+ width: 2rem
27+ height: 2rem
28+ }
29+ }
30+
31+ div.name {
32+ margin-right: 1rem
33+ }
34+ div.timeago {
35+ $colorSubtle
36+ }
1137 }
1238
1339 div.content {
1440 display: flex
1541 flex-direction: row
1642 flex-grow: 1
1743
1844 cursor: pointer
19- padding: 1rem
20- border: 1px solid #ddd
21- border-radius: 2px
2245
23- transition: all .5s ease
2446
25- :hover {
26- background-color: #fff
27- border: 1px solid #fff
47+ div.Thumbnail {
48+ margin-right: 1rem
2849 }
50+
2951 div.text {
30- flow-direction: column
31- }
32-
33- div.subject {
34- font-size: 1.2rem
35- margin-bottom: .3rem
36-
37- $markdownLarge
38- }
39- div.reply {
40- color: #444
41-
4252 display: flex
43- align-items: center
53+ flex-wrap: wrap
4454
45- i.fa-caret-left {
46- margin-left: .7rem
47- margin-right: .5rem
55+ h2 {
56+ $markdownLarge
57+ margin: 0 .5rem 0 0
4858 }
49-
50- $markdownSmall
59+ div.Button.-channel {}
60+ div.summary {
61+ flex-basis: 100%
62+ }
5163 }
5264 }
5365
5466 -unread {
@@ -62,10 +74,11 @@
6274 }
6375 }
6476
6577 Thumbnail {
66- border-radius: 5px
67- min-width: 100px
68- min-height: 100px
69- width: 100px
70- height: 100px
78+ border-radius: .5rem
79+ min-width: 8rem
80+ min-height: 6rem
81+ width: 8rem
82+ height: 6rem
7183 }
84+
app/index.jsView
@@ -7,9 +7,9 @@
77 context: require('./html/context'),
88 header: require('./html/header'),
99 thread: require('./html/thread'),
1010 link: require('./html/link'),
11- blogCard: require('./html/thread-card'),
11+ blogCard: require('./html/blog-card'),
1212 },
1313 page: {
1414 blogIndex: require('./page/blogIndex'),
1515 blogNew: require('./page/blogNew'),
styles/button.mcssView
@@ -1,17 +1,21 @@
11 Button {
22 font-family: arial
3- text-align: center
43 background-color: #fff
54
65 min-width: 6rem
6+ height: 1.2rem
77 padding: .2rem 1rem
88
99 border: 1px #b9b9b9 solid
1010 border-radius: 10rem
1111
1212 cursor: pointer
1313
14+ display: flex
15+ justify-content: center
16+ align-items: center
17+
1418 -subtle {
1519 color: initial
1620 :hover {
1721 color: #222
styles/mixins.jsView
@@ -49,9 +49,9 @@
4949 color: #fff
5050 }
5151
5252 $colorSubtle {
53- color: #222
53+ color: #999
5454 }
5555
5656 $backgroundPrimary {
5757 background-color: #f5f6f7
@@ -87,26 +87,42 @@
8787 (img.emoji) {
8888 height: .9rem
8989 }
9090 }
91+ h1, h2, h3, h4, h5, h6, p {
92+ font-size: .9rem
93+ font-weight: 300
94+ margin: 0
95+ }
96+ (img.emoji) {
97+ height: .9rem
98+ }
9199 }
92100
93101 $markdownLarge {
94102 div.Markdown {
95103 h1, h2, h3, h4, h5, h6, p {
96- font-size: 1.2rem
104+ font-size: 1.5rem
97105 font-weight: 300
98106 margin: 0
99107 }
100108 }
109+ h1, h2, h3, h4, h5, h6, p {
110+ font-size: 1.5rem
111+ font-weight: 300
112+ margin: 0
113+ }
101114 }
102115
103116 $markdownBold {
104117 div.Markdown {
105118 h1, h2, h3, h4, h5, h6, p {
106119 font-weight: bold
107120 }
108121 }
122+ h1, h2, h3, h4, h5, h6, p {
123+ font-weight: bold
124+ }
109125 }
110126
111127 $borderSubtle {
112128 border: 1px solid #b9b9b9

Built with git-ssb-web