🐛 Fix some style issue
This commit is contained in:
parent
8af78a26ba
commit
9ad11f4297
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
@ -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>
|
||||
|
Reference in New Issue
Block a user