renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: reduce code duplication by using the VideoCardSkeleton

Browse Source
This commit is contained in:
Hakadao
2023-10-17 01:30:56 +08:00
parent 1df4cc0de1
commit e3219cb888
3 changed files with 3 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/contentScripts/views/Home/components/Following.vue
View File

@@ -101,30 +101,7 @@ function jumpToLoginPage() {
<!-- skeleton -->
<template v-if="isLoading">
<template v-for="item in 30" :key="item">
<div
mb-8 pointer-events-none select-none
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div w="50%" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
</div>
</div>
</div>
</div>
</template>
<VideoCardSkeleton v-for="item in 30" :key="item" />
</template>
</div>

24
src/contentScripts/views/Home/components/ForYou.vue
View File

@@ -182,29 +182,7 @@ function jumpToLoginPage() {
<!-- skeleton -->
<template v-if="isLoading">
<template v-for="item in 30" :key="item">
<div
mb-8 pointer-events-none select-none
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div w="50%" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
</div>
</div>
</div>
</div>
</template>
<VideoCardSkeleton v-for="item in 30" :key="item" />
</template>
</div>

42
src/contentScripts/views/Home/components/Trending.vue
View File

@@ -83,47 +83,7 @@ async function getFollowingAuthorVideos() {
<!-- skeleton -->
<template v-if="isLoading">
<template v-for="item in 30" :key="item">
<div
:style="{
display: 'flex',
gap: '1.5rem',
}"
mb-10 pointer-events-none select-none
>
<!-- Cover -->
<div :style="{ width: '250px' }" shrink-0 aspect-video h-fit bg="$bew-fill-4" rounded="$bew-radius" />
<!-- Other Information -->
<div
:style="{
width: '100%',
marginTop: '0'
}"
flex="~ gap-4"
>
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div :style="{ width: '70%' }" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div mt-4 flex>
<div v-if="item % 3 !== 0" mr-2 text="transparent sm" inline-block p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
</div>
<div text="transparent sm" inline-block p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
</div>
</div>
</div>
</div>
</div>
</template>
<VideoCardSkeleton v-for="item in 30" :key="item" horizontal />
</template>
</div>