sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): use css modules

Browse Source
This commit is contained in:
syuilo
2023-05-14 10:21:56 +09:00
parent 89a3195dfd
commit 8c97c54cfa
40 changed files with 148 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/src/pages/admin/abuses.vue
View File

@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
<div class="lcixvhis">
<div>
<div class="reports">
<div class="">
<div class="inputs" style="display: flex;">
@@ -87,9 +87,3 @@ definePageMetadata({
icon: 'ti ti-exclamation-circle',
});
</script>
<style lang="scss" scoped>
.lcixvhis {
margin: var(--margin);
}
</style>

8
packages/frontend/src/pages/admin/announcements.vue
View File

@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
<div class="ztgjmzrw _gaps_m">
<div class="_gaps_m">
<section v-for="announcement in announcements" class="">
<div class="_panel _gaps_m" style="padding: 24px;">
<MkInput v-model="announcement.title">
@@ -113,9 +113,3 @@ definePageMetadata({
icon: 'ti ti-speakerphone',
});
</script>
<style lang="scss" scoped>
.ztgjmzrw {
margin: var(--margin);
}
</style>

8
packages/frontend/src/pages/admin/files.vue
View File

@@ -3,7 +3,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :content-max="900">
<div class="xrmjdkdw">
<div>
<div>
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
@@ -109,9 +109,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-cloud',
})));
</script>
<style lang="scss" scoped>
.xrmjdkdw {
margin: var(--margin);
}
</style>

4
packages/frontend/src/pages/admin/overview.pie.vue
View File

@@ -67,7 +67,3 @@ onMounted(() => {
});
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/admin/overview.queue.chart.vue
View File

@@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
<style lang="scss" scoped>
</style>

6
packages/frontend/src/pages/admin/overview.vue
View File

@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="1000">
<div ref="rootEl" class="edbbcaef">
<div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
@@ -176,8 +176,8 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.edbbcaef {
<style lang="scss" module>
.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 16px;

4
packages/frontend/src/pages/admin/queue.chart.chart.vue
View File

@@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/pages/emoji-edit-dialog.vue
View File

@@ -10,8 +10,8 @@
<template #header>:{{ emoji.name }}:</template>
<MkSpacer :margin-min="20" :margin-max="28">
<div class="yigymqpb _gaps_m">
<img :src="`/emoji/${emoji.name}.webp`" class="img"/>
<div class="_gaps_m">
<img :src="`/emoji/${emoji.name}.webp`" :class="$style.img"/>
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
</MkInput>
@@ -99,12 +99,10 @@ async function del() {
}
</script>
<style lang="scss" scoped>
.yigymqpb {
> .img {
display: block;
height: 64px;
margin: 0 auto;
}
<style lang="scss" module>
.img {
display: block;
height: 64px;
margin: 0 auto;
}
</style>

4
packages/frontend/src/pages/flash/flash-edit.vue
View File

@@ -442,7 +442,3 @@ definePageMetadata(computed(() => flash ? {
title: i18n.ts._play.new,
}));
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/pages/gallery/index.vue
View File

@@ -7,7 +7,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -15,7 +15,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -23,7 +23,7 @@
</div>
<div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div>
</MkPagination>
@@ -31,7 +31,7 @@
<div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
<MkPagination v-slot="{items}" :pagination="myPostsPagination">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -119,15 +119,11 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.vfpdbgtk {
<style lang="scss" module>
.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin);
> .post {
}
}
</style>

4
packages/frontend/src/pages/my-antennas/create.vue
View File

@@ -38,7 +38,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/my-antennas/edit.vue
View File

@@ -36,7 +36,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/pages/my-antennas/editor.vue
View File

@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="700">
<div class="shaynizk">
<div>
<div class="_gaps_m">
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
@@ -33,7 +33,7 @@
<MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ i18n.ts.notifyAntenna }}</MkSwitch>
</div>
<div class="actions">
<div :class="$style.actions">
<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
@@ -128,12 +128,10 @@ function addUser() {
}
</script>
<style lang="scss" scoped>
.shaynizk {
> .actions {
margin-top: 16px;
padding: 24px 0;
border-top: solid 0.5px var(--divider);
}
<style lang="scss" module>
.actions {
margin-top: 16px;
padding: 24px 0;
border-top: solid 0.5px var(--divider);
}
</style>

12
packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
View File

@@ -8,8 +8,8 @@
</button>
</template>
<section class="oyyftmcf">
<MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
<section>
<MkDriveFileThumbnail v-if="file" style="height: 150px;" :file="file" fit="contain" @click="choose()"/>
</section>
</XContainer>
</template>
@@ -54,11 +54,3 @@ onMounted(async () => {
}
});
</script>
<style lang="scss" scoped>
.oyyftmcf {
> .preview {
height: 150px;
}
}
</style>

