You've already forked AstralRinth
forked from didirus/AstralRinth
6a70acef25
* Update ad placeholders to new green graphic * Remove rounded corners from app ad frame * Improve web ad placeholder styling * Revamp app sidebar to match mockups more closely, greatly improve friends UX, fix up context menus and typify shit * only show overflow on hover * lint * intl:extract * clean up the inline code in FriendsSection
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import { init_ads_window } from '@/helpers/ads.js'
|
|
|
|
const adsWrapper = ref(null)
|
|
|
|
let devicePixelRatioWatcher = null
|
|
|
|
function initDevicePixelRatioWatcher() {
|
|
if (devicePixelRatioWatcher) {
|
|
devicePixelRatioWatcher.removeEventListener('change', updateAdPosition)
|
|
}
|
|
|
|
devicePixelRatioWatcher = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
|
|
devicePixelRatioWatcher.addEventListener('change', updateAdPosition)
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateAdPosition()
|
|
|
|
window.addEventListener('resize', updateAdPosition)
|
|
initDevicePixelRatioWatcher()
|
|
})
|
|
|
|
function updateAdPosition() {
|
|
if (adsWrapper.value) {
|
|
init_ads_window()
|
|
initDevicePixelRatioWatcher()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
|
|
<a
|
|
href="https://modrinth.gg/medal?from=app-placeholder"
|
|
target="_blank"
|
|
class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
|
|
>
|
|
<img
|
|
src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light-new.webp"
|
|
alt="Host your next server with Modrinth Servers"
|
|
class="hidden light-image rounded-[inherit]"
|
|
/>
|
|
<img
|
|
src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark-new.webp"
|
|
alt="Host your next server with Modrinth Servers"
|
|
class="dark-image rounded-[inherit]"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.light,
|
|
.light-mode {
|
|
.dark-image {
|
|
display: none;
|
|
}
|
|
|
|
.light-image {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|