diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index c0a71e8f77..09ea3a208c 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -44,14 +44,14 @@ const StatusContent = { return lengthScore > 20 }, longSubject () { - return this.status.summary.length > 900 + return this.status.summary.length > 240 }, // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status. mightHideBecauseSubject () { - return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault) + return !!this.status.summary && this.localCollapseSubjectDefault }, mightHideBecauseTall () { - return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault) + return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault) }, hideSubjectStatus () { return this.mightHideBecauseSubject && !this.expandingSubject @@ -142,12 +142,6 @@ const StatusContent = { return html } }, - contentHtml () { - if (!this.status.summary_html) { - return this.postBodyHtml - } - return this.status.summary_html + '
' + this.postBodyHtml - }, ...mapGetters(['mergedConfig']), ...mapState({ betterShadow: state => state.interface.browserSupport.cssFilter, diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index efc2485ead..3460c2fa52 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -3,18 +3,57 @@
+ +
+ {{ $t("general.show_more") }} + +
+ + {{ $t("status.show_content") }} - -
- {{ $t("general.show_more") }} -
-
- {{ $t("general.show_more") }} {{ $t("general.show_less") }} + > + {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }} +
@@ -129,6 +128,12 @@ $status-margin: 0.75em; flex: 1; min-width: 0; + .status-content-wrapper { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + } + .tall-status { position: relative; height: 220px; @@ -136,7 +141,7 @@ $status-margin: 0.75em; overflow-y: hidden; z-index: 1; .status-content { - height: 100%; + min-height: 0; mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white); /* Autoprefixed seem to ignore this one, and also syntax is different */ @@ -176,6 +181,38 @@ $status-margin: 0.75em; } } + .summary-wrapper { + margin-bottom: 0.5em; + border-style: solid; + border-width: 0 0 1px 0; + border-color: var(--border, $fallback--border); + flex-grow: 0; + } + + .summary { + font-style: italic; + padding-bottom: 0.5em; + } + + .tall-subject { + position: relative; + .summary { + max-height: 2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .tall-subject-hider { + display: inline-block; + word-break: break-all; + // position: absolute; + width: 100%; + text-align: center; + padding-bottom: 0.5em; + } + .status-content { font-family: var(--postFont, sans-serif); line-height: 1.4em; diff --git a/src/i18n/en.json b/src/i18n/en.json index 2840904fc0..e6af4266c5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -636,7 +636,11 @@ "status_unavailable": "Status unavailable", "copy_link": "Copy link to status", "thread_muted": "Thread muted", - "thread_muted_and_words": ", has words:" + "thread_muted_and_words": ", has words:", + "show_full_subject": "Show full subject", + "hide_full_subject": "Hide full subject", + "show_content": "Show content", + "hide_content": "Hide content" }, "user_card": { "approve": "Approve",