natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(client): use css modules

This commit is contained in:
syuilo 2023-01-14 12:30:32 +09:00
parent 203a7ad073
commit 4b1009b34e
1 changed files with 90 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
packages/frontend/src/components/global/MkAd.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div v-if="chosen" class="qiivuoyo"> <div v-if="chosen" :class="$style.root">
<div v-if="!showMenu" class="main" :class="chosen.place"> <div v-if="!showMenu" :class="[$style.main, $style['form_' + chosen.place]]">
<a :href="chosen.url" target="_blank"> <a :href="chosen.url" target="_blank" :class="$style.link">
<img :src="chosen.imageUrl"> <img :src="chosen.imageUrl" :class="$style.img">
<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="ti ti-info-circle info-circle"></span></button> <button class="_button" :class="$style.i" @click.prevent.stop="toggleMenu"><i :class="$style.iIcon" class="ti ti-info-circle"></i></button>
</a> </a>
</div> </div>
<div v-else class="menu"> <div v-else :class="$style.menu">
<div class="body"> <div :class="$style.menuContainer">
<div>Ads by {{ host }}</div> <div>Ads by {{ host }}</div>
<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>--> <!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton> <MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button> <button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
</div> </div>
</div> </div>
@ -92,95 +92,99 @@ function reduceFrequency(): void {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.qiivuoyo { .root {
background-size: auto auto; background-size: auto auto;
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px ); background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
}
> .main { .main {
text-align: center; text-align: center;
> a { &.form_square {
> .link,
> .link > .img {
max-width: min(300px, 100%);
max-height: 300px;
}
}
&.form_horizontal {
padding: 8px;
> .link,
> .link > .img {
max-width: min(600px, 100%);
max-height: 80px;
}
}
&.form_horizontal-big {
padding: 8px;
> .link,
> .link > .img {
max-width: min(600px, 100%);
max-height: 250px;
}
}
&.form_vertical {
> .link,
> .link > .img {
max-width: min(100px, 100%);
}
}
}
.link {
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: bottom; vertical-align: bottom;
&:hover { &:hover {
> img { > .img {
filter: contrast(120%); filter: contrast(120%);
} }
} }
}
> img { .img {
display: block; display: block;
object-fit: contain; object-fit: contain;
margin: auto; margin: auto;
border-radius: 5px; border-radius: 5px;
} }
> .menu { .i {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 1px; right: 1px;
display: grid;
> .info-circle { place-content: center;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--panel); background: var(--panel);
} border-radius: 100%;
} padding: 2px;
} }
&.square { .iIcon {
> a , font-size: 14px;
> a > img { line-height: 17px;
max-width: min(300px, 100%);
max-height: 300px;
}
} }
&.horizontal { .menu {
padding: 8px;
> a ,
> a > img {
max-width: min(600px, 100%);
max-height: 80px;
}
}
&.horizontal-big {
padding: 8px;
> a ,
> a > img {
max-width: min(600px, 100%);
max-height: 250px;
}
}
&.vertical {
> a ,
> a > img {
max-width: min(100px, 100%);
}
}
}
> .menu {
padding: 8px; padding: 8px;
text-align: center; text-align: center;
}
> .body { .menuContainer {
padding: 8px; padding: 8px;
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 400px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
}
> .button { .menuButton {
margin: 8px auto; margin: 8px auto;
} }
}
}
}
</style> </style>