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