git ssb - channel: fix subscribe buttons · alanz/patchwork@abf8335c

Matt McKegg committed on 2/15/2017, 2:37:45 PM
Parent: 700173f9df1724b50186a5ea9deb34c3a2c3b697

modules/page/html/render/channel.js	changed
styles/page-heading.mcss	changed
styles/toggle-button.mcss	added

modules/page/html/render/channel.jsView
		@@ -23,14 +23,14 @@
23	23	h('div', {className: 'PageHeading'}, [
24	24	h('h1', `#${channel}`),
25	25	h('div.meta', [
26	26	when(subscribedChannels.has(channel),
27		- h('a -unsubscribe', {
	27	+ h('a.ToggleButton.-unsubscribe', {
28	28	'href': '#',
29	29	'title': 'Click to unsubscribe',
30	30	'ev-click': send(unsubscribe, channel)
31	31	}, 'Subscribed'),
32		- h('a -subscribe', {
	32	+ h('a.ToggleButton.-subscribe', {
33	33	'href': '#',
34	34	'ev-click': send(subscribe, channel)
35	35	}, 'Subscribe')
36	36	)

styles/page-heading.mcssView
		@@ -5,42 +5,5 @@
5	5
6	6	h1 {
7	7	flex: 1
8	8	}
9		- div.meta {
10		- a {
11		- font-size: 80%;
12		- background: rgb(112, 112, 112);
13		- border: 2px solid #313131;
14		- transition: opacity 0.2s;
15		- opacity: 0.6;
16		- padding: 6px 12px;
17		- color: white;
18		- border-radius: 4px;
19		- font-weight: bold;
20		- text-decoration: none;
21		- display: block;
22		-
23		- -subscribe {
24		- background-color: rgb(88, 171, 204);
25		- border-color: #20699c;
26		- }
27		-
28		- -unsubscribe {
29		- background-repeat: no-repeat
30		- background-position: right
31		- background-image: svg(subscribed)
32		- padding-right: 25px
33		- }
34		-
35		- :hover {
36		- opacity: 1
37		- }
38		- }
39		- }
40		-
41		- @svg subscribed {
42		- width: 20px
43		- height: 12px
44		- content: "<circle cx='6' stroke='#FFF' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#FFF'/>"
45		- }
46	9	}

styles/toggle-button.mcssView
		@@ -1,0 +1,35 @@
	1	+ToggleButton {
	2	+ font-size: 80%;
	3	+ background: rgb(112, 112, 112);
	4	+ border: 2px solid #313131;
	5	+ transition: opacity 0.2s;
	6	+ opacity: 0.6;
	7	+ padding: 6px 12px;
	8	+ color: white;
	9	+ border-radius: 4px;
	10	+ font-weight: bold;
	11	+ text-decoration: none;
	12	+ display: block;
	13	+
	14	+ -subscribe {
	15	+ background-color: rgb(88, 171, 204);
	16	+ border-color: #20699c;
	17	+ }
	18	+
	19	+ -unsubscribe {
	20	+ background-repeat: no-repeat
	21	+ background-position: right
	22	+ background-image: svg(subscribed)
	23	+ padding-right: 25px
	24	+ }
	25	+
	26	+ :hover {
	27	+ opacity: 1
	28	+ }
	29	+
	30	+ @svg subscribed {
	31	+ width: 20px
	32	+ height: 12px
	33	+ content: "<circle cx='6' stroke='#FFF' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#FFF'/>"
	34	+ }
	35	+}

alanz / patchwork