Commit 72b6c6ce34bbd3cdbde8d7ce8efb35bf50fbe7ef
max height of 1500px on posts, add "See more" button when exceeding
Matt McKegg committed on 11/2/2017, 10:49:41 PMParent: 42ce7079c3fb1c0fed6c733b7f8cef04102d9267
Files changed
| lib/expander-hook.js | added |
| locales/en.json | changed |
| plugs/message/html/layout/default.js | changed |
| styles/dark/message.mcss | changed |
| styles/light/message.mcss | changed |
| lib/expander-hook.js | ||
|---|---|---|
| @@ -1,0 +1,26 @@ | ||
| 1 … | +module.exports = ExpanderHook | |
| 2 … | + | |
| 3 … | +function ExpanderHook (needsExpand) { | |
| 4 … | + return expander.bind(null, needsExpand) | |
| 5 … | +} | |
| 6 … | + | |
| 7 … | +function expander (needsExpand, element) { | |
| 8 … | + var handler = { handleEvent, needsExpand, element } | |
| 9 … | + handleEvent.bind(handler) | |
| 10 … | + | |
| 11 … | + if (element.querySelector('img')) { | |
| 12 … | + // just in case images are still loading | |
| 13 … | + setTimeout(handleEvent.bind(handler), 200) | |
| 14 … | + element.addEventListener('mouseover', handler) | |
| 15 … | + return element.removeEventListener.bind(element, 'mouseover', handler) | |
| 16 … | + } | |
| 17 … | +} | |
| 18 … | + | |
| 19 … | +function handleEvent (ev) { | |
| 20 … | + var { needsExpand, element } = this | |
| 21 … | + if (!needsExpand()) { | |
| 22 … | + if (element.firstElementChild.clientHeight > element.clientHeight) { | |
| 23 … | + needsExpand.set(true) | |
| 24 … | + } | |
| 25 … | + } | |
| 26 … | +} | |
| locales/en.json | ||
|---|---|---|
| @@ -179,6 +179,8 @@ | ||
| 179 | 179 … | "one": "You follow someone that follows this person.", |
| 180 | 180 … | "other": "You follow %s people that follow this person." |
| 181 | 181 … | }, |
| 182 | 182 … | "Followed by": "Followed by", |
| 183 | - "pt-BR": "Brazillian Portuguese" | |
| 184 | -} | |
| 183 … | + "pt-BR": "Brazillian Portuguese", | |
| 184 … | + "See less": "See less", | |
| 185 … | + "See more": "See more" | |
| 186 … | +} | |
| plugs/message/html/layout/default.js | ||
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| 1 | -const { h, computed } = require('mutant') | |
| 1 … | +const { h, computed, Value, when } = require('mutant') | |
| 2 | 2 … | var nest = require('depnest') |
| 3 | 3 … | var ref = require('ssb-ref') |
| 4 … | +var ExpanderHook = require('../../../../lib/expander-hook') | |
| 4 | 5 … | |
| 5 | 6 … | exports.needs = nest({ |
| 6 | 7 … | 'profile.html.person': 'first', |
| 7 | 8 … | 'message.obs.backlinks': 'first', |
| @@ -29,8 +30,11 @@ | ||
| 29 | 30 … | |
| 30 | 31 … | var classList = ['Message'] |
| 31 | 32 … | var replyInfo = null |
| 32 | 33 … | |
| 34 … | + var needsExpand = Value(false) | |
| 35 … | + var expanded = Value(false) | |
| 36 … | + | |
| 33 | 37 … | if (msg.value.content.root) { |
| 34 | 38 … | classList.push('-reply') |
| 35 | 39 … | var branch = msg.value.content.branch |
| 36 | 40 … | if (branch) { |
| @@ -48,13 +52,24 @@ | ||
| 48 | 52 … | |
| 49 | 53 … | return h('div', { |
| 50 | 54 … | classList |
| 51 | 55 … | }, [ |
| 52 | - messageHeader(msg, { replyInfo, priority }), | |
| 53 | - h('section', [content]), | |
| 56 … | + messageHeader(msg, { replyInfo, priority, needsExpand, expanded }), | |
| 57 … | + h('section', { | |
| 58 … | + classList: [ when(expanded, '-expanded') ], | |
| 59 … | + hooks: [ ExpanderHook(needsExpand) ] | |
| 60 … | + }, [content]), | |
| 54 | 61 … | computed(msg.key, (key) => { |
| 55 | 62 … | if (ref.isMsg(key)) { |
| 56 | 63 … | return h('footer', [ |
| 64 … | + when(needsExpand, h('div.expander', { | |
| 65 … | + classList: when(expanded, null, '-truncated') | |
| 66 … | + }, [ | |
| 67 … | + h('a', { | |
| 68 … | + href: '#', | |
| 69 … | + 'ev-click': toggle(expanded) | |
| 70 … | + }, when(expanded, i18n('See less'), i18n('See more'))) | |
| 71 … | + ])), | |
| 57 | 72 … | h('div.actions', [ |
| 58 | 73 … | api.message.html.action(msg) |
| 59 | 74 … | ]) |
| 60 | 75 … | ]) |
| @@ -100,4 +115,15 @@ | ||
| 100 | 115 … | } else { |
| 101 | 116 … | return array |
| 102 | 117 … | } |
| 103 | 118 … | } |
| 119 … | + | |
| 120 … | +function toggle (param) { | |
| 121 … | + return { | |
| 122 … | + handleEvent: handleToggle, | |
| 123 … | + param | |
| 124 … | + } | |
| 125 … | +} | |
| 126 … | + | |
| 127 … | +function handleToggle (ev) { | |
| 128 … | + this.param.set(!this.param()) | |
| 129 … | +} | |
| styles/dark/message.mcss | ||
|---|---|---|
| @@ -251,8 +251,15 @@ | ||
| 251 | 251 … | |
| 252 | 252 … | section { |
| 253 | 253 … | margin: 0 |
| 254 | 254 … | padding: 0 20px |
| 255 … | + max-height: 1500px | |
| 256 … | + overflow: hidden | |
| 257 … | + | |
| 258 … | + -expanded { | |
| 259 … | + max-height: none | |
| 260 … | + } | |
| 261 … | + | |
| 255 | 262 … | (img) { |
| 256 | 263 … | max-width: 100% |
| 257 | 264 … | } |
| 258 | 265 … | } |
| @@ -274,8 +281,22 @@ | ||
| 274 | 281 … | footer { |
| 275 | 282 … | margin: 5px 0 20px; |
| 276 | 283 … | padding: 0 20px |
| 277 | 284 … | |
| 285 … | + div.expander { | |
| 286 … | + text-align: center; | |
| 287 … | + background-color: #383736; | |
| 288 … | + | |
| 289 … | + -truncated { | |
| 290 … | + padding-top: 50px; | |
| 291 … | + margin-top: -50px; | |
| 292 … | + -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0)); | |
| 293 … | + a { | |
| 294 … | + :before { content: '▼ '; font-size: 80% } | |
| 295 … | + } | |
| 296 … | + } | |
| 297 … | + } | |
| 298 … | + | |
| 278 | 299 … | div.actions { |
| 279 | 300 … | a.like { |
| 280 | 301 … | :before { |
| 281 | 302 … | content: "❤ " |
| styles/light/message.mcss | ||
|---|---|---|
| @@ -203,11 +203,18 @@ | ||
| 203 | 203 … | |
| 204 | 204 … | section { |
| 205 | 205 … | margin: 0 |
| 206 | 206 … | padding: 0 20px |
| 207 … | + max-height: 1500vh | |
| 208 … | + overflow: hidden | |
| 209 … | + | |
| 207 | 210 … | (img) { |
| 208 | 211 … | max-width: 100% |
| 209 | 212 … | } |
| 213 … | + | |
| 214 … | + -expanded { | |
| 215 … | + max-height: none | |
| 216 … | + } | |
| 210 | 217 … | } |
| 211 | 218 … | |
| 212 | 219 … | a.backlink { |
| 213 | 220 … | display: block; |
| @@ -227,8 +234,22 @@ | ||
| 227 | 234 … | footer { |
| 228 | 235 … | margin: 5px 0 20px; |
| 229 | 236 … | padding: 0 20px |
| 230 | 237 … | |
| 238 … | + div.expander { | |
| 239 … | + text-align: center; | |
| 240 … | + background-color: white; | |
| 241 … | + | |
| 242 … | + -truncated { | |
| 243 … | + padding-top: 50px; | |
| 244 … | + margin-top: -50px; | |
| 245 … | + -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0)); | |
| 246 … | + a { | |
| 247 … | + :before { content: '▼ '; font-size: 80% } | |
| 248 … | + } | |
| 249 … | + } | |
| 250 … | + } | |
| 251 … | + | |
| 231 | 252 … | div.actions { |
| 232 | 253 … | a { |
| 233 | 254 … | opacity: 0.4 |
| 234 | 255 … | transition: opacity 0.2s |
Built with git-ssb-web