🐛 Fix some style issue

This commit is contained in:
LittleSheep 2024-04-02 23:29:28 +08:00
parent 8af78a26ba
commit 9ad11f4297
5 changed files with 31 additions and 16 deletions

View File

@ -23,13 +23,13 @@
<video v-else-if="item.type === 2" controls class="w-full content-visibility-auto">
<source :src="getUrl(item)" />
</video>
<div v-else-if="item.type === 3" class="w-[480px] py-12">
<div v-else-if="item.type === 3" class="py-5 px-2">
<div class="text-center">
<p class="mb-1">{{ getFileName(item) }}</p>
<audio controls :src="getUrl(item)" class="mx-auto"></audio>
<audio controls :src="getUrl(item)" class="mx-auto max-w-[85%]"></audio>
</div>
</div>
<div v-else class="w-[480px] py-12">
<div v-else class="py-5 px-2">
<div class="text-center">
<p>{{ getFileName(item) }}</p>
<a class="underline" target="_blank" :href="getUrl(item)">Download</a>

View File

@ -22,13 +22,13 @@
<video v-else-if="item.type === 2" controls class="w-full content-visibility-auto">
<source :src="getUrl(item)" />
</video>
<div v-else-if="item.type === 3" class="w-[480px] py-12">
<div v-else-if="item.type === 3" class="py-5 px-2">
<div class="text-center">
<p class="mb-1">{{ getFileName(item) }}</p>
<audio controls :src="getUrl(item)" class="mx-auto"></audio>
<audio controls :src="getUrl(item)" class="mx-auto max-w-[85%]"></audio>
</div>
</div>
<div v-else class="w-[480px] py-12">
<div v-else class="py-5 px-2">
<div class="text-center">
<p>{{ getFileName(item) }}</p>
<a class="underline" target="_blank" :href="getUrl(item)">Download</a>

View File

@ -1,10 +1,10 @@
<template>
<v-container class="wrapper overflow-auto h-auto no-scrollbar">
<div class="timeline mt-[-16px]">
<v-container class="wrapper h-auto no-scrollbar">
<div class="timeline min-w-0 mt-[-16px]">
<post-list v-model:posts="posts" :loader="readMore" />
</div>
<div class="aside w-full max-md:order-first">
<div class="aside min-w-0 w-full max-md:order-first">
<v-card title="Categories">
<v-list density="compact">
<v-list-item title="All" prepend-icon="mdi-apps" active></v-list-item>

View File

@ -1,10 +1,10 @@
<template>
<v-container class="flex max-md:flex-col gap-3 overflow-auto h-auto no-scrollbar">
<div class="timeline flex-grow-1 mt-[-16px]">
<v-container class="wrapper h-auto no-scrollbar">
<div class="timeline mt-[-16px]">
<post-list v-model:posts="posts" :loader="readMore" />
</div>
<div class="aside md:sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
<div class="aside max-md:order-first">
<v-card :loading="loading">
<template #title>
<div class="flex justify-between">
@ -123,3 +123,18 @@ function parseContent(src: string): string {
return dompurify().sanitize(parse(src) as string)
}
</script>
<style scoped>
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.75rem;
}
@media (max-width: 768px) {
.wrapper {
grid-template-columns: 1fr;
}
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<v-container class="wrapper overflow-auto h-auto no-scrollbar">
<div class="name-card col-span-2">
<v-container class="wrapper h-auto no-scrollbar">
<div class="min-w-0 name-card col-span-2">
<v-card class="w-full">
<v-img v-if="accountBanner" cover height="280px" :src="accountBanner" />
@ -24,7 +24,7 @@
</v-card>
</div>
<v-card class="browser h-fit">
<v-card class="min-w-0 browser h-fit">
<v-tabs v-model="tab" align-tabs="center" bg-color="grey-lighten-4">
<v-tab value="page">Personal Page</v-tab>
<v-tab value="timeline">Timeline</v-tab>
@ -50,7 +50,7 @@
</v-card-text>
</v-card>
<div class="aside h-fit max-md:order-first">
<div class="min-w-0 aside h-fit max-md:order-first">
<v-card prepend-icon="mdi-account-details" title="Bio">
<v-card-text class="flex flex-col gap-2.5">
<div>