🐛 Fix some style issue
This commit is contained in:
		| @@ -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