Commit c99630ba531d862b38a3a4e85b19b203f19d47d8
Simplify likes and more pixel pushing
Oli Evans committed on 4/23/2017, 6:17:49 PMParent: 5b9d7ca9bb4a61d94b54a1fc968703c840a856d9
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,12 +1,12 @@ | ||
| 1 | 1 | FeedEvent { |
| 2 | 2 | display: flex |
| 3 | 3 | flex-direction: column |
| 4 | 4 | background: white |
| 5 | - box-shadow: 0 0 4px 1px rgba(0,0,0,0.1) | |
| 5 | + box-shadow: 0 2px 4px rgba(0,0,0,0.1) | |
| 6 | 6 | max-width: 700px |
| 7 | 7 | width: 100% |
| 8 | - margin: 0 auto 25px | |
| 8 | + margin: 25px auto | |
| 9 | 9 | |
| 10 | 10 | -new { |
| 11 | 11 | box-shadow: 0px 0px 2px #ffc800; |
| 12 | 12 | background: #fffdf7; |
| @@ -18,13 +18,12 @@ | ||
| 18 | 18 | |
| 19 | 19 | a.full { |
| 20 | 20 | display: block; |
| 21 | 21 | padding: 10px; |
| 22 | - background: #daecd6; | |
| 22 | + background: f3fafd; | |
| 23 | 23 | border-top: 1px solid #bbc9d2; |
| 24 | 24 | border-bottom: 1px solid #bbc9d2; |
| 25 | 25 | text-align: center; |
| 26 | - color: #759053; | |
| 27 | 26 | } |
| 28 | 27 | |
| 29 | 28 | div.replies { |
| 30 | 29 | font-size: 100% |
| styles/message.mcss | ||
|---|---|---|
| @@ -49,8 +49,13 @@ | ||
| 49 | 49 | |
| 50 | 50 | -reply { |
| 51 | 51 | font-size: 120% |
| 52 | 52 | header { |
| 53 | + div.meta { | |
| 54 | + a.channel { | |
| 55 | + display: none; | |
| 56 | + } | |
| 57 | + } | |
| 53 | 58 | div.main { |
| 54 | 59 | a.avatar { |
| 55 | 60 | img { |
| 56 | 61 | width: 40px |
| @@ -65,9 +70,9 @@ | ||
| 65 | 70 | border-color: #ffe794 |
| 66 | 71 | } |
| 67 | 72 | |
| 68 | 73 | header { |
| 69 | - margin: 10px 20px 0 | |
| 74 | + margin: 15px 20px 0 | |
| 70 | 75 | display: flex |
| 71 | 76 | |
| 72 | 77 | div.mini { |
| 73 | 78 | flex: 1 |
| @@ -85,9 +90,8 @@ | ||
| 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 | - margin-right: 10px; | |
| 137 | 143 | color: #286bc3; |
| 138 | - font-weight: 200; | |
| 139 | - strong { | |
| 140 | - color: #286bc3; | |
| 141 | - font-weight: 200; | |
| 142 | - } | |
| 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,26 +203,21 @@ | ||
| 200 | 203 | } |
| 201 | 204 | } |
| 202 | 205 | |
| 203 | 206 | footer { |
| 204 | - margin: 5px 10px 20px; | |
| 207 | + margin: 5px 0 20px; | |
| 208 | + padding: 0 20px | |
| 205 | 209 | |
| 206 | 210 | div.actions { |
| 207 | 211 | a { |
| 208 | - color: #9a9a9a; | |
| 209 | - font-weight: 200; | |
| 210 | - padding: 5px 10px; | |
| 211 | - border-radius:2px; | |
| 212 | - | |
| 212 | + opacity: 0.4 | |
| 213 | 213 | :hover { |
| 214 | - background: #cbeeff; | |
| 215 | - color: #3b7ba2; | |
| 214 | + opacity: 1 | |
| 216 | 215 | text-decoration: none; |
| 217 | - border-color: #8eafc1; | |
| 218 | 216 | } |
| 219 | 217 | } |
| 220 | 218 | a + a { |
| 221 | - margin-left: 15px; | |
| 219 | + margin-left: 25px; | |
| 222 | 220 | } |
| 223 | 221 | } |
| 224 | 222 | } |
| 225 | 223 | } |
Built with git-ssb-web