Commit ed00f21688c47a809f1724a50ce7a3239f9929a6
style tweaks
mixmix committed on 11/28/2018, 2:57:09 AMParent: 21a357c1d2cbc1d5afe8c4a0ddf6a109ac2920ef
Files changed
app/page/channel.js | changed |
app/page/thread.mcss | changed |
app/styles/mcss/markdown.mcss | changed |
message/html/layout/all.mcss | changed |
message/html/layout/default.mcss | changed |
message/html/meta/unread.js | changed |
message/html/backlinks.js | added |
message/html/backlinks.mcss | added |
app/page/channel.js | ||
---|---|---|
@@ -50,22 +50,27 @@ | ||
50 | 50 … | |
51 | 51 … | const openChannelSource = api.feed.pull.channel(channelName) |
52 | 52 … | |
53 | 53 … | pull( |
54 | - openChannelSource({old: false}), | |
54 … | + openChannelSource({ old: false }), | |
55 | 55 … | filterUpThrough(), |
56 | - Scroller(container, content, api.message.html.render, true, false) | |
56 … | + Scroller(container, content, render, true, false) | |
57 | 57 … | ) |
58 | 58 … | |
59 | 59 … | pull( |
60 | - openChannelSource({reverse: true}), | |
60 … | + openChannelSource({ reverse: true }), | |
61 | 61 … | filterDownThrough(), |
62 | - Scroller(container, content, api.message.html.render, false, false) | |
62 … | + Scroller(container, content, render, false, false) | |
63 | 63 … | ) |
64 | 64 … | } |
65 | 65 … | draw() |
66 | 66 … | |
67 | - var page = h('Page -channel', {title: channel}, [ | |
67 … | + // TODO rollups | |
68 … | + function render (msg) { | |
69 … | + return api.message.html.render(msg, { showTitle: true }) | |
70 … | + } | |
71 … | + | |
72 … | + var page = h('Page -channel', { title: channel }, [ | |
68 | 73 … | // filterMenu, // TODO - extract non-scroller els like filterMenu here |
69 | 74 … | container |
70 | 75 … | ]) |
71 | 76 … |
app/page/thread.mcss | ||
---|---|---|
@@ -47,9 +47,9 @@ | ||
47 | 47 … | section.content {} |
48 | 48 … | |
49 | 49 … | section.bottom { |
50 | 50 … | // copied from Message.-default |
51 | - padding: 1rem .5rem | |
51 … | + padding: 1rem 0 | |
52 | 52 … | display: grid |
53 | 53 … | grid-template-columns: 6rem 1fr minmax(6rem, auto) |
54 | 54 … | grid-gap: 1.5rem |
55 | 55 … |
app/styles/mcss/markdown.mcss | ||
---|---|---|
@@ -1,14 +1,23 @@ | ||
1 | 1 … | Markdown { |
2 … | + (a) { | |
3 … | + color: #3c1842 | |
4 … | + text-decoration: underline | |
5 … | + | |
6 … | + :hover { | |
7 … | + color: #a341b4 | |
8 … | + } | |
9 … | + } | |
10 … | + | |
2 | 11 … | p, ul, ol { |
3 | 12 … | } |
4 | 13 … | |
5 | 14 … | p { |
6 | 15 … | :first-of-type { margin-top: 0 } |
7 | 16 … | :last-of-type { margin-bottom: 0 } |
8 | 17 … | |
9 | 18 … | a { |
10 | - img { margin 0 .5rem } | |
19 … | + img { margin: .5rem 0 } | |
11 | 20 … | |
12 | 21 … | :only-of-type { |
13 | 22 … | img { |
14 | 23 … | display: block |
@@ -44,12 +53,17 @@ | ||
44 | 53 … | padding: 0.1rem .2rem |
45 | 54 … | } |
46 | 55 … | |
47 | 56 … | blockquote { |
57 … | + font-size: .9rem | |
58 … | + line-height: 1.4rem | |
48 | 59 … | color: #666 |
49 | - font-style: italic | |
50 | - font-size: 1rem | |
51 | 60 … | |
61 … | + background: rgba(0,0,0,.05) | |
62 … | + padding: 1rem | |
63 … | + border-left: 4px solid rgba(0,0,0,.1) | |
64 … | + margin: 0 | |
65 … | + | |
52 | 66 … | p { |
53 | 67 … | :last-child { |
54 | 68 … | margin-bottom: .35ex |
55 | 69 … | } |
message/html/layout/all.mcss | ||
---|---|---|
@@ -1,6 +1,6 @@ | ||
1 | 1 … | Message { |
2 | 2 … | /* UnreadFeature (search codebase for this if extracting) */ |
3 | - (i.unread) { | |
3 … | + (div.unread) { | |
4 | 4 … | display: none |
5 | 5 … | } |
6 | 6 … | } |
message/html/layout/default.mcss | ||
---|---|---|
@@ -144,12 +144,17 @@ | ||
144 | 144 … | /* initially unread */ |
145 | 145 … | -unread { |
146 | 146 … | section.right { |
147 | 147 … | div.meta { |
148 | - i.unread { | |
148 … | + div.unread { | |
149 | 149 … | display: initial |
150 | - transition: color 1s ease-in | |
150 … | + padding: 1px 4px | |
151 … | + | |
152 … | + transition: color, border 1s ease-in | |
153 … | + | |
151 | 154 … | color: hotpink |
155 … | + border: 1px solid hotpink | |
156 … | + border-radius: 2px | |
152 | 157 … | } |
153 | 158 … | } |
154 | 159 … | } |
155 | 160 … | } |
@@ -158,10 +163,11 @@ | ||
158 | 163 … | -unread { |
159 | 164 … | -read { |
160 | 165 … | section.right { |
161 | 166 … | div.meta { |
162 | - i.unread { | |
167 … | + div.unread { | |
163 | 168 … | color: #bbb |
169 … | + border: 1px solid #bbb | |
164 | 170 … | } |
165 | 171 … | } |
166 | 172 … | } |
167 | 173 … | } |
message/html/meta/unread.js | ||
---|---|---|
@@ -12,9 +12,7 @@ | ||
12 | 12 … | return nest('message.html.meta', unread) |
13 | 13 … | |
14 | 14 … | // UnreadFeature (search codebase for this if extracting) |
15 | 15 … | function unread (msg) { |
16 | - return h('i.unread.fa.fa-star', { | |
17 | - title: 'A new message' | |
18 | - }) | |
16 … | + return h('div.unread', { title: 'A new message' }, 'new') | |
19 | 17 … | } |
20 | 18 … | } |
message/html/backlinks.js | ||
---|---|---|
@@ -1,0 +1,48 @@ | ||
1 … | +const nest = require('depnest') | |
2 … | +const { h, map, computed, when } = require('mutant') | |
3 … | +const ref = require('ssb-ref') | |
4 … | + | |
5 … | +exports.needs = nest({ | |
6 … | + 'message.obs.backlinks': 'first', | |
7 … | + 'message.obs.name': 'first', | |
8 … | + 'message.async.name': 'first', | |
9 … | + 'sbot.sync.cache': 'first' | |
10 … | +}) | |
11 … | + | |
12 … | +exports.gives = nest('message.html.backlinks') | |
13 … | + | |
14 … | +exports.create = function (api) { | |
15 … | + return nest('message.html.backlinks', function (msg) { | |
16 … | + if (!ref.isMsg(msg.key)) return [] | |
17 … | + var backlinks = api.message.obs.backlinks(msg.key) | |
18 … | + var references = computed([backlinks, msg], onlyReferences) | |
19 … | + return when(computed(references, hasItems), | |
20 … | + h('MessageBacklinks', [ | |
21 … | + h('header', 'Referenced:'), | |
22 … | + h('ul', [ | |
23 … | + map(references, (backlink) => { | |
24 … | + return h('li', [ | |
25 … | + h('a -backlink', { href: backlink.id, title: backlink.id }, api.message.obs.name(backlink.id)) | |
26 … | + ]) | |
27 … | + }) | |
28 … | + ]) | |
29 … | + ]) | |
30 … | + ) | |
31 … | + }) | |
32 … | +} | |
33 … | + | |
34 … | +function onlyReferences (backlinks, msg) { | |
35 … | + return backlinks.filter(link => link.root !== msg.key && !includeOrEqual(link.branch, msg.key)) | |
36 … | +} | |
37 … | + | |
38 … | +function hasItems (items, msg) { | |
39 … | + return (items && items.length) | |
40 … | +} | |
41 … | + | |
42 … | +function includeOrEqual (valueOrArray, item) { | |
43 … | + if (Array.isArray(valueOrArray)) { | |
44 … | + return valueOrArray.includes(item) | |
45 … | + } else { | |
46 … | + return valueOrArray === item | |
47 … | + } | |
48 … | +} |
message/html/backlinks.mcss | |||
---|---|---|---|
@@ -1,0 +1,20 @@ | |||
1 … | +MessageBacklinks { | ||
2 … | + font-size: .8rem | ||
3 … | + color: grey | ||
4 … | + | ||
5 … | + background: rgba(0,0,0,.05) | ||
6 … | + padding: .7rem 1rem 1rem | ||
7 … | + margin-top: 1rem | ||
8 … | + | ||
9 … | + header { | ||
10 … | + font-weight: 600 | ||
11 … | + letter-spacing: 1px | ||
12 … | + } | ||
13 … | + | ||
14 … | + ul { | ||
15 … | + margin-bottom: 0 | ||
16 … | + li { | ||
17 … | + a { color: grey } | ||
18 … | + } | ||
19 … | + } | ||
20 … | +} |
Built with git-ssb-web