refactor(client): use css modules

This commit is contained in:
syuilo 2023-01-10 08:48:37 +09:00
parent 72dfbfcf35
commit f3c0af7e23
3 changed files with 7 additions and 8 deletions

View file

@ -80,7 +80,6 @@ export default defineComponent({
} else { } else {
if (props.ad && item._shouldInsertAd_) { if (props.ad && item._shouldInsertAd_) {
return [h(MkAd, { return [h(MkAd, {
class: 'a', // advertise()
key: item.id + ':ad', key: item.id + ':ad',
prefer: ['horizontal', 'horizontal-big'], prefer: ['horizontal', 'horizontal-big'],
}), el]; }), el];

View file

@ -4,7 +4,7 @@
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="el"
v-hotkey="keymap" v-hotkey="keymap"
:class="[$style.root, { [$style.isRenote]: isRenote }]" :class="$style.root"
:tabindex="!isDeleted ? '-1' : null" :tabindex="!isDeleted ? '-1' : null"
> >
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/> <MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/>

View file

@ -8,9 +8,9 @@
</template> </template>
<template #default="{ items: notes }"> <template #default="{ items: notes }">
<div class="giivymft" :class="{ noGap }"> <div :class="[$style.root, { [$style.noGap]: noGap }]">
<MkDateSeparatedList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes"> <MkDateSeparatedList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" :class="$style.notes">
<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/> <XNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
</MkDateSeparatedList> </MkDateSeparatedList>
</div> </div>
</template> </template>
@ -36,8 +36,8 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.giivymft { .root {
&.noGap { &.noGap {
> .notes { > .notes {
background: var(--panel); background: var(--panel);
@ -48,7 +48,7 @@ defineExpose({
> .notes { > .notes {
background: var(--bg); background: var(--bg);
.qtqtichx { .note {
background: var(--panel); background: var(--panel);
border-radius: var(--radius); border-radius: var(--radius);
} }