From d5e92c3822b350b9d648a72aef7827ea9cf8c675 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Mon, 8 May 2023 10:32:08 +0900 Subject: [PATCH] refactor(frontend): use css modules --- .../frontend/src/components/MkUserInfo.vue | 196 +++++++++--------- .../frontend/src/components/MkUserList.vue | 6 +- 2 files changed, 101 insertions(+), 101 deletions(-) diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue index 5086c1b319..6349ada65a 100644 --- a/packages/frontend/src/components/MkUserInfo.vue +++ b/packages/frontend/src/components/MkUserInfo.vue @@ -1,30 +1,30 @@ <template> -<div class="_panel vjnjpkug"> - <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> - <MkAvatar class="avatar" :user="user" indicator/> - <div class="title"> - <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> - <p class="username"><MkAcct :user="user"/></p> +<div class="_panel" :class="$style.root"> + <div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> + <MkAvatar :class="$style.avatar" :user="user" indicator/> + <div :class="$style.title"> + <MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> + <p :class="$style.username"><MkAcct :user="user"/></p> </div> - <span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span> - <div class="description"> + <span v-if="$i && $i.id !== user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span> + <div :class="$style.description"> <div v-if="user.description" class="mfm"> <Mfm :text="user.description" :author="user" :i="$i"/> </div> <span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span> </div> - <div class="status"> - <div> - <p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span> + <div :class="$style.status"> + <div :class="$style.statusItem"> + <p :class="$style.statusItemLabel">{{ i18n.ts.notes }}</p><span :class="$style.statusItemValue">{{ user.notesCount }}</span> </div> - <div> - <p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span> + <div :class="$style.statusItem"> + <p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue">{{ user.followingCount }}</span> </div> - <div> - <p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span> + <div :class="$style.statusItem"> + <p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue">{{ user.followersCount }}</span> </div> </div> - <MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/> + <MkFollowButton v-if="$i && user.id != $i.id" :class="$style.follow" :user="user" mini/> </div> </template> @@ -40,99 +40,99 @@ defineProps<{ }>(); </script> -<style lang="scss" scoped> -.vjnjpkug { +<style lang="scss" module> +.root { position: relative; +} - > .banner { - height: 84px; - background-color: rgba(0, 0, 0, 0.1); - background-size: cover; - background-position: center; - } +.banner { + height: 84px; + background-color: rgba(0, 0, 0, 0.1); + background-size: cover; + background-position: center; +} - > .avatar { - display: block; - position: absolute; - top: 62px; - left: 13px; - z-index: 2; - width: 58px; - height: 58px; - border: solid 4px var(--panel); - } +.avatar { + display: block; + position: absolute; + top: 62px; + left: 13px; + z-index: 2; + width: 58px; + height: 58px; + border: solid 4px var(--panel); +} - > .title { - display: block; - padding: 10px 0 10px 88px; +.title { + display: block; + padding: 10px 0 10px 88px; +} - > .name { - display: inline-block; - margin: 0; - font-weight: bold; - line-height: 16px; - word-break: break-all; - } +.name { + display: inline-block; + margin: 0; + font-weight: bold; + line-height: 16px; + word-break: break-all; +} - > .username { - display: block; - margin: 0; - line-height: 16px; - font-size: 0.8em; - color: var(--fg); - opacity: 0.7; - } - } - - > .followed { - position: absolute; - top: 12px; - left: 12px; - padding: 4px 8px; - color: #fff; - background: rgba(0, 0, 0, 0.7); - font-size: 0.7em; - border-radius: 6px; - } - - > .description { - padding: 16px; - font-size: 0.8em; - border-top: solid 0.5px var(--divider); +.username { + display: block; + margin: 0; + line-height: 16px; + font-size: 0.8em; + color: var(--fg); + opacity: 0.7; +} - > .mfm { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - } - } +.followed { + position: absolute; + top: 12px; + left: 12px; + padding: 4px 8px; + color: #fff; + background: rgba(0, 0, 0, 0.7); + font-size: 0.7em; + border-radius: 6px; +} - > .status { - padding: 10px 16px; - border-top: solid 0.5px var(--divider); +.description { + padding: 16px; + font-size: 0.8em; + border-top: solid 0.5px var(--divider); +} - > div { - display: inline-block; - width: 33%; +.mfm { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} - > p { - margin: 0; - font-size: 0.7em; - color: var(--fg); - } +.status { + padding: 10px 16px; + border-top: solid 0.5px var(--divider); +} - > span { - font-size: 1em; - color: var(--accent); - } - } - } +.statusItem { + display: inline-block; + width: 33%; +} - > .koudoku-button { - position: absolute; - top: 8px; - right: 8px; - } +.statusItemLabel { + margin: 0; + font-size: 0.7em; + color: var(--fg); +} + +.statusItemValue { + font-size: 1em; + color: var(--accent); +} + +.follow { + position: absolute; + top: 8px; + right: 8px; } </style> diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue index 51eb426e97..3571ca84d9 100644 --- a/packages/frontend/src/components/MkUserList.vue +++ b/packages/frontend/src/components/MkUserList.vue @@ -8,7 +8,7 @@ </template> <template #default="{ items }"> - <div class="efvhhmdq"> + <div :class="$style.root"> <MkUserInfo v-for="item in items" :key="item.id" class="user" :user="extractor(item)"/> </div> </template> @@ -29,8 +29,8 @@ const props = withDefaults(defineProps<{ }); </script> -<style lang="scss" scoped> -.efvhhmdq { +<style lang="scss" module> +.root { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: var(--margin);