Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(client): rendering performance tweak a bit

Browse Source
This commit is contained in:
syuilo 2022-07-05 23:13:28 +09:00
parent bc73ad2e56
commit bf186de56c
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/remote-caution.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div> <div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -15,7 +15,7 @@ defineProps<{
background: var(--infoWarnBg); background: var(--infoWarnBg);
color: var(--infoWarnFg); color: var(--infoWarnFg);
> a { > .link {
margin-left: 4px; margin-left: 4px;
color: var(--accent); color: var(--accent);
} }

10
packages/client/src/components/url-preview.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview"> <div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url"> <component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`"> <div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
<button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button> <button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
</div> </div>
@ -57,7 +57,7 @@ let sitename = $ref<string | null>(null);
let player = $ref({ let player = $ref({
url: null, url: null,
width: null, width: null,
height: null height: null,
}); });
let playerEnabled = $ref(false); let playerEnabled = $ref(false);
let tweetId = $ref<string | null>(null); let tweetId = $ref<string | null>(null);
@ -143,7 +143,7 @@ onUnmounted(() => {
.mk-url-preview { .mk-url-preview {
&.max-width_400px { &.max-width_400px {
> a { > .link {
font-size: 12px; font-size: 12px;
> .thumbnail { > .thumbnail {
@ -157,7 +157,7 @@ onUnmounted(() => {
} }
&.max-width_350px { &.max-width_350px {
> a { > .link {
font-size: 10px; font-size: 10px;
> .thumbnail { > .thumbnail {
@ -205,7 +205,7 @@ onUnmounted(() => {
} }
} }
> a { > .link {
position: relative; position: relative;
display: block; display: block;
font-size: 14px; font-size: 14px;