graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-24 03:13:07 +02:00
Code Issues Projects Releases Packages Wiki 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>
<div class="wrmlmaau" :class="{ collapsed }">
<div class="body">
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
<div :class="$style.body">
<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>
<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"/>
<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>
<details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
@ -15,8 +15,8 @@
<summary>{{ i18n.ts.poll }}</summary>
<MkPoll :note="note"/>
</details>
<button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ i18n.ts.showMore }}</span>
<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
</button>
</div>
</template>
@ -39,23 +39,10 @@ const collapsed = $ref(
));
</script>
<style lang="scss" scoped>
.wrmlmaau {
<style lang="scss" module>
.root {
overflow-wrap: break-word;
> .body {
> .reply {
margin-right: 6px;
color: var(--accent);
}
> .rp {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
}
}
&.collapsed {
position: relative;
max-height: 9em;
@ -70,7 +57,7 @@ const collapsed = $ref(
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
> span {
> .fadeLabel {
display: inline-block;
background: var(--panel);
padding: 6px 10px;
@ -80,11 +67,26 @@ const collapsed = $ref(
}
&:hover {
> span {
> .fadeLabel {
background: var(--panelHighlight);
}
}
}
}
}
.body {
}
.reply {
margin-right: 6px;
color: var(--accent);
}
.rp {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
}
</style>