git ssb - stylying · mixmix/ticktack@1967ee98

Commit 1967ee98ce129f2ab3b072bcdeac1ad9f0990092

stylying

mix irving committed on 12/2/2017, 5:33:27 AM
Parent: 9de2656efd585098ef7eb72d618684bd03e34c37

Files changed

about/html/avatar.mcss	changed
app/html/blogNav.js	changed
app/html/scroller.mcss	changed
app/page/blogIndex.mcss	changed
app/page/blogNew.js	changed
app/page/blogSearch.mcss	changed
app/page/channel.js	changed
app/page/groupFind.js	changed
app/page/settings.js	changed
app/page/threadNew.js	changed
app/page/threadNew.mcss	changed
app/page/blogNew.mcss	added
main.js	changed
message/html/compose.js	changed
message/html/compose.mcss	changed
styles/button.mcss	changed
styles/markdown.mcss	changed
styles/mixins.js	changed
styles/patchSuggest.mcss	changed

about/html/avatar.mcssView
		@@ -14,8 +14,8 @@
14	14	$circleMedium
15	15	}
16	16
17	17	-large {
18		- $circleLarge
	18	+ $circlelarge
19	19	}
20	20	}
21	21

app/html/blogNav.jsView
		@@ -26,9 +26,9 @@
26	26	'ev-click': goTo({ page: 'blogSearch' })
27	27	}, strings.blogNav.blogSearch),
28	28	]),
29	29	h('div.right', [
30		- h('Button -primary', { 'ev-click': () => api.history.sync.push({ page: 'blogNew' }) }, strings.blogNew.actions.writeBlog),
	30	+ h('Button -strong', { 'ev-click': () => api.history.sync.push({ page: 'blogNew' }) }, strings.blogNew.actions.writeBlog),
31	31	])
32	32	])
33	33	}
34	34

app/html/scroller.mcssView
		@@ -1,7 +1,5 @@
1	1	Scroller {
2		- display: flex
3		- flex-direction: column
4	2
5	3	overflow: auto
6	4	width: 100%
7	5	height: 100%

app/page/blogIndex.mcssView
		@@ -1,8 +1,9 @@
1	1	Page -blogIndex {
2	2	div.content { padding: 0 }
3	3
4	4	div.Scroller.content {
	5	+
5	6	section.top {
6	7	position: sticky
7	8	left: 0
8	9	right: 0
		@@ -17,9 +18,13 @@
17	18	$maxWidth
18	19	margin: .8rem auto
19	20	padding: .5rem 2rem
20	21
	22	+ display: flex
	23	+ flex-wrap: wrap
	24	+
21	25	div.BlogCard {
	26	+ flex-basis: 100%
22	27	border-bottom: 1px solid rgba(0,0,0, .1)
23	28	}
24	29	}
25	30

app/page/blogNew.jsView
		@@ -27,9 +27,9 @@
27	27	title: Value(),
28	28	})
29	29
30	30	const composer = api.message.html.compose(
31		- { meta, shrink: false },
	31	+ { meta, placeholder: strings.blogNew.actions.writeBlog, shrink: false },
32	32	(err, msg) => api.history.sync.push(err ? err : msg)
33	33	)
34	34
35	35	const channelInput = h('input', {
		@@ -38,20 +38,22 @@
38	38	})
39	39	var page = h('Page -blogNew', [
40	40	api.app.html.context(location),
41	41	h('div.content', [
42		- h('div.field -channel', [
43		- h('div.label', strings.channel),
44		- channelInput
45		- ]),
46		- h('div.field -title', [
47		- h('div.label', strings.blogNew.field.title),
48		- h('input', {
49		- 'ev-input': e => meta.title.set(e.target.value),
50		- placeholder: strings.blogNew.field.title
51		- }),
52		- ]),
53		- composer
	42	+ h('div.container', [
	43	+ h('div.field -channel', [
	44	+ h('div.label', strings.channel),
	45	+ channelInput
	46	+ ]),
	47	+ h('div.field -title', [
	48	+ h('div.label', strings.blogNew.field.title),
	49	+ h('input', {
	50	+ 'ev-input': e => meta.title.set(e.target.value),
	51	+ placeholder: strings.blogNew.field.title
	52	+ }),
	53	+ ]),
	54	+ composer
	55	+ ])
54	56	])
55	57	])
56	58
57	59	addSuggest(channelInput, (inputText, cb) => {
		@@ -77,9 +79,9 @@
77	79
78	80	cb(null, suggestions)
79	81	}, {cls: 'PatchSuggest.-channelHorizontal'}) // WARNING hacking suggest-box cls
80	82
81		- channelInput.addEventListener('suggestselect', (e) => channel.set(e.value))
	83	+ channelInput.addEventListener('suggestselect', (e) => meta.channel.set(e.value))
82	84
83	85	return page
84	86	}
85	87	}