38
packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
View File

@@ -3,8 +3,8 @@
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
<section class="vckmsadr">
<textarea v-model="text"></textarea>
<section>
<textarea v-model="text" :class="$style.textarea"></textarea>
</section>
</XContainer>
</template>
@@ -33,23 +33,21 @@ watch($$(text), () => {
});
</script>
<style lang="scss" scoped>
.vckmsadr {
> textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 100%;
min-height: 150px;
border: none;
box-shadow: none;
padding: 16px;
background: transparent;
color: var(--fg);
font-size: 14px;
box-sizing: border-box;
}
<style lang="scss" module>
.textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 100%;
min-height: 150px;
border: none;
box-shadow: none;
padding: 16px;
background: transparent;
color: var(--fg);
font-size: 14px;
box-sizing: border-box;
}
</style>

8
packages/frontend/src/pages/preview.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="graojtoi">
<div>
<MkSample/>
</div>
</template>
@@ -19,9 +19,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-eye',
})));
</script>
<style lang="scss" scoped>
.graojtoi {
padding: var(--margin);
}
</style>

3
packages/frontend/src/pages/registry.keys.vue
View File

@@ -93,6 +93,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
<style lang="scss" scoped>
</style>

3
packages/frontend/src/pages/registry.value.vue
View File

@@ -118,6 +118,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
<style lang="scss" scoped>
</style>

3
packages/frontend/src/pages/registry.vue
View File

@@ -68,6 +68,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/reset-password.vue
View File

@@ -53,7 +53,3 @@ definePageMetadata({
icon: 'ti ti-lock',
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/settings/plugin.vue
View File

@@ -94,7 +94,3 @@ definePageMetadata({
icon: 'ti ti-plug',
});
</script>
<style lang="scss" scoped>
</style>

59
packages/frontend/src/pages/settings/profile.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="_gaps_m">
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div class="avatar">
<MkAvatar class="avatar" :user="$i" @click="changeAvatar"/>
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
<div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
<MkButton primary rounded :class="$style.avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>
<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<MkInput v-model="profile.name" :max="30" manual-save>
@@ -248,36 +248,39 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.llvierxe {
<style lang="scss" module>
.avatarAndBanner {
position: relative;
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
overflow: clip;
> .avatar {
display: inline-block;
text-align: center;
padding: 16px;
> .avatar {
display: inline-block;
width: 72px;
height: 72px;
margin: 0 auto 16px auto;
}
}
> .bannerEdit {
position: absolute;
top: 16px;
right: 16px;
}
}
</style>
<style lang="scss" module>
.avatarContainer {
display: inline-block;
text-align: center;
padding: 16px;
}
.avatar {
display: inline-block;
width: 72px;
height: 72px;
margin: 0 auto 16px auto;
}
.avatarEdit {
}
.bannerEdit {
position: absolute;
top: 16px;
right: 16px;
}
.metadataRoot {
container-type: inline-size;
}

28
packages/frontend/src/pages/settings/reaction.vue
View File

@@ -3,15 +3,15 @@
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<Sortable v-model="reactions" :class="$style.reactions" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</Sortable>
</div>
@@ -135,20 +135,20 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.zoaiodol {
<style lang="scss" module>
.reactions {
padding: 12px;
font-size: 1.1em;
}
> .item {
display: inline-block;
padding: 8px;
cursor: move;
}
.reactionsItem {
display: inline-block;
padding: 8px;
cursor: move;
}
> .add {
display: inline-block;
padding: 8px;
}
.reactionsAdd {
display: inline-block;
padding: 8px;
}
</style>

4
packages/frontend/src/pages/share.vue
View File

@@ -16,7 +16,7 @@
class="_panel"
@posted="state = 'posted'"
/>
<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
<MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
</MkSpacer>
</MkStickyContainer>
</template>
@@ -162,7 +162,7 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
<style lang="scss" module>
.close {
margin: 16px auto;
}

4
packages/frontend/src/pages/signup-complete.vue
View File

@@ -35,7 +35,3 @@ definePageMetadata({
icon: 'ti ti-user',
});
</script>
<style lang="scss" scoped>
</style>