97 lines
4.0 KiB
Vue
97 lines
4.0 KiB
Vue
<template>
|
|
<div class="gradient-profile relative">
|
|
<user-banner class="h-56 xl:h-80 bg-indigo-200" :user='user' size='hero' />
|
|
</div>
|
|
|
|
<div class="-mt-24 xl:-mt-32 relative xl:container xl:mx-auto px-2 md:px-3">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex-shrink-0 self-center md:self-start md:mr-6 2xl:mr-10">
|
|
<user-avatar :user='user' size='medium' class="shadow-classic object-cover w-48 h-48 xl:w-64 xl:h-64 text-5xl" />
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="h-24 xl:h-32 hidden md:block"></div>
|
|
<div class="mt-2 ">
|
|
|
|
<div class="-mx-2 -my-2 lg:-mx-4 lg:-my-4 flex flex-col md:flex-row flex-wrap xl:flex-nowrap">
|
|
<div class="max-w-[300px] text-center md:text-left mx-2 my-2 lg:mx-4 lg:my-4 flex flex-shrink-0 flex-col self-center md:self-start">
|
|
<h1 class="md:mb-3 text-2xl xl:text-4xl font-semibold text-white">{{ user.name }}</h1>
|
|
<h2 class="text-base xl:text-xl text-gray-light">@{{ user.username }}</h2>
|
|
</div>
|
|
<div class="mx-2 my-2 lg:mx-4 lg:my-4 self-center flex flex-1 flex-col">
|
|
<div class="md:mt-2">
|
|
<div class="flex 2xl:text-lg text-white -mx-4">
|
|
<inertia-link :href="route('profile.user', user.username)" class="block mx-4">
|
|
<span class="text-orange">{{counts.feeds}}</span> {{countPosts}}
|
|
</inertia-link>
|
|
<inertia-link :href="route('profile.subs', user.username)" class="block mx-4">
|
|
<span class="text-orange">{{counts.subscribers }}</span> {{countSubs}}
|
|
</inertia-link>
|
|
<inertia-link :href="route('profile.readers', user.username)" class="block mx-4">
|
|
<span class="text-orange">{{counts.readers}}</span> в читаемых
|
|
</inertia-link>
|
|
</div>
|
|
<div class="mt-4 text-gray-light text-sm">{{user.about}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-2 my-2 lg:mx-4 lg:my-4 2xl:flex-shrink-0 self-center text-center">
|
|
<inertia-link v-if="user.is_auth_user" class="inline-flex tracking-wide items-center px-4 py-3 border border-white text-sm 2xl:text-base text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2" :href="route('setting.index')">
|
|
Редактировать профиль
|
|
</inertia-link>
|
|
<toggle v-else
|
|
@clicked='susbscribe'
|
|
:user_id='user.id'
|
|
:enabled="user.is_sub"
|
|
textin='Подписаться' textout='Отписаться' />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import UserAvatar from "@/Shared/Misc/UserAvatar";
|
|
import UserBanner from "@/Shared/Misc/UserBanner";
|
|
import Toggle from "@/Shared/Form/Toggle";
|
|
import helper from "@/includes/helper";
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
|
|
export default {
|
|
components: {
|
|
Toggle,
|
|
UserAvatar,
|
|
UserBanner,
|
|
},
|
|
props: {
|
|
user: Object,
|
|
counts: Object,
|
|
},
|
|
computed: {
|
|
countPosts() {
|
|
return helper.declNumPosts(this.counts.posts);
|
|
},
|
|
countReaders() {
|
|
return helper.declNumReaders(this.counts.readers);
|
|
},
|
|
countSubs() {
|
|
return helper.declNumSubs(this.counts.subscribers);
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
susbscribe(user_id) {
|
|
Inertia.post(
|
|
route("users.subs", user_id),
|
|
{},
|
|
{ preserveScroll: true, preserveState: true }
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|