app/page/blogSearch.mcssView
		@@ -1,8 +1,9 @@
1	1	Page -blogSearch {
2	2	div.content { padding: 0 }
3	3
4	4	div.Scroller.content {
	5	+
5	6	section.top {
6	7	position: sticky
7	8	left: 0
8	9	right: 0
		@@ -12,8 +13,9 @@
12	13	background-color: #fff
13	14
14	15	div.search {
15	16	border-top: 1px solid gainsboro
	17	+ border-bottom: 2px solid #f5f6f7
16	18	padding: 1rem
17	19
18	20	div.input {
19	21	max-width: 16rem
		@@ -50,12 +52,17 @@
50	52
51	53	section.content {
52	54	background-color: #fff
53	55	$maxWidth
	56	+ padding: .5rem 2rem
54	57	margin: .8rem auto
55		- padding: .5rem 2rem
56	58
	59	+ display: flex
	60	+ flex-wrap: wrap
	61	+
57	62	div.BlogCard {
	63	+ flex-basis: 100%
	64	+
58	65	border-bottom: 1px solid gainsboro
59	66	}
60	67	}
61	68

app/page/channel.jsView
		@@ -52,9 +52,9 @@
52	52	const Link = api.app.html.link
53	53
54	54	// TODO change this to -channel
55	55	return h('Page -home', {title: channel}, [
56		- Link({ page: 'threadNew', channel }, h('Button -primary', strings.channel.action.newThread)),
	56	+ Link({ page: 'threadNew', channel }, h('Button -strong', strings.channel.action.newThread)),
57	57	h('div.content', [ threadsHtmlObs ]),
58	58	h('Button -showMore', {
59	59	'ev-click': threadsHtmlObs.more,
60	60	disabled: disableShowMore

app/page/groupFind.jsView
		@@ -47,9 +47,9 @@
47	47	return h('div.groupNotFound', [
48	48	h('div.info', strings.groupFind.state.groupNotFound),
49	49	Link(
50	50	{ page: 'threadNew', channel: input, flash: strings.groupFind.flash.createFirstThread },
51		- h('Button -primary', strings.groupFind.action.newGroup)
	51	+ h('Button -strong', strings.groupFind.action.newGroup)
52	52	)
53	53	])
54	54	}
55	55	})

app/page/settings.jsView
		@@ -76,9 +76,9 @@
76	76	])
77	77
78	78	function Language (lang) {
79	79	const selectLang = () => api.settings.sync.set({ language: lang })
80		- const className = currentLanguage === lang ? '-primary' : ''
	80	+ const className = currentLanguage === lang ? '-strong' : ''
81	81
82	82	return h('Button -language',
83	83	{
84	84	'ev-click': () => selectLang(lang),

app/page/threadNew.jsView
		@@ -46,25 +46,27 @@
46	46
47	47	return h('Page -threadNew', {title: strings.threadNew.pageTitle}, [
48	48	api.app.html.context(location),
49	49	h('div.content', [
50		- h('div.field -to', [
51		- h('div.label', strings.threadNew.field.to),
52		- h('div.recps', [
53		- h('div.recp', [
54		- api.about.html.image(feed),
55		- h('div.name', name)
	50	+ h('div.container', [
	51	+ h('div.field -to', [
	52	+ h('div.label', strings.threadNew.field.to),
	53	+ h('div.recps', [
	54	+ h('div.recp', [
	55	+ api.about.html.image(feed),
	56	+ h('div.name', name)
	57	+ ])
56	58	])
57		- ])
58		- ]),
59		- h('div.field -subject', [
60		- h('div.label', strings.threadNew.field.subject),
61		- h('input', {
62		- 'ev-input': e => meta.subject.set(e.target.value),
63		- placeholder: strings.optionalField
64		- }),
65		- ]),
66		- composer
	59	+ ]),
	60	+ h('div.field -subject', [
	61	+ h('div.label', strings.threadNew.field.subject),
	62	+ h('input', {
	63	+ 'ev-input': e => meta.subject.set(e.target.value),
	64	+ placeholder: strings.optionalField
	65	+ }),
	66	+ ]),
	67	+ composer
	68	+ ])
67	69	])
68	70	])
69	71	}
70	72

app/page/threadNew.mcssView
		@@ -1,58 +1,69 @@
1	1	Page -threadNew {
2	2
3	3	div.content {
4		- div.flash {
5		- margin-bottom: 2rem;
6		- background: #fff;
7		- padding: 1rem;
8		- }
	4	+ display: flex
9	5
10		- div.field {
11		- margin-bottom: .5rem
	6	+ div.container {
	7	+ flex-basis: 100%
12	8	$maxWidth
13		-
14		- display: flex
15		- align-items: center
	9	+ margin: 0 auto
16	10
17		- div.label {
18		- flex-basis: 4rem
19		- padding-left: 1rem
20		- margin-right: 1rem
	11	+ div.flash {
	12	+ margin-bottom: 2rem;
	13	+ background: #fff;
	14	+ padding: 1rem;
21	15	}
22	16
23		- input {
24		- flex-grow: 1
25		- $fontBasic
26		- padding: .6rem
27		- }
28		-
29		- div.recps {
	17	+ div.field {
	18	+ margin-bottom: .5rem
	19	+ $maxWidth
	20	+
30	21	display: flex
31		-
32		- div.recp {
33		- padding: .3rem
34		- min-width: 5rem
35		- $borderSubtle
36		- border-radius: 6rem
37		- $backgroundPrimaryText
	22	+ align-items: center
38	23
	24	+ div.label {
	25	+ flex-basis: 4rem
	26	+ padding-left: 1rem
39	27	margin-right: 1rem
	28	+ }
40	29
	30	+ input {
	31	+ flex-grow: 1
	32	+ $fontBasic
	33	+ padding: .6rem
	34	+ $borderSubtle
	35	+ border-radius: 4rem
	36	+ outline: none
	37	+ }
	38	+
	39	+ div.recps {
41	40	display: flex
42		- align-items: center
	41	+
	42	+ div.recp {
	43	+ padding: .3rem
	44	+ min-width: 5rem
	45	+ $borderSubtle
	46	+ border-radius: 6rem
	47	+ $backgroundPrimaryText
43	48
44		- img {
45		- width: 2rem
46		- height: 2rem
47		- border-radius: 2rem
48		- }
	49	+ margin-right: 1rem
49	50
50		- div.name {
51		- margin: 0 .5rem
	51	+ display: flex
	52	+ align-items: center
	53	+
	54	+ img {
	55	+ width: 2rem
	56	+ height: 2rem
	57	+ border-radius: 2rem
	58	+ }
	59	+
	60	+ div.name {
	61	+ margin: 0 .5rem
	62	+ }
52	63	}
53		- }
54		- }
	64	+ }
55	65
	66	+ }
56	67	}
57	68	}
58	69	}

app/page/blogNew.mcssView
		@@ -1,0 +1,48 @@
	1	+Page -blogNew {
	2	+ div.Context {}
	3	+
	4	+
	5	+ div.content {
	6	+ display: flex
	7	+
	8	+ div.container {
	9	+ flex-basis: 100%
	10	+ $maxWidth
	11	+ margin: 0 auto
	12	+
	13	+
	14	+ div.field {
	15	+ margin-bottom: .5rem
	16	+ $maxWidth
	17	+
	18	+ display: flex
	19	+ align-items: center
	20	+
	21	+ div.label {
	22	+ flex-basis: 4rem
	23	+ padding-left: 1rem
	24	+ margin-right: 1rem
	25	+ }
	26	+
	27	+ input {
	28	+ flex-grow: 1
	29	+ $fontBasic
	30	+ padding: .6rem 1rem
	31	+
	32	+ border-radius: 4rem
	33	+ $borderSubtle
	34	+ outline: none
	35	+ }
	36	+
	37	+
	38	+ -channel {}
	39	+ -title {}
	40	+ }
	41	+ div.Compose {
	42	+ textarea {
	43	+ margin-top: 2rem
	44	+ }
	45	+ }
	46	+ }
	47	+ }
	48	+}

main.jsView
		@@ -12,9 +12,10 @@
12	12	const sockets = combine(
13	13	//need some modules first
14	14	{
15	15	settings: require('patch-settings'),
16		- translations: require('./translations/sync')
	16	+ translations: require('./translations/sync'),
	17	+ suggestions: require('patch-suggest'), // so that styles can be over-ridden
17	18	},
18	19	{
19	20	about: require('./about'),
20	21	app: require('./app'),
		@@ -29,9 +30,8 @@
29	30	state: require('./state/obs'),
30	31	unread: require('./unread'),
31	32	},
32	33	{
33		- suggestions: require('patch-suggest'),
34	34	profile: require('patch-profile'),
35	35	history: require('patch-history'),
36	36	core: require('patchcore')
37	37	}

message/html/compose.jsView
		@@ -91,11 +91,11 @@
91	91	else
92	92	fileInput = h('input', { style: {visibility: 'hidden'} })
93	93
94	94	var showPreview = Value(false)
95		- var previewBtn = h('Button -preview',
	95	+ var previewBtn = h('Button',
96	96	{
97		- className: when(showPreview, '-primary'),
	97	+ className: when(showPreview, '-strong', '-subtle'),
98	98	'ev-click': () => showPreview.set(!showPreview())
99	99	},
100	100	when(showPreview, strings.blogNew.actions.edit, strings.blogNew.actions.preview)
101	101	)

message/html/compose.mcssView
		@@ -8,14 +8,12 @@
8	8	$fontBasic
9	9
10	10	padding: 1rem
11	11	border-radius: 1rem
12		- border: none
	12	+ $borderSubtle
13	13	margin-bottom: .5rem
14	14
15		- :focus {
16		- outline: none
17		- }
	15	+ outline: none
18	16	}
19	17
20	18	section.actions {
21	19	display: flex
		@@ -95,9 +93,10 @@
95	93
96	94	$attachButton {
97	95	background: #fff
98	96	color: #666
	97	+ padding: .5rem
99	98	border: 1px solid #b9b9b9
100		- padding: .5rem
	99	+ border-radius: 4rem
101	100	margin: 0
102	101	cursor: pointer
103	102	}

styles/button.mcssView
		@@ -1,10 +1,10 @@
1	1	Button {
2	2	font-family: arial
3	3	$backgroundPrimaryText
4	4
5		- min-width: 6rem
6		- height: 1.2em
	5	+ min-width: 5rem
	6	+ height: 1.4em
7	7	padding: .2rem 1rem
8	8
9	9	border: 1px #b9b9b9 solid
10	10	border-radius: 10rem
		@@ -14,23 +14,31 @@
14	14	display: flex
15	15	justify-content: center
16	16	align-items: center
17	17
	18	+ :hover {
	19	+ opacity: .7
	20	+ }
	21	+ transition: all .1s ease-in
	22	+
18	23	-subtle {
19		- color: initial
	24	+ color: #555
20	25	:hover {
21	26	color: #222
22	27	}
23	28	}
24	29
25	30	-primary {
	31	+ $font
	32	+ $colorFontPrimary
	33	+ $borderPrimary
	34	+ }
	35	+
	36	+ -strong {
26	37	$colorPrimary
27	38	$font
28	39	$borderPrimary
29	40
30		- :hover {
31		- opacity: .9
32		- }
33	41	}
34	42
35	43	-channel {
36	44	$backgroundPrimary

styles/markdown.mcssView
		@@ -10,9 +10,9 @@
10	10	p {
11	11	a {
12	12	img {
13	13	display: block
14		- margin: auto
	14	+ margin: .5rem auto
15	15	}
16	16	}
17	17	}
18	18

styles/mixins.jsView
		@@ -16,9 +16,9 @@
16	16	line-height: 1.2
17	17	}
18	18
19	19	$maxWidth {
20		- max-width: 1200px
	20	+ max-width: 1000px
21	21	}
22	22
23	23	$maxWidthSmaller {
24	24	max-width: 40rem
		@@ -81,25 +81,25 @@
81	81	min-width: 2.8rem
82	82	min-height: 2.8rem
83	83	width: 2.8rem
84	84	height: 2.8rem
85		- border-radius: 1.4rem
	85	+ border-radius: 4rem
86	86	}
87	87
88	88	$circleMedium {
89	89	min-width: 3.5rem
90	90	min-height: 3.5rem
91	91	width: 3.5rem
92	92	height: 3.5rem
93		- border-radius: 1.75rem
	93	+ border-radius: 4rem
94	94	}
95	95
96	96	$circlelarge {
97		- min-width: 5rem
98		- min-height: 5rem
99		- width: 5rem
100		- height: 5rem
101		- border-radius: 2.5rem
	97	+ min-width: 8rem
	98	+ min-height: 8rem
	99	+ width: 8rem
	100	+ height: 8rem
	101	+ border-radius: 8rem
102	102	}
103	103
104	104	$markdownSmall {
105	105	div.Markdown {

styles/patchSuggest.mcssView
		@@ -1,6 +1,17 @@
1	1	PatchSuggest {
2	2	box-shadow: rgba(0,0,0,0.1) 4px 4px 10px
	3	+
	4	+ ul {
	5	+ li {
	6	+ img { $circleSmall }
	7	+
	8	+ small {
	9	+ div.key { font-size: 1rem }
	10	+ }
	11	+ }
	12	+ }
	13	+
3	14	}
4	15
5	16	PatchSuggest -channelHorizontal {
6	17	max-width: 50vw

Built with git-ssb-web

mixmix / ticktack

Commit 1967ee98ce129f2ab3b072bcdeac1ad9f0990092

stylying

Files changed