monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 15:05:23 +09:00
parent 3db84a2e8f
commit ab1124abba
1 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/frontend/src/components/MkSubNoteContent.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="wrmlmaau" :class="{ collapsed }"> <div :class="[$style.root, { [$style.collapsed]: collapsed }]">
<div class="body"> <div :class="$style.body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span> <span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/> <Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/>
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> <MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div> </div>
<details v-if="note.files.length > 0"> <details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary> <summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
@ -15,8 +15,8 @@
<summary>{{ i18n.ts.poll }}</summary> <summary>{{ i18n.ts.poll }}</summary>
<MkPoll :note="note"/> <MkPoll :note="note"/>
</details> </details>
<button v-if="collapsed" class="fade _button" @click="collapsed = false"> <button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
<span>{{ i18n.ts.showMore }}</span> <span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
</button> </button>
</div> </div>
</template> </template>
@ -39,23 +39,10 @@ const collapsed = $ref(
)); ));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.wrmlmaau { .root {
overflow-wrap: break-word; overflow-wrap: break-word;
> .body {
> .reply {
margin-right: 6px;
color: var(--accent);
}
> .rp {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
}
}
&.collapsed { &.collapsed {
position: relative; position: relative;
max-height: 9em; max-height: 9em;
@ -70,7 +57,7 @@ const collapsed = $ref(
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--X15));
> span { > .fadeLabel {
display: inline-block; display: inline-block;
background: var(--panel); background: var(--panel);
padding: 6px 10px; padding: 6px 10px;
@ -80,11 +67,26 @@ const collapsed = $ref(
} }
&:hover { &:hover {
> span { > .fadeLabel {
background: var(--panelHighlight); background: var(--panelHighlight);
} }
} }
} }
} }
} }
.body {
}
.reply {
margin-right: 6px;
color: var(--accent);
}
.rp {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
}
</style> </style>