diff options
| author | dave <starpumadev@gmail.com> | 2019-02-03 23:47:26 -0500 |
|---|---|---|
| committer | dave <starpumadev@gmail.com> | 2019-02-03 23:47:26 -0500 |
| commit | 06cf8628e54a30c5dd9dff153408f9641b8dad00 (patch) | |
| tree | 9a421008b1773d8a072d29dccab69879c041c8e3 /src | |
| parent | 7115584882f4fde67d248fa61611dbe579a41b9f (diff) | |
shorten incredibly long content warning or subject
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/status/status.js | 5 | ||||
| -rw-r--r-- | src/components/status/status.vue | 7 |
2 files changed, 11 insertions, 1 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js index c718fe9f..4dd0345c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -36,6 +36,7 @@ const Status = { preview: null, showPreview: false, showingTall: this.inConversation && this.focused, + showingTallSubject: false, expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' ? !this.$store.state.instance.collapseMessageWithSubject : !this.$store.state.config.collapseMessageWithSubject, @@ -129,6 +130,10 @@ const Status = { const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80 return lengthScore > 20 }, + tallSubject () { + const lengthScore = this.status.summary.length / 80 + return lengthScore > 10 + }, isReply () { return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id) }, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 3e3e82bf..adbaff73 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -85,7 +85,12 @@ </div> </div> - <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper"> + <div class="status-content-wrapper" :class="{ 'tall-status': !showingTallSubject }" v-if="tallSubject"> + <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingTallSubject" href="#" @click.prevent="showingTallSubject=true">Show more</a> + <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div> + <a v-if="showingTallSubject" href="#" class="status-unhider" @click.prevent="showingTallSubject=false">Show less</a> + </div> + <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else> <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a> <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div> <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div> |