Commit 149c021b55e9957ad4d75789d066cf9794507064
Merge branch 'message-ui-tweaks' of https://github.com/olizilla/patchwork into olizilla-message-ui-tweaks
Matt McKegg committed on 4/23/2017, 8:07:51 PMParent: ffb7bedc3c585728df51f065d1d5d2f2d826319e
Parent: c99630ba531d862b38a3a4e85b19b203f19d47d8
Files changed
plugs/message/html/meta/likes.js | changed |
styles/feed-event.mcss | changed |
styles/message.mcss | changed |
plugs/message/html/meta/likes.js | ||
---|---|---|
@@ -16,9 +16,9 @@ | ||
16 | 16 … | function likeCount (likes) { |
17 | 17 … | if (likes.length) { |
18 | 18 … | return [' ', h('span.likes', { |
19 | 19 … | title: names(likes) |
20 | - }, ['+', h('strong', `${likes.length}`)])] | |
20 … | + }, [`${likes.length} ${likes.length === 1 ? 'like' : 'likes'}`])] | |
21 | 21 … | } |
22 | 22 … | } |
23 | 23 … | |
24 | 24 … | function names (ids) { |
styles/feed-event.mcss | ||
---|---|---|
@@ -1,11 +1,12 @@ | ||
1 | 1 … | FeedEvent { |
2 | 2 … | display: flex |
3 | 3 … | flex-direction: column |
4 | 4 … | background: white |
5 … | + box-shadow: 0 2px 4px rgba(0,0,0,0.1) | |
5 | 6 … | max-width: 700px |
6 | 7 … | width: 100% |
7 | - margin: 10px auto | |
8 … | + margin: 25px auto | |
8 | 9 … | |
9 | 10 … | -new { |
10 | 11 … | box-shadow: 0px 0px 2px #ffc800; |
11 | 12 … | background: #fffdf7; |
@@ -17,13 +18,12 @@ | ||
17 | 18 … | |
18 | 19 … | a.full { |
19 | 20 … | display: block; |
20 | 21 … | padding: 10px; |
21 | - background: #daecd6; | |
22 … | + background: f3fafd; | |
22 | 23 … | border-top: 1px solid #bbc9d2; |
23 | 24 … | border-bottom: 1px solid #bbc9d2; |
24 | 25 … | text-align: center; |
25 | - color: #759053; | |
26 | 26 … | } |
27 | 27 … | |
28 | 28 … | div.replies { |
29 | 29 … | font-size: 100% |
@@ -36,7 +36,11 @@ | ||
36 | 36 … | } |
37 | 37 … | |
38 | 38 … | div.meta { |
39 | 39 … | font-size: 100% |
40 | - padding: 10px | |
40 … | + padding: 10px 20px | |
41 … | + opacity: 0.4 | |
42 … | + :hover { | |
43 … | + opacity: 0.8 | |
44 … | + } | |
41 | 45 … | } |
42 | 46 … | } |
styles/message.mcss | |||
---|---|---|---|
@@ -1,12 +1,11 @@ | |||
1 | 1 … | Message { | |
2 | 2 … | display: flex | |
3 | 3 … | flex-direction: column | |
4 | - box-shadow: #dadada 1px 2px 8px | ||
5 | - border: 1px solid #f5f5f5 | ||
6 | 4 … | background: white | |
7 | 5 … | position: relative | |
8 | - font-size: 130% | ||
6 … | + font-size: 120% | ||
7 … | + line-height: 1.4 | ||
9 | 8 … | flex-shrink: 0 | |
10 | 9 … | ||
11 | 10 … | (highlight) { | |
12 | 11 … | background-color: yellow | |
@@ -50,12 +49,18 @@ | |||
50 | 49 … | ||
51 | 50 … | -reply { | |
52 | 51 … | font-size: 120% | |
53 | 52 … | header { | |
53 … | + div.meta { | ||
54 … | + a.channel { | ||
55 … | + display: none; | ||
56 … | + } | ||
57 … | + } | ||
54 | 58 … | div.main { | |
55 | 59 … | a.avatar { | |
56 | 60 … | img { | |
57 | - width: 35px | ||
61 … | + width: 40px | ||
62 … | + height: 40px | ||
58 | 63 … | } | |
59 | 64 … | } | |
60 | 65 … | } | |
61 | 66 … | } | |
@@ -65,10 +70,9 @@ | |||
65 | 70 … | border-color: #ffe794 | |
66 | 71 … | } | |
67 | 72 … | ||
68 | 73 … | header { | |
69 | - margin: 15px 15px | ||
70 | - margin-bottom: 5px; | ||
74 … | + margin: 15px 20px 0 | ||
71 | 75 … | display: flex | |
72 | 76 … | ||
73 | 77 … | div.mini { | |
74 | 78 … | flex: 1 | |
@@ -80,14 +84,14 @@ | |||
80 | 84 … | ||
81 | 85 … | a.avatar { | |
82 | 86 … | img { | |
83 | 87 … | width: 50px | |
88 … | + height: 50px | ||
84 | 89 … | } | |
85 | 90 … | } | |
86 | 91 … | ||
87 | 92 … | div.main { | |
88 | 93 … | div.name { | |
89 | - font-size: 120% | ||
90 | 94 … | a { | |
91 | 95 … | color: #444 | |
92 | 96 … | font-weight: bold | |
93 | 97 … | } | |
@@ -99,8 +103,12 @@ | |||
99 | 103 … | } | |
100 | 104 … | } | |
101 | 105 … | ||
102 | 106 … | div.meta { | |
107 … | + display: flex; | ||
108 … | + flex-direction: column-reverse; | ||
109 … | + align-items: flex-end; | ||
110 … | + justify-content: flex-end; | ||
103 | 111 … | ||
104 | 112 … | span.flag { | |
105 | 113 … | width: 12px | |
106 | 114 … | height: 12px | |
@@ -127,20 +135,14 @@ | |||
127 | 135 … | padding: 4px | |
128 | 136 … | } | |
129 | 137 … | ||
130 | 138 … | a.channel { | |
131 | - display: inline-block | ||
132 | - padding: 4px | ||
139 … | + font-weight: bold; | ||
133 | 140 … | } | |
134 | 141 … | ||
135 | 142 … | span.likes { | |
136 | - color: #ffffff; | ||
137 | - background: linear-gradient(45deg, #859c88, #87d47d); | ||
138 | - padding: 5px 8px; | ||
139 | - border-radius: 10px; | ||
140 | - display: inline-block; | ||
141 | - vertical-align: top; | ||
142 | - margin: -2px 0; | ||
143 … | + color: #286bc3; | ||
144 … | + font-size:90%; | ||
143 | 145 … | } | |
144 | 146 … | ||
145 | 147 … | span.private { | |
146 | 148 … | display: inline-block; | |
@@ -176,9 +178,10 @@ | |||
176 | 178 … | } | |
177 | 179 … | } | |
178 | 180 … | ||
179 | 181 … | section { | |
180 | - margin: 0 15px | ||
182 … | + margin: 0 | ||
183 … | + padding: 0 20px | ||
181 | 184 … | (img) { | |
182 | 185 … | max-width: 100% | |
183 | 186 … | } | |
184 | 187 … | } | |
@@ -200,27 +203,21 @@ | |||
200 | 203 … | } | |
201 | 204 … | } | |
202 | 205 … | ||
203 | 206 … | footer { | |
204 | - margin: 10px 10px; | ||
205 | - border-top: 1px solid #eee; | ||
206 | - padding-top: 10px; | ||
207 | - margin-top: 5px; | ||
208 | - padding-left: 5px; | ||
207 … | + margin: 5px 0 20px; | ||
208 … | + padding: 0 20px | ||
209 | 209 … | ||
210 | 210 … | div.actions { | |
211 | 211 … | a { | |
212 | - margin-right: 10px; | ||
213 | - color: #9a9a9a; | ||
214 | - font-weight: bold; | ||
215 | - padding: 5px | ||
216 | - | ||
212 … | + opacity: 0.4 | ||
217 | 213 … | :hover { | |
218 | - background: #cbeeff; | ||
219 | - color: #3b7ba2; | ||
214 … | + opacity: 1 | ||
220 | 215 … | text-decoration: none; | |
221 | - border-color: #8eafc1; | ||
222 | 216 … | } | |
223 | 217 … | } | |
218 … | + a + a { | ||
219 … | + margin-left: 25px; | ||
220 … | + } | ||
224 | 221 … | } | |
225 | 222 … | } | |
226 | 223 … | } |
Built with git-ssb-web