summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkChannelPreview.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/MkChannelPreview.vue')
-rw-r--r--packages/client/src/components/MkChannelPreview.vue154
1 files changed, 0 insertions, 154 deletions
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
deleted file mode 100644
index 6ef50bddcf..0000000000
--- a/packages/client/src/components/MkChannelPreview.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
- <div class="banner" :style="bannerStyle">
- <div class="fade"></div>
- <div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div>
- <div class="status">
- <div>
- <i class="ti ti-users ti-fw"></i>
- <I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
- <template #n>
- <b>{{ channel.usersCount }}</b>
- </template>
- </I18n>
- </div>
- <div>
- <i class="ti ti-pencil ti-fw"></i>
- <I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
- <template #n>
- <b>{{ channel.notesCount }}</b>
- </template>
- </I18n>
- </div>
- </div>
- </div>
- <article v-if="channel.description">
- <p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
- </article>
- <footer>
- <span v-if="channel.lastNotedAt">
- {{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
- </span>
- </footer>
-</MkA>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
- channel: Record<string, any>;
-}>();
-
-const bannerStyle = computed(() => {
- if (props.channel.bannerUrl) {
- return { backgroundImage: `url(${props.channel.bannerUrl})` };
- } else {
- return { backgroundColor: '#4c5e6d' };
- }
-});
-</script>
-
-<style lang="scss" scoped>
-.eftoefju {
- display: block;
- overflow: hidden;
- width: 100%;
-
- &:hover {
- text-decoration: none;
- }
-
- > .banner {
- position: relative;
- width: 100%;
- height: 200px;
- background-position: center;
- background-size: cover;
-
- > .fade {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 64px;
- background: linear-gradient(0deg, var(--panel), var(--X15));
- }
-
- > .name {
- position: absolute;
- top: 16px;
- left: 16px;
- padding: 12px 16px;
- background: rgba(0, 0, 0, 0.7);
- color: #fff;
- font-size: 1.2em;
- }
-
- > .status {
- position: absolute;
- z-index: 1;
- bottom: 16px;
- right: 16px;
- padding: 8px 12px;
- font-size: 80%;
- background: rgba(0, 0, 0, 0.7);
- border-radius: 6px;
- color: #fff;
- }
- }
-
- > article {
- padding: 16px;
-
- > p {
- margin: 0;
- font-size: 1em;
- }
- }
-
- > footer {
- padding: 12px 16px;
- border-top: solid 0.5px var(--divider);
-
- > span {
- opacity: 0.7;
- font-size: 0.9em;
- }
- }
-
- @media (max-width: 550px) {
- font-size: 0.9em;
-
- > .banner {
- height: 80px;
-
- > .status {
- display: none;
- }
- }
-
- > article {
- padding: 12px;
- }
-
- > footer {
- display: none;
- }
- }
-
- @media (max-width: 500px) {
- font-size: 0.8em;
-
- > .banner {
- height: 70px;
- }
-
- > article {
- padding: 8px;
- }
- }
-}
-
-</style>