oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues 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
Download patch file Download diff file Expand all files Collapse all files

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

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