1
0
Fork 0
forked from srxl/akkoma-fe

move styles to richcontent

This commit is contained in:
Henry Jameson 2021-06-07 12:49:54 +03:00
parent be79643bcf
commit a2459c2187
3 changed files with 76 additions and 58 deletions

View file

@ -19,7 +19,8 @@ export default Vue.component('RichContent', {
}, },
render (h) { render (h) {
const renderImage = (tag) => { const renderImage = (tag) => {
return <StillImage {...{ attrs: getAttrs(tag) }} /> const attrs = getAttrs(tag)
return <StillImage {...{ attrs }} class="img"/>
} }
const structure = convertHtml(this.html) const structure = convertHtml(this.html)
const processItem = (item) => { const processItem = (item) => {
@ -30,7 +31,7 @@ export default Vue.component('RichContent', {
this.emoji, this.emoji,
({ shortcode, url }) => { ({ shortcode, url }) => {
return <StillImage return <StillImage
class="emoji" class="emoji img"
src={url} src={url}
title={`:${shortcode}:`} title={`:${shortcode}:`}
alt={`:${shortcode}:`} alt={`:${shortcode}:`}
@ -56,8 +57,8 @@ export default Vue.component('RichContent', {
} }
} }
} }
return <div> return <span class="RichContent">
{ structure.map(processItem) } { structure.map(processItem) }
</div> </span>
} }
}) })

View file

@ -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;
}
}

View file

@ -185,16 +185,11 @@ $status-margin: 0.75em;
} }
} }
img, video { video {
max-width: 100%; max-width: 100%;
max-height: 400px; max-height: 400px;
vertical-align: middle; vertical-align: middle;
object-fit: contain; object-fit: contain;
&.emoji {
width: 32px;
height: 32px;
}
} }
.summary-wrapper { .summary-wrapper {
@ -230,54 +225,6 @@ $status-margin: 0.75em;
} }
.status-content { .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 { &.single-line {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;