amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-15 14:03:28 +09:00
parent 1c0289e490
commit 07025caee9
3 changed files with 152 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
packages/frontend/src/widgets/WidgetCalendar.vue
View File

@ -1,31 +1,31 @@
<template> <template>
<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }"> <div :class="[$style.root, { _panel: !widgetProps.transparent }]">
<div class="calendar" :class="{ isHoliday }"> <div :class="[$style.calendar, { [$style.isHoliday]: isHoliday }]">
<p class="month-and-year"> <p :class="$style.monthAndYear">
<span class="year">{{ $t('yearX', { year }) }}</span> <span :class="$style.year">{{ $t('yearX', { year }) }}</span>
<span class="month">{{ $t('monthX', { month }) }}</span> <span :class="$style.month">{{ $t('monthX', { month }) }}</span>
</p> </p>
<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p> <p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
<p v-else class="day">{{ $t('dayX', { day }) }}</p> <p v-else :class="$style.day">{{ $t('dayX', { day }) }}</p>
<p class="week-day">{{ weekDay }}</p> <p :class="$style.weekDay">{{ weekDay }}</p>
</div> </div>
<div class="info"> <div :class="$style.info">
<div> <div :class="$style.infoSection">
<p>{{ i18n.ts.today }}<b>{{ dayP.toFixed(1) }}%</b></p> <p :class="$style.infoText">{{ i18n.ts.today }}<b :class="$style.percentage">{{ dayP.toFixed(1) }}%</b></p>
<div class="meter"> <div :class="$style.meter">
<div class="val" :style="{ width: `${dayP}%` }"></div> <div :class="$style.meterVal" :style="{ width: `${dayP}%` }"></div>
</div> </div>
</div> </div>
<div> <div :class="$style.infoSection">
<p>{{ i18n.ts.thisMonth }}<b>{{ monthP.toFixed(1) }}%</b></p> <p :class="$style.infoText">{{ i18n.ts.thisMonth }}<b :class="$style.percentage">{{ monthP.toFixed(1) }}%</b></p>
<div class="meter"> <div :class="$style.meter">
<div class="val" :style="{ width: `${monthP}%` }"></div> <div :class="$style.meterVal" :style="{ width: `${monthP}%` }"></div>
</div> </div>
</div> </div>
<div> <div :class="$style.infoSection">
<p>{{ i18n.ts.thisYear }}<b>{{ yearP.toFixed(1) }}%</b></p> <p :class="$style.infoText">{{ i18n.ts.thisYear }}<b :class="$style.percentage">{{ yearP.toFixed(1) }}%</b></p>
<div class="meter"> <div :class="$style.meter">
<div class="val" :style="{ width: `${yearP}%` }"></div> <div :class="$style.meterVal" :style="{ width: `${yearP}%` }"></div>
</div> </div>
</div> </div>
</div> </div>
@ -115,8 +115,8 @@ defineExpose<WidgetComponentExpose>({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.mkw-calendar { .root {
padding: 16px 0; padding: 16px 0;
&:after { &:after {
@ -124,91 +124,93 @@ defineExpose<WidgetComponentExpose>({
display: block; display: block;
clear: both; clear: both;
} }
}
> .calendar { .calendar {
float: left; float: left;
width: 60%; width: 60%;
text-align: center; text-align: center;
&.isHoliday {
> .day {
color: #ef95a0;
}
}
> .month-and-year, > .week-day {
margin: 0;
line-height: 18px;
font-size: 0.9em;
> .year, > .month {
margin: 0 4px;
}
}
&.isHoliday {
> .day { > .day {
margin: 10px 0; color: #ef95a0;
line-height: 32px;
font-size: 1.75em;
}
}
> .info {
display: block;
float: left;
width: 40%;
padding: 0 16px 0 0;
box-sizing: border-box;
> div {
margin-bottom: 8px;
&:last-child {
margin-bottom: 4px;
}
> p {
display: flex;
margin: 0 0 2px 0;
font-size: 0.75em;
line-height: 18px;
opacity: 0.8;
> b {
margin-left: auto;
}
}
> .meter {
width: 100%;
overflow: hidden;
background: var(--X11);
border-radius: 8px;
> .val {
height: 4px;
transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
}
}
&:nth-child(1) {
> .meter > .val {
background: #f7796c;
}
}
&:nth-child(2) {
> .meter > .val {
background: #a1de41;
}
}
&:nth-child(3) {
> .meter > .val {
background: #41ddde;
}
}
} }
} }
} }
.monthAndYear,
.weekDay {
margin: 0;
line-height: 18px;
font-size: 0.9em;
}
.year,
.month {
margin: 0 4px;
}
.day {
margin: 10px 0;
line-height: 32px;
font-size: 1.75em;
}
.info {
display: block;
float: left;
width: 40%;
padding: 0 16px 0 0;
box-sizing: border-box;
}
.infoSection {
margin-bottom: 8px;
&:last-child {
margin-bottom: 4px;
}
&:nth-child(1) {
> .meter > .meterVal {
background: #f7796c;
}
}
&:nth-child(2) {
> .meter > .meterVal {
background: #a1de41;
}
}
&:nth-child(3) {
> .meter > .meterVal {
background: #41ddde;
}
}
}
.infoText {
display: flex;
margin: 0 0 2px 0;
font-size: 0.75em;
line-height: 18px;
opacity: 0.8;
}
.percentage {
margin-left: auto;
}
.meter {
width: 100%;
overflow: hidden;
background: var(--X11);
border-radius: 8px;
}
.meterVal {
height: 4px;
transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
}
</style> </style>

20
packages/frontend/src/widgets/WidgetDigitalClock.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }"> <div class="_monospace" :class="[$style.root, { _panel: !widgetProps.transparent }]" :style="{ fontSize: `${widgetProps.fontSize}em` }">
<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div> <div v-if="widgetProps.showLabel" :class="$style.label">{{ tzAbbrev }}</div>
<div class="time"> <div>
<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/> <MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
</div> </div>
<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div> <div v-if="widgetProps.showLabel" :class="$style.label">{{ tzOffsetLabel }}</div>
</div> </div>
</template> </template>
@ -79,14 +79,14 @@ defineExpose<WidgetComponentExpose>({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.mkw-digitalClock { .root {
padding: 16px 0; padding: 16px 0;
text-align: center; text-align: center;
}
> .label { .label {
font-size: 65%; font-size: 65%;
opacity: 0.7; opacity: 0.7;
}
} }
</style> </style>

74
packages/frontend/src/widgets/WidgetMemo.vue
View File

@ -3,9 +3,9 @@
<template #icon><i class="ti ti-note"></i></template> <template #icon><i class="ti ti-note"></i></template>
<template #header>{{ i18n.ts._widgets.memo }}</template> <template #header>{{ i18n.ts._widgets.memo }}</template>
<div class="otgbylcu"> <div :class="$style.root">
<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea> <textarea v-model="text" :class="$style.textarea" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button> <button :class="$style.save" :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
</div> </div>
</MkContainer> </MkContainer>
</template> </template>
@ -68,45 +68,45 @@ defineExpose<WidgetComponentExpose>({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.otgbylcu { .root {
padding-bottom: 28px + 16px; padding-bottom: 28px + 16px;
}
> textarea { .textarea {
display: block; display: block;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;
padding: 16px; padding: 16px;
color: var(--fg); color: var(--fg);
background: transparent; background: transparent;
border: none; border: none;
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--divider);
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
font: inherit; font: inherit;
font-size: 0.9em; font-size: 0.9em;
&:focus-visible { &:focus-visible {
outline: none;
}
}
> button {
display: block;
position: absolute;
bottom: 8px;
right: 8px;
margin: 0;
padding: 0 10px;
height: 28px;
outline: none; outline: none;
border-radius: 4px; }
}
&:disabled { .save {
opacity: 0.7; display: block;
cursor: default; position: absolute;
} bottom: 8px;
right: 8px;
margin: 0;
padding: 0 10px;
height: 28px;
outline: none;
border-radius: 4px;
&:disabled {
opacity: 0.7;
cursor: default;
} }
} }
</style> </style>