worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 12:43:54 +09:00
parent 4b1009b34e
commit 5da74897ae
2 changed files with 14 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/> <MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { [$style.nowrap]: nowrap }]"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -157,8 +157,8 @@ const props = withDefaults(defineProps<{
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" module>
.havbbuyv { .root {
white-space: pre-wrap; white-space: pre-wrap;
&.nowrap { &.nowrap {
@ -167,24 +167,5 @@ const props = withDefaults(defineProps<{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
::v-deep(.quote) {
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
}
::v-deep(pre) {
font-size: 0.8em;
}
> ::v-deep(code) {
font-size: 0.8em;
word-break: break-all;
padding: 4px 6px;
}
} }
</style> </style>

13
packages/frontend/src/components/mfm.ts
View file

@ -12,6 +12,15 @@ import MkA from '@/components/global/MkA.vue';
import { host } from '@/config'; import { host } from '@/config';
import { MFM_TAGS } from '@/scripts/mfm-tags'; import { MFM_TAGS } from '@/scripts/mfm-tags';
const QUOTE_STYLE = `
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
`.split('\n').join(' ');
export default defineComponent({ export default defineComponent({
props: { props: {
text: { text: {
@ -276,11 +285,11 @@ export default defineComponent({
case 'quote': { case 'quote': {
if (!this.nowrap) { if (!this.nowrap) {
return [h('div', { return [h('div', {
class: 'quote', style: QUOTE_STYLE,
}, genEl(token.children))]; }, genEl(token.children))];
} else { } else {
return [h('span', { return [h('span', {
class: 'quote', style: QUOTE_STYLE,
}, genEl(token.children))]; }, genEl(token.children))];
} }
} }