git ssb

10+

Matt McKegg / patchwork



Commit 3111373d72c14d67653f9863dbf6db812181252b

Browse Files

tweaks to #547, style more button

Matt McKegg committed on 6/5/2017, 12:17:42 AM
Parent: 11e5e073d70d7b1aa7044edf3a299fcdb32f620c

Files changed

modules/page/html/render/public.jschanged
styles/channel-list.mcsschanged
styles/AllChannels.mcssdeleted
styles/all-channels.mcssadded
modules/page/html/render/public.jsView
@@ -159,9 +159,9 @@
159159 }, 'Subscribe')
160160 )
161161 ])
162162 }, {maxTime: 5}),
163- h('a.channel', {href: '/channels'}, 'More channels..')
163+ h('a.channel -more', {href: '/channels'}, 'More Channels...')
164164 ]),
165165
166166 PeerList(localPeers, 'Local'),
167167 PeerList(connectedPubs, 'Connected Pubs'),
styles/channel-list.mcssView
@@ -13,8 +13,13 @@
1313
1414 background-repeat: no-repeat
1515 background-position: right
1616
17+ -more {
18+ color: #658aaf;
19+ background: rgb(255, 255, 255);
20+ }
21+
1722 -subscribed {
1823 background-image: svg(subscribed)
1924 span.name {
2025 font-weight: bold
styles/AllChannels.mcssView
@@ -1,83 +1,0 @@
1-AllChannels {
2- display: flex;
3- flex-wrap: wrap;
4- justify-content: center;
5- overflow-y: auto
6- padding: 10px;
7-
8- a.channel {
9- display: flex;
10- padding: 8px 10px;
11- font-size: 110%;
12- margin: 4px;
13- background: rgba(255, 255, 255, 0.66);
14- color: #333;
15- border-radius: 5px;
16- position: relative
17- transition: background-color 0.2s
18- width: 200px;
19- overflow: hidden;
20- text-overflow: ellipsis;
21-
22- background-repeat: no-repeat
23- background-position: right
24-
25- -subscribed {
26- background-image: svg(subscribed)
27- span.name {
28- font-weight: bold
29- }
30- }
31-
32- @svg subscribed {
33- width: 20px
34- height: 12px
35- content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
36- }
37-
38- :hover {
39- background: rgba(255, 255, 255, 0.4);
40- text-decoration: none;
41- a {
42- transition: opacity 0.05s
43- opacity: 1
44- }
45- }
46-
47- span.name {
48- flex: 1
49- white-space: nowrap;
50- min-width: 0;
51- }
52-
53- a {
54- display: inline
55- opacity: 0;
56- font-size: 80%;
57- background-color: rgb(112, 112, 112);
58- transition: opacity 0.2s, background-color 0.4s
59- padding: 9px 10px;
60- color: white;
61- border-radius: 4px;
62- font-weight: bold;
63- margin: -8px -10px -8px 4px;
64- border-top-left-radius: 0;
65- border-bottom-left-radius: 0;
66- border-left: 2px solid rgba(255, 255, 255, 0.9);
67- text-decoration: none
68-
69- -subscribe {
70- :hover {
71- background-color: rgb(112, 184, 212);
72- }
73- }
74-
75- -unsubscribe {
76- :hover {
77- background: rgb(212, 112, 112);
78- }
79- }
80- }
81- }
82-}
83-}
styles/all-channels.mcssView
@@ -1,0 +1,83 @@
1+AllChannels {
2+ display: flex;
3+ flex-wrap: wrap;
4+ justify-content: center;
5+ overflow-y: auto
6+ padding: 10px;
7+
8+ a.channel {
9+ display: flex;
10+ padding: 8px 10px;
11+ font-size: 110%;
12+ margin: 4px;
13+ background: rgba(255, 255, 255, 0.66);
14+ color: #333;
15+ border-radius: 5px;
16+ position: relative
17+ transition: background-color 0.2s
18+ width: 200px;
19+ overflow: hidden;
20+ text-overflow: ellipsis;
21+
22+ background-repeat: no-repeat
23+ background-position: right
24+
25+ -subscribed {
26+ background-image: svg(subscribed)
27+ span.name {
28+ font-weight: bold
29+ }
30+ }
31+
32+ @svg subscribed {
33+ width: 20px
34+ height: 12px
35+ content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
36+ }
37+
38+ :hover {
39+ background: rgba(255, 255, 255, 0.4);
40+ text-decoration: none;
41+ a {
42+ transition: opacity 0.05s
43+ opacity: 1
44+ }
45+ }
46+
47+ span.name {
48+ flex: 1
49+ white-space: nowrap;
50+ min-width: 0;
51+ }
52+
53+ a {
54+ display: inline
55+ opacity: 0;
56+ font-size: 80%;
57+ background-color: rgb(112, 112, 112);
58+ transition: opacity 0.2s, background-color 0.4s
59+ padding: 9px 10px;
60+ color: white;
61+ border-radius: 4px;
62+ font-weight: bold;
63+ margin: -8px -10px -8px 4px;
64+ border-top-left-radius: 0;
65+ border-bottom-left-radius: 0;
66+ border-left: 2px solid rgba(255, 255, 255, 0.9);
67+ text-decoration: none
68+
69+ -subscribe {
70+ :hover {
71+ background-color: rgb(112, 184, 212);
72+ }
73+ }
74+
75+ -unsubscribe {
76+ :hover {
77+ background: rgb(212, 112, 112);
78+ }
79+ }
80+ }
81+ }
82+}
83+}

Built with git-ssb-web