From 91105845d87f2a929b13dab5936d317c93382991 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 14 Jan 2023 11:18:12 +0900 Subject: [PATCH] refactor(client): use css modules --- .../frontend/src/ui/deck/antenna-column.vue | 3 --- packages/frontend/src/ui/deck/list-column.vue | 3 --- packages/frontend/src/ui/deck/tl-column.vue | 22 +++++++++---------- .../frontend/src/ui/deck/widgets-column.vue | 16 +++++++------- 4 files changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue index 53d744676c..4c69c8e8e8 100644 --- a/packages/frontend/src/ui/deck/antenna-column.vue +++ b/packages/frontend/src/ui/deck/antenna-column.vue @@ -65,6 +65,3 @@ defineExpose({ }); */ </script> - -<style lang="scss" scoped> -</style> diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue index e31446ebb2..58633e5672 100644 --- a/packages/frontend/src/ui/deck/list-column.vue +++ b/packages/frontend/src/ui/deck/list-column.vue @@ -53,6 +53,3 @@ const menu = [{ action: setList, }]; </script> - -<style lang="scss" scoped> -</style> diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue index b8a0a504a3..8bde7e4ce3 100644 --- a/packages/frontend/src/ui/deck/tl-column.vue +++ b/packages/frontend/src/ui/deck/tl-column.vue @@ -8,12 +8,12 @@ <span style="margin-left: 8px;">{{ column.name }}</span> </template> - <div v-if="disabled" class="iwaalbte"> - <p> + <div v-if="disabled" :class="$style.disabled"> + <p :class="$style.disabledTitle"> <i class="ti ti-minus-circle"></i> {{ $t('disabled-timeline.title') }} </p> - <p class="desc">{{ $t('disabled-timeline.description') }}</p> + <p :class="$style.disabledDescription">{{ $t('disabled-timeline.description') }}</p> </div> <XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/> </XColumn> @@ -80,16 +80,16 @@ const menu = [{ }]; </script> -<style lang="scss" scoped> -.iwaalbte { +<style lang="scss" module> +.disabled { text-align: center; +} - > p { - margin: 16px; +.disabledTitle { + margin: 16px; +} - &.desc { - font-size: 14px; - } - } +.disabledDescription { + font-size: 90%; } </style> diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue index edc54c1c2b..3b5b727991 100644 --- a/packages/frontend/src/ui/deck/widgets-column.vue +++ b/packages/frontend/src/ui/deck/widgets-column.vue @@ -2,8 +2,8 @@ <XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)"> <template #header><i class="ti ti-apps" style="margin-right: 8px;"></i>{{ column.name }}</template> - <div class="wtdtxvec"> - <div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div> + <div :class="$style.root"> + <div v-if="!(column.widgets && column.widgets.length > 0) && !edit" :class="$style.intro">{{ i18n.ts._deck.widgetsIntroduction }}</div> <XWidgets :edit="edit" :widgets="column.widgets ?? []" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/> </div> </XColumn> @@ -54,16 +54,16 @@ const menu = [{ }]; </script> -<style lang="scss" scoped> -.wtdtxvec { +<style lang="scss" module> +.root { --margin: 8px; --panelBorder: none; padding: 0 var(--margin); +} - > .intro { - padding: 16px; - text-align: center; - } +.intro { + padding: 16px; + text-align: center; } </style>