diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index a5c010de..7bff23cd 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -19,7 +19,8 @@ export default Vue.component('RichContent', {
},
render (h) {
const renderImage = (tag) => {
- return
+ const attrs = getAttrs(tag)
+ return
}
const structure = convertHtml(this.html)
const processItem = (item) => {
@@ -30,7 +31,7 @@ export default Vue.component('RichContent', {
this.emoji,
({ shortcode, url }) => {
return
+ return
{ structure.map(processItem) }
-
+
}
})
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index e69de29b..2fcd3911 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -0,0 +1,70 @@
+.RichContent {
+ 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;
+ font-style: italic;
+ }
+
+ pre {
+ overflow: auto;
+ }
+
+ code,
+ samp,
+ kbd,
+ var,
+ pre {
+ font-family: var(--postCodeFont, monospace);
+ }
+
+ p {
+ margin: 0 0 1em 0;
+ }
+
+ p:last-child {
+ margin: 0 0 0 0;
+ }
+
+ h1 {
+ font-size: 1.1em;
+ line-height: 1.2em;
+ margin: 1.4em 0;
+ }
+
+ h2 {
+ font-size: 1.1em;
+ margin: 1em 0;
+ }
+
+ h3 {
+ font-size: 1em;
+ margin: 1.2em 0;
+ }
+
+ h4 {
+ margin: 1.1em 0;
+ }
+
+ .img {
+ display: inline-block;
+ }
+
+ .emoji {
+ width: 32px;
+ height: 32px;
+ }
+
+ .img,
+ video {
+ max-width: 100%;
+ max-height: 400px;
+ vertical-align: middle;
+ object-fit: contain;
+ }
+}
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index fa095d43..31cd5a2e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -185,16 +185,11 @@ $status-margin: 0.75em;
}
}
- img, video {
+ video {
max-width: 100%;
max-height: 400px;
vertical-align: middle;
object-fit: contain;
-
- &.emoji {
- width: 32px;
- height: 32px;
- }
}
.summary-wrapper {
@@ -230,54 +225,6 @@ $status-margin: 0.75em;
}
.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;
- font-style: italic;
- }
-
- pre {
- overflow: auto;
- }
-
- code, samp, kbd, var, pre {
- font-family: var(--postCodeFont, monospace);
- }
-
- p {
- margin: 0 0 1em 0;
- }
-
- p:last-child {
- margin: 0 0 0 0;
- }
-
- h1 {
- font-size: 1.1em;
- line-height: 1.2em;
- margin: 1.4em 0;
- }
-
- h2 {
- font-size: 1.1em;
- margin: 1.0em 0;
- }
-
- h3 {
- font-size: 1em;
- margin: 1.2em 0;
- }
-
- h4 {
- margin: 1.1em 0;
- }
-
&.single-line {
white-space: nowrap;
text-overflow: ellipsis;