git ssb

16+

Dominic / patchbay



Commit dc06cb1de81eb3375ac9fa5e35df122d752f81d8

Browse Files

Merge pull request #202 from ssbc/styles_remix

styles remix
mix irving authored on 6/23/2018, 12:06:32 AM
GitHub committed on 6/23/2018, 12:06:32 AM
Parent: b755e93b29216ff4f3cc1b14472292cca8524023
Parent: d07e0d2417f507c7cffdae3ae46476122eaba98b

Files changed

app/html/app.mcsschanged
app/html/scroller.mcsschanged
app/page/public.jschanged
app/page/settings.jschanged
app/styles/mcss/hypertabs.mcsschanged
app/styles/mcss/markdown.mcsschanged
app/styles/mcss/app-theme-vars.mcssadded
app/styles/mcss/scrollbar.mcssadded
app/styles/mixins.jschanged
message/html/layout/default.jschanged
message/html/layout/default.mcsschanged
message/html/layout/mini.mcsschanged
message/html/meta/likes.jsdeleted
message/html/action/likes.jsadded
package-lock.jsonchanged
package.jsonchanged
app/html/app.mcssView
@@ -1,11 +1,13 @@
11 … App {
2 …+ background: var(--app-border-background)
23 … position: absolute
34 …
45 … top: 0
56 … bottom: 0
67 … left: 0
78 … right: 0
9 …+
810 … overflow: hidden
911 … min-height: 0px
1012 … }
1113 …
app/html/scroller.mcssView
@@ -5,9 +5,8 @@
55 …
66 … overflow-y: scroll
77 … overflow-x: auto
88 …
9- padding-top: 1rem
109 …
1110 … display: grid
1211 … justify-content: stretch
1312 … align-content: start
@@ -18,8 +17,12 @@
1817 …
1918 … box-sizing: border-box
2019 … }
2120 …
21 …+ section.top {
22 …+ margin-top: 1rem
23 …+ }
24 …+
2225 … section.content {
2326 … div {
2427 … border-bottom: solid 1px gainsboro
2528 … }
app/page/public.jsView
@@ -1,11 +1,11 @@
11 … const nest = require('depnest')
22 … const { h } = require('mutant')
33 … const pull = require('pull-stream')
44 … const Scroller = require('pull-scroll')
5 …+const next = require('pull-next-query')
6 …+const merge = require('lodash/merge')
57 …
6-const next = require('../../junk/next-stepper')
7-
88 … exports.gives = nest({
99 … 'app.html.menuItem': true,
1010 … 'app.page.public': true
1111 … })
@@ -13,9 +13,10 @@
1313 … exports.needs = nest({
1414 … 'app.html.filter': 'first',
1515 … 'app.html.scroller': 'first',
1616 … 'app.sync.goTo': 'first',
17- 'feed.pull.public': 'first',
17 …+ // 'feed.pull.public': 'first',
18 …+ 'sbot.pull.stream': 'first',
1819 … 'message.html.compose': 'first',
1920 … 'message.html.render': 'first'
2021 … })
2122 …
@@ -40,8 +41,16 @@
4041 … })
4142 … const { filterMenu, filterDownThrough, filterUpThrough, resetFeed } = api.app.html.filter(draw)
4243 … const { container, content } = api.app.html.scroller({ prepend: [composer, filterMenu] })
4344 …
45 …+ const createStream = (opts) => api.sbot.pull.stream(server => {
46 …+ const _opts = merge({}, opts, {
47 …+ query: [{$filter: { timestamp: {$gt: 0} }}]
48 …+ })
49 …+
50 …+ return next(server.query.read, _opts, ['timestamp'])
51 …+ })
52 …+
4453 … // TODO : build a pull-stream which has seperate state + rendering
4554 … function draw () {
4655 … resetFeed({ container, content })
4756 …
@@ -51,15 +60,15 @@
5160 … }
5261 …
5362 … // TODO - change to use ssb-query, streamed by publish time
5463 … pull(
55- next(api.feed.pull.public, {old: false, limit: 100, live: true}, ['timestamp']),
64 …+ createStream({old: false, limit: 100, live: true}),
5665 … filterUpThrough(),
5766 … Scroller(container, content, render, true, false)
5867 … )
5968 …
6069 … pull(
61- next(api.feed.pull.public, {reverse: true, limit: 100, live: false}, ['timestamp']),
70 …+ createStream({reverse: true, limit: 100, live: false}),
6271 … filterDownThrough(),
6372 … Scroller(container, content, render, false, false)
6473 … )
6574 … }
app/page/settings.jsView
@@ -24,9 +24,8 @@
2424 … 'ev-click': () => api.app.sync.goTo({ page: 'settings' })
2525 … }, '/settings')
2626 … }
2727 …
28-
2928 … function settingsPage (location) {
3029 … var page = h('SettingsPage', { title: '/settings' }, [
3130 … h('div.container', [
3231 … h('h1', 'Settings'),
@@ -40,9 +39,9 @@
4039 … })
4140 … ])
4241 … ])
4342 …
44- var { container, content } = api.app.html.scroller({ prepend: page })
45- container.title = 'Settings'
43 …+ var { container } = api.app.html.scroller({ prepend: page })
44 …+ container.title = '/settings'
4645 … return container
4746 … }
4847 … }
app/styles/mcss/hypertabs.mcssView
@@ -1,73 +1,47 @@
11 … Hypertabs {
22 … display: flex
33 … flex-direction: column
44 …
5- height: 100% /* needed to stop scroller blowing out */
5 …+ top: var(--app-border-width)
6 …+ bottom: var(--app-border-width)
7 …+ left: var(--app-border-width)
8 …+ right: var(--app-border-width)
69 …
10 …+ height: initial
11 …+
712 … nav {
813 … display: flex
914 …
10- background: linear-gradient(to bottom, #efefef, #e5e5e5)
15 …+ background: none
1116 …
1217 … section.tabs {
13- padding: .5rem 0 0 .5rem
18 …+ min-width: 0
1419 …
1520 … flex-grow: 1
1621 … display: flex
17- min-width: 0
1822 …
1923 … div.tab {
2024 … flex-grow: 1
2125 …
22- display: flex
23- align-items: center
24- justify-content: space-between
25-
2626 … min-width: 3.5rem
2727 … font-size: .9rem
28- background-color: #efefef
28 …+ background: rgba(0, 0, 0, 0)
29 …+
2930 … overflow: hidden
3031 …
3132 … padding: 0
32- margin-left: .3rem
3333 … border: none
34 …+ margin: 0 .3rem 0 0
3435 …
35- :hover {
36- background-color: #f8f8f8
37- a.close {
38- visibility: visible
39- }
40- }
36 …+ display: flex
37 …+ align-items: center
38 …+ justify-content: space-between
4139 …
42- -selected {
43- color: #222
44- background-color: #fff
45-
46- :hover {
47- background-color: #fff
48- }
49-
50- a.link {
51- text-decoration: none
52- max-width: calc(100% - 2rem)
53- }
54- a.close {
55- visibility: visible
56- }
57- }
58-
59- -notify {
60- background-color: orange;
61- }
62-
63-
6440 … a {
65- color: #666
66-
67- :hover {
68- text-decoration: none
69- }
41 …+ color: var(--app-border-color)
42 …+ outline: none
43 …+ :hover { text-decoration: none }
7044 … }
7145 …
7246 … a.link {
7347 … flex-grow: 1
@@ -78,14 +52,17 @@
7852 … white-space: nowrap
7953 … text-overflow: ellipsis
8054 …
8155 … padding: .45rem 0 .45rem .6rem
56 …+ /* padding: 0 0 var(--app-border-width) .6rem */
8257 … }
8358 …
8459 … a.close {
8560 … visibility: hidden
8661 … font-family: monospace
62 …+ font-weight: 600
8763 … line-height: 1rem
64 …+
8865 … width: .9rem
8966 … height: .9rem
9067 … /* border-radius: 1rem */
9168 …
@@ -94,30 +71,69 @@
9471 … display: flex
9572 … justify-content: center
9673 …
9774 … :hover {
98- background: #aaaaaa
99- color: #fff
100- font-weight: 600
75 …+ background: var(--page-background)
76 …+ color: var(--page-color)
10177 … }
10278 … }
10379 …
80 …+ :hover {
81 …+ background: var(--app-border-background-mid)
82 …+ a.link { color: var(--app-border-color) }
83 …+ a.close { visibility: visible }
84 …+ transition: all .2s ease-in
85 …+ }
86 …+
87 …+ -selected {
88 …+ color: var(--page-color)
89 …+ background: var(--page-background)
90 …+
91 …+ a.link {
92 …+ color: var(--page-color)
93 …+ text-decoration: none
94 …+ max-width: calc(100% - 2rem)
95 …+ cursor: default
96 …+ }
97 …+ a.close {
98 …+ visibility: visible
99 …+ color: var(--page-color)
100 …+
101 …+ :hover {
102 …+ }
103 …+ }
104 …+
105 …+ :hover {
106 …+ background: var(--page-background)
107 …+ a.link { color: var(--page-color) }
108 …+ transition: none
109 …+ }
110 …+ }
111 …+
112 …+ -notify {
113 …+ background-color: orange;
114 …+ }
115 …+
104116 … }
105117 …
106118 … }
107119 …
108120 … div.navExtra {
109- padding-top: .2rem
121 …+ padding-bottom: var(--app-border-width)
110122 … display: flex
111123 … align-items: center
112124 … }
113125 … }
114126 …
115127 … section.content {
116- display: flex
128 …+ background-color: var(--page-background)
129 …+ // this brings the scroll-bar in
130 …+ padding: .5rem .4rem
117131 …
118132 … height: 100% /* needed to stop making nav weird */
119133 …
134 …+ display: flex
135 …+
120136 … div.page {
121137 … flex-grow: 1
122138 …
123139 … display: flex /*hack to get give Scroller context it needs */
app/styles/mcss/markdown.mcssView
@@ -1,18 +1,21 @@
11 … Markdown {
22 … p, ul, ol {
33 … }
44 …
5- // center images (non-emoji)
6- // p {
7- // a {
8- // img {
9- // display: block
10- // margin: auto
11- // }
12- // }
13- // }
5 …+ p {
6 …+ a {
7 …+ img { margin 0 .5rem }
148 …
9 …+ :only-of-type {
10 …+ img {
11 …+ display: block
12 …+ margin: auto
13 …+ }
14 …+ }
15 …+ }
16 …+ }
17 …+
1518 … hr {
1619 … height: 0
1720 … border: solid #ddd
1821 … border-width: 1px 0 0
app/styles/mcss/app-theme-vars.mcssView
@@ -1,0 +1,12 @@
1 …+App {
2 …+ --app-border-background: rgb(0, 0, 0)
3 …+ --app-border-background-mid: rgba(218, 139, 255, 0.47)
4 …+ --app-border-width: .3rem
5 …+ --app-border-color: rgb(255, 255, 255)
6 …+
7 …+ --page-background: rgb(255, 255, 255)
8 …+ --page-color: #222
9 …+
10 …+ --scrollbar-color: rgba(65, 3, 82, 0.48)
11 …+ --scrollbar-color-hover: rgba(65, 3, 82, 0.55)
12 …+}
app/styles/mcss/scrollbar.mcssView
@@ -1,0 +1,19 @@
1 …+/* reference: https://css-tricks.com/custom-scrollbars-in-webkit/ */
2 …+
3 …+::-webkit-scrollbar {
4 …+ width: 8px
5 …+ height: 8px
6 …+}
7 …+
8 …+::-webkit-scrollbar-thumb {
9 …+ background-color: var(--scrollbar-color)
10 …+
11 …+ :hover {
12 …+ background-color: var(--scrollbar-color-hover)
13 …+ }
14 …+}
15 …+
16 …+::-webkit-scrollbar-track {
17 …+ background-color: rgba(0,0,0,0.1)
18 …+ margin: .5rem
19 …+}
app/styles/mixins.jsView
@@ -14,9 +14,9 @@
1414 … }
1515 …
1616 … const mainMixins = `
1717 … $textPrimary {
18- color: #222
18 …+ color: var(--page-color)
1919 … }
2020 …
2121 … $textSubtle {
2222 … color: gray
message/html/layout/default.jsView
@@ -25,21 +25,23 @@
2525 … if (!isMsg(msg.key)) action = () => {}
2626 …
2727 … var rawMessage = Value(null)
2828 …
29- return h('Message', {
30- attributes: {
31- tabindex: '0' // needed to be able to navigate and show focus()
32- }
29 …+ return h('Message -default', {
30 …+ attributes: { tabindex: '0' } // needed to be able to navigate and show focus()
3331 … }, [
3432 … h('section.avatar', {}, api.about.html.avatar(msg.value.author)),
35- h('section.timestamp', {}, timestamp(msg)),
36- h('header.author', {}, author(msg)),
37- h('section.meta', {}, meta(msg, { rawMessage })),
38- h('section.title', {}, opts.title),
33 …+ h('section.top', [
34 …+ h('div.author', {}, author(msg)),
35 …+ h('div.title', {}, opts.title),
36 …+ h('div.meta', {}, meta(msg, { rawMessage }))
37 …+ ]),
3938 … h('section.content', {}, opts.content),
4039 … h('section.raw-content', rawMessage),
41- h('section.actions', {}, action(msg)),
40 …+ h('section.bottom', [
41 …+ h('div.timestamp', {}, timestamp(msg)),
42 …+ h('div.actions', {}, action(msg))
43 …+ ]),
4244 … h('footer.backlinks', {}, backlinks(msg))
4345 … ])
4446 … }
4547 … }
message/html/layout/default.mcssView
@@ -1,71 +1,54 @@
1-Message {
2- padding: 1rem .5rem 1rem 6rem
3- /* min-height: 5rem */
1 …+Message -default {
2 …+ padding: 1rem .5rem
43 …
5- position: relative
6- display: flex
7- flex-direction: row
8- flex-wrap: wrap
9- justify-content: flex-end
4 …+ display: grid
5 …+ grid-template-columns: 5rem auto
106 …
117 … section.avatar {
12- position: absolute
13- left: .5rem
14-
8 …+ grid-column: 1 / 2
9 …+ grid-row: 1 / span 4
1510 … a img {
1611 … }
1712 … }
1813 …
19- section.timestamp {
20- position: absolute
21- left: .5rem
22- top: 5rem
14 …+ section.top {
15 …+ grid-column: 2 / 3
16 …+ grid-row: 1 / span 1
2317 …
24- a {
25- font-size: .8rem
26- $textSubtle
27- }
28- }
29-
30- header.author {
31- margin-right: .4rem
32- }
33-
34- section.meta {
3518 … display: flex
36- flex-grow: 1
37- justify-content: flex-end
38- align-items: center
39- * {
40- margin-left: .4rem
19 …+ align-items: baseline
20 …+
21 …+ div.author {
22 …+ font-weight: 600
23 …+ margin-right: .5rem
24 …+ (a) { color: #222 }
4125 … }
4226 …
43- a {
27 …+ div.title {
28 …+ flex-grow: 1
29 …+ font-size: .9rem
4430 … $textSubtle
31 …+ (a) { $textSubtle }
4532 … }
46-
47- /* this is for private message_meta, TODO find a better home */
48- (img) {
49- height: 1.8rem
50- width: 1.8rem
51- margin: 0 .2rem -.2rem
52- }
53- }
5433 …
55- section.title {
56- flex-basis: 100%
57- font-size: .9rem
34 …+ div.meta {
35 …+ display: flex
36 …+ justify-content: flex-end
37 …+ align-items: center
5838 …
59- span, span a {
60- $textSubtle
39 …+ a {
40 …+ $textSubtle
41 …+ margin-left: .5rem
42 …+ }
6143 … }
6244 … }
6345 …
6446 … section.content {
65- flex-basis: 100%
47 …+ grid-column: 2 / 3
48 …+ grid-row: 2 / span 1
6649 …
67- margin-top: .4rem
50 …+ margin-bottom: .5rem
6851 …
6952 … (img) {
7053 … max-width: 100%
7154 … }
@@ -73,11 +56,43 @@
7356 … max-width: 100%
7457 … }
7558 … }
7659 …
60 …+ section.bottom {
61 …+ grid-column: 2 / 3
62 …+ grid-row: 4 / span 1
63 …+
64 …+ display: flex
65 …+ align-items: center
66 …+
67 …+ div.timestamp {
68 …+ flex-grow: 1
69 …+
70 …+ a {
71 …+ font-size: .9rem
72 …+ $textSubtle
73 …+ }
74 …+ }
75 …+
76 …+ div.actions {
77 …+ display: flex
78 …+ justify-content: flex-end
79 …+
80 …+ font-size: .9rem
81 …+ a {
82 …+ margin-left: .5em
83 …+ }
84 …+
85 …+ a.unlike {
86 …+ $textSubtle
87 …+ }
88 …+ }
89 …+ }
90 …+
7791 … section.raw-content {
78- margin-left: -5.5rem
79- flex-basis: 118%
92 …+ grid-column: 2 / 3
93 …+ grid-row: 3 / span 1
94 …+
8095 … pre {
8196 … border: 1px gainsboro solid
8297 … padding: .8rem
8398 … background-color: #f5f5f5
@@ -94,25 +109,11 @@
94109 … }
95110 … }
96111 … }
97112 …
98- section.actions {
99- flex-basis: 100%
100- display: flex
101- justify-content: flex-end
113 …+ footer.backlinks {
114 …+ grid-row: 5 / span 1
102115 …
103- font-size: .9rem
104- a {
105- margin-left: .5em
106- }
107-
108- a.unlike {
109- $textSubtle
110- }
111- }
112-
113- footer.backlinks {
116 …+ grid-column: 2 / 3
114117 … flex-basis: 100%
115118 … }
116-
117-
118119 … }
message/html/layout/mini.mcssView
@@ -1,42 +1,42 @@
1-Message {
2- -mini {
3- font-size: .9rem
4- justify-content: flex-start
5- padding: .25rem .5rem
6- min-height: inherit
1 …+Message -mini {
2 …+ font-size: .9rem
3 …+ justify-content: flex-start
4 …+ padding: .25rem .5rem
5 …+ min-height: inherit
76 …
8- section.timestamp {
9- order: 0
10- position: initial
11- left: initial
12- min-width: 5.5rem
13- }
7 …+ display: flex
148 …
15- header.author {
16- order: 1
17- margin-right: .5rem
18-
19- position: initial
20- left: initial
21- top: initial
22- }
9 …+ section.timestamp {
10 …+ order: 0
11 …+ position: initial
12 …+ left: initial
13 …+ min-width: 5.5rem
14 …+ }
2315 …
16 …+ header.author {
17 …+ order: 1
18 …+ margin-right: .5rem
19 …+
20 …+ position: initial
21 …+ left: initial
22 …+ top: initial
23 …+ }
2424 …
25- section.content {
26- order: 2
27- flex-basis: initial
28- flex-grow: 1
2925 …
30- margin-top: 0
31- }
26 …+ section.content {
27 …+ order: 2
28 …+ flex-basis: initial
29 …+ flex-grow: 1
3230 …
33- section.meta {
34- order: 3
35- }
31 …+ margin-top: 0
32 …+ }
3633 …
37- section.raw-content {
38- order: 4
39- margin-left: 0
40- }
34 …+ section.meta {
35 …+ order: 3
4136 … }
37 …+
38 …+ section.raw-content {
39 …+ order: 4
40 …+ margin-left: 0
41 …+ }
4242 … }
message/html/meta/likes.jsView
@@ -1,32 +1,0 @@
1-const nest = require('depnest')
2-const { h, computed, map } = require('mutant')
3-const ref = require('ssb-ref')
4-
5-exports.gives = nest('message.html.meta')
6-
7-exports.needs = nest({
8- 'about.obs.name': 'first',
9- 'message.obs.likes': 'first'
10-})
11-
12-exports.create = (api) => {
13- return nest('message.html.meta', likes)
14-
15- function likes (msg) {
16- if (!ref.isMsgId(msg.key)) return
17-
18- const symbol = '\u2713' // tick 🗸
19-
20- var likes = api.message.obs.likes(msg.key)
21-
22- var body = computed(likes, likes => likes.length > 4
23- ? likes.length + ' ' + symbol
24- : Array(likes.length).fill(symbol).join('')
25- )
26-
27- var names = map(likes, id => api.about.obs.name(id))
28- var title = computed(names, names => names.map(n => '@' + n).join('\n'))
29-
30- return h('a.likes', { title }, body)
31- }
32-}
message/html/action/likes.jsView
@@ -1,0 +1,32 @@
1 …+const nest = require('depnest')
2 …+const { h, computed, map } = require('mutant')
3 …+const ref = require('ssb-ref')
4 …+
5 …+exports.gives = nest('message.html.action')
6 …+
7 …+exports.needs = nest({
8 …+ 'about.obs.name': 'first',
9 …+ 'message.obs.likes': 'first'
10 …+})
11 …+
12 …+exports.create = (api) => {
13 …+ return nest('message.html.action', likes)
14 …+
15 …+ function likes (msg) {
16 …+ if (!ref.isMsgId(msg.key)) return
17 …+
18 …+ const symbol = '\u2713' // tick 🗸
19 …+
20 …+ var likes = api.message.obs.likes(msg.key)
21 …+
22 …+ var body = computed(likes, likes => likes.length > 4
23 …+ ? likes.length + ' ' + symbol
24 …+ : Array(likes.length).fill(symbol).join('')
25 …+ )
26 …+
27 …+ var names = map(likes, id => api.about.obs.name(id))
28 …+ var title = computed(names, names => names.map(n => '@' + n).join('\n'))
29 …+
30 …+ return h('a.likes', { title }, body)
31 …+ }
32 …+}
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 360559 bytes
New file size: 359889 bytes
package.jsonView
@@ -62,9 +62,9 @@
6262 … "patch-inbox": "^1.1.3",
6363 … "patch-settings": "^1.1.1",
6464 … "patch-suggest": "^2.0.2",
6565 … "patchbay-book": "^1.0.6",
66- "patchbay-gatherings": "^2.0.0",
66 …+ "patchbay-gatherings": "^2.0.1",
6767 … "patchbay-poll": "^1.0.5",
6868 … "patchcore": "^1.27.2",
6969 … "pull-abortable": "^4.1.1",
7070 … "pull-cat": "^1.1.11",

Built with git-ssb-web