v1s1n/akkoma-fe
1
0
Fork 0
forked from srxl/akkoma-fe
Code Pull requests Activity

move styles to richcontent

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/rich_content/rich_content.jsx
View file

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

70
src/components/rich_content/rich_content.scss
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;
}
}

55
src/components/status_content/status_content.vue
View file

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