Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop

src/components/status_content/status_content.vue

@@ -3,45 +3,32 @@
   <div class="status-body">
     <slot name="header" />
     <div
-      v-if="longSubject"
-      class="status-content-wrapper"
-      :class="{ 'tall-status': !showingLongSubject }"
+      v-if="status.summary_html"
+      class="summary-wrapper"
+      :class="{ 'tall-subject': (longSubject && !showingLongSubject) }"
     >
+      <div
+        class="media-body summary"
+        @click.prevent="linkClicked"
+        v-html="status.summary_html"
+      />
       <a
-        v-if="!showingLongSubject"
-        class="tall-status-hider"
-        :class="{ 'tall-status-hider_focused': focused }"
+        v-if="longSubject && showingLongSubject"
+        href="#"
+        class="tall-subject-hider"
+        @click.prevent="showingLongSubject=false"
+      >{{ $t("status.hide_full_subject") }}</a>
+      <a
+        v-else-if="longSubject"
+        class="tall-subject-hider"
+        :class="{ 'tall-subject-hider_focused': focused }"
         href="#"
         @click.prevent="showingLongSubject=true"
       >
-        {{ $t("general.show_more") }}
-        <span
-          v-if="hasImageAttachments"
-          class="icon-picture"
-        />
-        <span
-          v-if="hasVideoAttachments"
-          class="icon-video"
-        />
-        <span
-          v-if="status.card"
-          class="icon-link"
-        />
+        {{ $t("status.show_full_subject") }}
       </a>
-      <div
-        class="status-content media-body"
-        @click.prevent="linkClicked"
-        v-html="contentHtml"
-      />
-      <a
-        v-if="showingLongSubject"
-        href="#"
-        class="status-unhider"
-        @click.prevent="showingLongSubject=false"
-      >{{ $t("general.show_less") }}</a>
     </div>
     <div
-      v-else
       :class="{'tall-status': hideTallStatus}"
       class="status-content-wrapper"
     >
@@ -51,31 +38,51 @@
         :class="{ 'tall-status-hider_focused': focused }"
         href="#"
         @click.prevent="toggleShowMore"
-      >{{ $t("general.show_more") }}</a>
+      >
+        {{ $t("general.show_more") }}
+      </a>
       <div
         v-if="!hideSubjectStatus"
         class="status-content media-body"
         @click.prevent="linkClicked"
-        v-html="contentHtml"
-      />
-      <div
-        v-else
-        class="status-content media-body"
-        @click.prevent="linkClicked"
-        v-html="status.summary_html"
+        v-html="postBodyHtml"
       />
       <a
         v-if="hideSubjectStatus"
         href="#"
         class="cw-status-hider"
         @click.prevent="toggleShowMore"
-      >{{ $t("general.show_more") }}</a>
+      >
+        {{ $t("status.show_content") }}
+        <span
+          v-if="attachmentTypes.includes('image')"
+          class="icon-picture"
+        />
+        <span
+          v-if="attachmentTypes.includes('video')"
+          class="icon-video"
+        />
+        <span
+          v-if="attachmentTypes.includes('audio')"
+          class="icon-music"
+        />
+        <span
+          v-if="attachmentTypes.includes('unknown')"
+          class="icon-doc"
+        />
+        <span
+          v-if="status.card"
+          class="icon-link"
+        />
+      </a>
       <a
         v-if="showingMore"
         href="#"
         class="status-unhider"
         @click.prevent="toggleShowMore"
-      >{{ $t("general.show_less") }}</a>
+      >
+        {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
+      </a>
     </div>
 
     <div v-if="status.poll && status.poll.options">
@@ -129,6 +136,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 +149,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,10 +189,45 @@ $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;
     white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
 
     blockquote {
       margin: 0.2em 0 0.2em 2em;