diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index c0a71e8f..09ea3a20 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 373802af..40c28b5c 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("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 21df3e73..ead4d0b0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -638,7 +638,11 @@
"thread_muted": "Thread muted",
"thread_muted_and_words": ", has words:",
"preview": "Preview",
- "preview_empty": "Empty"
+ "preview_empty": "Empty",
+ "show_full_subject": "Show full subject",
+ "hide_full_subject": "Hide full subject",
+ "show_content": "Show content",
+ "hide_content": "Hide content"
},
"user_card": {
"approve": "Approve",
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
index 15ce5cbe..bf270f87 100644
--- a/src/i18n/nl.json
+++ b/src/i18n/nl.json
@@ -476,7 +476,14 @@
"backend_version": "Backend Versie",
"title": "Versie"
},
- "mutes_and_blocks": "Negeringen en Blokkades"
+ "mutes_and_blocks": "Negeringen en Blokkades",
+ "profile_fields": {
+ "value": "Inhoud",
+ "name": "Label",
+ "add_field": "Veld Toevoegen",
+ "label": "Profiel metadata"
+ },
+ "bot": "Dit is een bot account"
},
"timeline": {
"collapse": "Inklappen",