Update announcements.vue

This commit is contained in:
syuilo 2023-08-13 12:01:01 +09:00
parent ad752a8931
commit 8d5a2ac0a1
1 changed files with 15 additions and 3 deletions

View File

@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<div <MkA
v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item" v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item" to="/announcements"
> >
<span :class="$style.icon"> <span :class="$style.icon">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i> <i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</span> </span>
<span :class="$style.title">{{ announcement.title }}</span> <span :class="$style.title">{{ announcement.title }}</span>
<span :class="$style.body">{{ announcement.text }}</span> <span :class="$style.body">{{ announcement.text }}</span>
</div> </MkA>
</div> </div>
</template> </template>
@ -43,6 +43,15 @@ import { $i } from '@/account';
contain: strict; contain: strict;
background: var(--accent); background: var(--accent);
color: var(--fgOnAccent); color: var(--fgOnAccent);
@container (max-width: 1000px) {
display: block;
text-align: center;
> .body {
display: none;
}
}
} }
.icon { .icon {
@ -61,5 +70,8 @@ import { $i } from '@/account';
.body { .body {
min-width: 0; min-width: 0;
flex: 1; flex: 1;
overflow: clip;
white-space: nowrap;
text-overflow: ellipsis;
} }
</style> </style>