monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 20:31:48 +09:00
parent 8451e08aaa
commit 4606f23ed8
5 changed files with 70 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/frontend/src/components/MkFormDialog.vue
View file

@ -15,7 +15,7 @@
</template> </template>
<MkSpacer :margin-min="20" :margin-max="32"> <MkSpacer :margin-min="20" :margin-max="32">
<div class="xkpnjxcv _gaps_m"> <div class="_gaps_m">
<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)"> <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
<MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"> <MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
@ -119,9 +119,3 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style lang="scss" scoped>
.xkpnjxcv {
}
</style>

50
packages/frontend/src/components/MkGoogle.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-google"> <div :class="$style.root">
<input v-model="query" type="search" :placeholder="q"> <input v-model="query" :class="$style.input" type="search" :placeholder="q">
<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button> <button :class="$style.button" @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
</div> </div>
</template> </template>
@ -19,33 +19,33 @@ const search = () => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.mk-google { .root {
display: flex; display: flex;
margin: 8px 0; margin: 8px 0;
}
> input { .input {
flex-shrink: 1; flex-shrink: 1;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
-webkit-appearance: textfield; -webkit-appearance: textfield;
} }
> button { .button {
flex-shrink: 0; flex-shrink: 0;
margin: 0; margin: 0;
padding: 0 16px; padding: 0 16px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-left: none; border-left: none;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
&:active { &:active {
box-shadow: 0 2px 4px rgba(#000, 0.15) inset; box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
}
} }
} }
</style> </style>

44
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="xubzgfgb" :class="{ cover }" :title="title"> <div :class="[$style.root, { [$style.cover]: cover }]" :title="title">
<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/> <canvas v-if="!loaded" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/> <img v-if="src" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
</div> </div>
</template> </template>
@ -45,32 +45,32 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.xubzgfgb { .root {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
> canvas,
> img {
display: block;
width: 100%;
height: 100%;
}
> canvas {
position: absolute;
object-fit: cover;
}
> img {
object-fit: contain;
}
&.cover { &.cover {
> img { > .img {
object-fit: cover; object-fit: cover;
} }
} }
} }
.canvas,
.img {
display: block;
width: 100%;
height: 100%;
}
.canvas {
position: absolute;
object-fit: cover;
}
.img {
object-fit: contain;
}
</style> </style>

14
packages/frontend/src/components/MkLaunchPad.vue
View file

@ -3,12 +3,12 @@
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"> <div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main"> <div class="main">
<template v-for="item in items"> <template v-for="item in items">
<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }"> <button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</button> </button>
<MkA v-else v-click-anime :to="item.to" @click.passive="close()"> <MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
@ -82,11 +82,11 @@ function close() {
text-align: center; text-align: center;
} }
> .main, > .sub { > .main {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
> * { > .item {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -128,11 +128,5 @@ function close() {
} }
} }
} }
> .sub {
margin-top: 8px;
padding-top: 8px;
border-top: solid 0.5px var(--divider);
}
} }
</style> </style>

42
packages/frontend/src/components/MkMention.vue
View file

@ -1,17 +1,11 @@
<template> <template>
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }"> <MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
<img class="icon" :src="`/avatar/@${username}@${host}`" alt=""> <img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
<span class="main"> <span>
<span class="username">@{{ username }}</span> <span :class="$style.username">@{{ username }}</span>
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span> <span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.host">@{{ toUnicode(host) }}</span>
</span> </span>
</MkA> </MkA>
<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
<span class="main">
<span class="username">@{{ username }}</span>
<span class="host">@{{ toUnicode(host) }}</span>
</span>
</a>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -39,8 +33,8 @@ bg.setAlpha(0.1);
const bgCss = bg.toRgbString(); const bgCss = bg.toRgbString();
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.akbvjaqn { .root {
display: inline-block; display: inline-block;
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
border-radius: 999px; border-radius: 999px;
@ -49,18 +43,18 @@ const bgCss = bg.toRgbString();
&.isMe { &.isMe {
color: var(--mentionMe); color: var(--mentionMe);
} }
}
> .icon { .icon {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
object-fit: cover; object-fit: cover;
margin: 0 0.2em 0 0; margin: 0 0.2em 0 0;
vertical-align: bottom; vertical-align: bottom;
border-radius: 100%; border-radius: 100%;
} }
> .main > .host { .host {
opacity: 0.5; opacity: 0.5;
}
} }
</style> </style>