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