diff options
Diffstat (limited to 'packages/frontend/src/components/MkNotePreview.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNotePreview.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue new file mode 100644 index 0000000000..0c81059091 --- /dev/null +++ b/packages/frontend/src/components/MkNotePreview.vue @@ -0,0 +1,112 @@ +<template> +<div v-size="{ min: [350, 500] }" class="fefdfafb"> + <MkAvatar class="avatar" :user="$i"/> + <div class="main"> + <div class="header"> + <MkUserName :user="$i"/> + </div> + <div class="body"> + <div class="content"> + <Mfm :text="text.trim()" :author="$i" :i="$i"/> + </div> + </div> + </div> +</div> +</template> + +<script lang="ts" setup> +import { } from 'vue'; + +const props = defineProps<{ + text: string; +}>(); +</script> + +<style lang="scss" scoped> +.fefdfafb { + display: flex; + margin: 0; + padding: 0; + overflow: clip; + font-size: 0.95em; + + &.min-width_350px { + > .avatar { + margin: 0 10px 0 0; + width: 44px; + height: 44px; + } + } + + &.min-width_500px { + > .avatar { + margin: 0 12px 0 0; + width: 48px; + height: 48px; + } + } + + > .avatar { + flex-shrink: 0; + display: block; + margin: 0 10px 0 0; + width: 40px; + height: 40px; + border-radius: 8px; + pointer-events: none; + } + + > .main { + flex: 1; + min-width: 0; + + > .header { + margin-bottom: 2px; + font-weight: bold; + } + + > .body { + + > .cw { + cursor: default; + display: block; + margin: 0; + padding: 0; + overflow-wrap: break-word; + + > .text { + margin-right: 8px; + } + } + + > .content { + > .text { + cursor: default; + margin: 0; + padding: 0; + } + } + } + } +} + +@container (min-width: 350px) { + .fefdfafb { + > .avatar { + margin: 0 10px 0 0; + width: 44px; + height: 44px; + } + } +} + +@container (min-width: 500px) { + .fefdfafb { + > .avatar { + margin: 0 12px 0 0; + width: 48px; + height: 48px; + } + } +} +</style> |