refactor
This commit is contained in:
syuilo
parent
c5f9b1c224
commit
25d1b66ca4
3 changed files with 118 additions and 99 deletions
|
|
@ -1,14 +1,20 @@
|
|||
<template>
|
||||
<span v-if="!fetching" class="nmidsaqw">
|
||||
<span v-if="!fetching" :class="$style.root">
|
||||
<template v-if="display === 'marquee'">
|
||||
<Transition name="change" mode="default">
|
||||
<Transition
|
||||
:enterActiveClass="$style.transition_change_enterActive"
|
||||
:leaveActiveClass="$style.transition_change_leaveActive"
|
||||
:enterFromClass="$style.transition_change_enterFrom"
|
||||
:leaveToClass="$style.transition_change_leaveTo"
|
||||
mode="default"
|
||||
>
|
||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
||||
<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
|
||||
<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
|
||||
<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
|
||||
<span v-for="instance in instances" :key="instance.id" :class="[$style.item, { [$style.colored]: colored }]" :style="{ background: colored ? instance.themeColor : null }">
|
||||
<img :class="$style.icon" :src="getInstanceIcon(instance)" alt=""/>
|
||||
<MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
|
||||
{{ instance.host }}
|
||||
</MkA>
|
||||
<span class="divider"></span>
|
||||
<span :class="$style.divider"></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</Transition>
|
||||
|
|
@ -61,46 +67,47 @@ function getInstanceIcon(instance): string {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-enter-active, .change-leave-active {
|
||||
<style lang="scss" module>
|
||||
.transition_change_enterActive,
|
||||
.transition_change_leaveActive {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.change-enter-from {
|
||||
opacity: 0;
|
||||
.transition_change_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.change-leave-to {
|
||||
opacity: 0;
|
||||
.transition_change_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.nmidsaqw {
|
||||
.root {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep(.item) {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: 5em;
|
||||
.item {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: 5em;
|
||||
|
||||
> .icon {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
vertical-align: bottom;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
> .host {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
padding-right: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
&.colored {
|
||||
padding-right: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
vertical-align: bottom;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.host {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<span v-if="!fetching" class="xbhtxfms">
|
||||
<span v-if="!fetching" :class="$style.root">
|
||||
<template v-if="display === 'marquee'">
|
||||
<Transition name="change" mode="default">
|
||||
<Transition
|
||||
:enterActiveClass="$style.transition_change_enterActive"
|
||||
:leaveActiveClass="$style.transition_change_leaveActive"
|
||||
:enterFromClass="$style.transition_change_enterFrom"
|
||||
:leaveToClass="$style.transition_change_leaveTo"
|
||||
mode="default"
|
||||
>
|
||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
||||
<span v-for="item in items" class="item">
|
||||
<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
|
||||
<span v-for="item in items" :class="$style.item">
|
||||
<a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</Transition>
|
||||
|
|
@ -54,39 +60,40 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-enter-active, .change-leave-active {
|
||||
<style lang="scss" module>
|
||||
.transition_change_enterActive,
|
||||
.transition_change_leaveActive {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.change-enter-from {
|
||||
opacity: 0;
|
||||
.transition_change_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.change-leave-to {
|
||||
opacity: 0;
|
||||
.transition_change_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.xbhtxfms {
|
||||
.root {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep(.item) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
margin: 0;
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .divider {
|
||||
display: inline-block;
|
||||
width: 0.5px;
|
||||
height: var(--height);
|
||||
margin: 0 3em;
|
||||
background: currentColor;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
display: inline-block;
|
||||
width: 0.5px;
|
||||
height: var(--height);
|
||||
margin: 0 3em;
|
||||
background: currentColor;
|
||||
opacity: 0.3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<template>
|
||||
<span v-if="!fetching" class="osdsvwzy">
|
||||
<span v-if="!fetching" :class="$style.root">
|
||||
<template v-if="display === 'marquee'">
|
||||
<Transition name="change" mode="default">
|
||||
<Transition
|
||||
:enterActiveClass="$style.transition_change_enterActive"
|
||||
:leaveActiveClass="$style.transition_change_leaveActive"
|
||||
:enterFromClass="$style.transition_change_enterFrom"
|
||||
:leaveToClass="$style.transition_change_leaveTo"
|
||||
mode="default"
|
||||
>
|
||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
||||
<span v-for="note in notes" :key="note.id" class="item">
|
||||
<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
|
||||
<MkA class="text" :to="notePage(note)">
|
||||
<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
|
||||
<span v-for="note in notes" :key="note.id" :class="$style.item">
|
||||
<img :class="$style.avatar" :src="note.user.avatarUrl" decoding="async"/>
|
||||
<MkA :class="$style.text" :to="notePage(note)">
|
||||
<Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
|
||||
</MkA>
|
||||
<span class="divider"></span>
|
||||
<span :class="$style.divider"></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</Transition>
|
||||
|
|
@ -60,54 +66,53 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-enter-active, .change-leave-active {
|
||||
<style lang="scss" module>
|
||||
.transition_change_enterActive,
|
||||
.transition_change_leaveActive {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.change-enter-from {
|
||||
opacity: 0;
|
||||
.transition_change_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.change-leave-to {
|
||||
opacity: 0;
|
||||
.transition_change_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.osdsvwzy {
|
||||
.root {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep(.item) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
margin: 0;
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> .text {
|
||||
> .text {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
> .divider {
|
||||
display: inline-block;
|
||||
width: 0.5px;
|
||||
height: 16px;
|
||||
margin: 0 3em;
|
||||
background: currentColor;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
display: inline-block;
|
||||
width: 0.5px;
|
||||
height: 16px;
|
||||
margin: 0 3em;
|
||||
background: currentColor;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue