first commit
This commit is contained in:
f4ilji
@@ -0,0 +1,106 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
journals: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Научные периодические издания НТГСПИ</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<!-- Card Section -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Научные периодические издания НТГСПИ</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">We've helped some great companies brand, design and get to market.</p>
|
||||
</div>
|
||||
<!-- Grid -->
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
|
||||
<template v-for="journal in journals.data">
|
||||
<Link :href="route('client.academicJournals.show', journal.slug)" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
|
||||
<div class="p-4 md:p-5 w-full">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="grow">
|
||||
<h3 class="group-hover:text-blue-600 font-semibold text-gray-800">
|
||||
{{ journal.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="shrink-0 size-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
<!-- End Card Section -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,317 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
ClientImageSlider,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
journal: {
|
||||
type: Object
|
||||
},
|
||||
journals: {
|
||||
type: Object
|
||||
},
|
||||
years: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transformToColumns(originalArray) {
|
||||
const chunkArray = (arr, size) => {
|
||||
return arr.reduce((acc, _, i) => (i % size ? acc : [...acc, arr.slice(i, i + size)]), []);
|
||||
};
|
||||
|
||||
const dividedArrays = chunkArray(originalArray, Math.ceil(originalArray.length / 2));
|
||||
|
||||
return dividedArrays.reverse();
|
||||
},
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Журнал</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
|
||||
<div class="w-100">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-10 md:space-y-8">
|
||||
<h1 class="text-brand-primary text-center mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ journal.data.title }}
|
||||
</h1>
|
||||
<div>
|
||||
<nav class="-mb-0.5 flex justify-center gap-x-6" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none active"
|
||||
id="horizontal-alignment-item-1" aria-selected="true" data-hs-tab="#horizontal-alignment-1" aria-controls="horizontal-alignment-1" role="tab">
|
||||
Основная информация журнала
|
||||
</button>
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
id="horizontal-alignment-item-2" aria-selected="false" data-hs-tab="#horizontal-alignment-2" aria-controls="horizontal-alignment-2" role="tab">
|
||||
Редакция
|
||||
</button>
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
id="horizontal-alignment-item-3" aria-selected="false" data-hs-tab="#horizontal-alignment-3" aria-controls="horizontal-alignment-3" role="tab">
|
||||
Информация для авторов
|
||||
</button>
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
id="horizontal-alignment-item-3" aria-selected="false" data-hs-tab="#horizontal-alignment-4" aria-controls="horizontal-alignment-4" role="tab">
|
||||
Архив
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
<div class="container px-8 xl:px-5 py-3 lg:py-4 w-4/5 mx-auto">
|
||||
<div id="horizontal-alignment-1" role="tabpanel" aria-labelledby="horizontal-alignment-item-1">
|
||||
<template v-for="block in journal.data.main_info" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[15px] text-[#374151] paragraph-container leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url" />
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div id="horizontal-alignment-2" class="hidden w-full" role="tabpanel" aria-labelledby="horizontal-alignment-item-2">
|
||||
<template v-for="block in journal.data.chief_editor" :key="block.id">
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<!-- <img loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + worker.details.photo" alt="Image Description">-->
|
||||
<div class="grow">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
Главный редактор: {{ block.name }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Ученая степень: {{ block.academicTitle }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Должность: {{ block.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Учереждение: {{ block.institution }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template v-for="block in journal.data.editors" :key="block.id">
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<!-- <img loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + worker.details.photo" alt="Image Description">-->
|
||||
<div class="grow">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500">
|
||||
{{ block.name }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Ученая степень: {{ block.academicTitle }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Должность: {{ block.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Учереждение: {{ block.institution }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="horizontal-alignment-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-3">
|
||||
<template v-for="block in journal.data.for_authors" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] paragraph-container leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url" />
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div id="horizontal-alignment-4" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-4">
|
||||
<!-- List -->
|
||||
<!-- Card Section -->
|
||||
<div class="px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Grid -->
|
||||
<div class="">
|
||||
<template v-for="journalByYear in journals">
|
||||
<h2 class="font-bold text-xl text-center">{{ journalByYear.year_publication }}</h2>
|
||||
<hr class="mb-4 mt-2">
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 mb-4">
|
||||
<template v-for="item in journalByYear.journalIssues">
|
||||
<a target="_blank" class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" :href="'/storage/' + item.path_file">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="grow">
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ item.year_publication }}
|
||||
</p>
|
||||
<h3 class="group-hover:text-blue-600 font-semibold text-gray-800">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="shrink-0 size-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
<!-- End Card Section --> <!-- End List -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
.paragraph-container ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.paragraph-container ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.paragraph-container li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
|
||||
.paragraph-container ul {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
ClientImageSlider,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
direction_id: this.filters.dir_id,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
directionAdditionalEducations: {
|
||||
type: Object,
|
||||
},
|
||||
additionalEducations: {
|
||||
type: Object
|
||||
},
|
||||
filters: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transformToColumns(originalArray) {
|
||||
const chunkArray = (arr, size) => {
|
||||
return arr.reduce((acc, _, i) => (i % size ? acc : [...acc, arr.slice(i, i + size)]), []);
|
||||
};
|
||||
|
||||
const dividedArrays = chunkArray(originalArray, Math.ceil(originalArray.length / 2));
|
||||
|
||||
return dividedArrays.reverse();
|
||||
},
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Дополнительное образование</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
|
||||
<div class="w-100">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<h1 class="text-brand-primary text-center mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
Дополнительное образование
|
||||
|
||||
</h1>
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div>
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center space-x-6 flex-wrap">
|
||||
<Link :class="{ 'border-blue-500 text-blue-600': this.direction_id === null, 'text-gray-500 border-transparent': this.direction_id !== null }"
|
||||
:href="route('client.additionalEducation.index')"
|
||||
class="py-2 px-1 inline-flex items-center gap-2 border-b text-sm whitespace-nowrap hover:text-blue-600 focus:outline-none focus:text-blue-600">
|
||||
Все программы
|
||||
</Link>
|
||||
<template v-for="direction in directionAdditionalEducations.data">
|
||||
<Link :class="{ 'border-blue-500 text-blue-600': direction.id == this.filters.dir_id, 'text-gray-500 border-transparent': direction.id != this.direction_id }"
|
||||
:href="route('client.additionalEducation.index', { dir_id: direction.id })"
|
||||
class="py-2 px-1 inline-flex items-center gap-2 border-b text-sm whitespace-nowrap hover:text-blue-600 focus:outline-none focus:text-blue-600">
|
||||
{{ direction.title }}
|
||||
</Link>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="container mx-auto xl:px-5 py-5 lg:py-4">
|
||||
<div class="w-full mx-auto gap-x3 flex flex-wrap lg:justify-center">
|
||||
<template v-for="educations in transformToColumns(this.additionalEducations.data)">
|
||||
<div class="flex flex-col">
|
||||
<template v-for="education in educations">
|
||||
<div style="height: max-content" class="px-2">
|
||||
<h1 class="text-brand-primary mb-2 mt-2 text-lg font-semibold upper tracking-tight dark:text-white lg:text-md lg:leading-tight">
|
||||
{{ education.title }}
|
||||
</h1>
|
||||
<template v-for="program in education.additionalEducations" :key="program.id">
|
||||
<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.additionalEducation.show', program)">{{ program.title }}</Link>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,299 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientPostFilter from "@/Components/ClientPostFilter.vue";
|
||||
import ClientPost from "@/Components/ClientPost.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import ClientPostSearch from "@/Components/ClientPostSearch.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
ClientPostSearch,
|
||||
AdminIndexHeader,
|
||||
ClientPost,
|
||||
ClientPostFilter,
|
||||
ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
additionalEducation: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getFormOfStudy(contests) {
|
||||
const formOfStudyArray = Array.from(new Set(contests.map(item => item.form_edu)));
|
||||
|
||||
return formOfStudyArray;
|
||||
},
|
||||
getYearOfStudy(contests) {
|
||||
const YearOfStudyArray = Array.from(new Set(contests.map(item => item.period_data)));
|
||||
|
||||
return YearOfStudyArray;
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Образовательная программа</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
|
||||
<div>
|
||||
<div class="container px-8 mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<a onclick="history.back()" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500" href="#">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Назад
|
||||
</a>
|
||||
<div class="space-y-3 flex flex-col items-center justify-center">
|
||||
<h1 class="text-2xl text-center font-bold md:text-4xl">{{ additionalEducation.data.title }}</h1>
|
||||
</div>
|
||||
<!-- Icon Blocks -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 items-start gap-12">
|
||||
<!-- Icon Block -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Направление подготовки</h3>
|
||||
<p class="mt-1 text-gray-600">{{ additionalEducation.data.directionAdditionalEducation.title }} {{ additionalEducation.data.category }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Block -->
|
||||
|
||||
<!-- Icon Block -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Срок обучения</h3>
|
||||
<p class="mt-1 text-gray-600">{{ additionalEducation.data.learning_time }} часов</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Block -->
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Присваиваемая квалификация</h3>
|
||||
<p class="mt-1 text-gray-600">{{ additionalEducation.data.qualification }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Форма обучения</h3>
|
||||
<p class="mt-1 text-gray-600">{{ additionalEducation.data.form_education }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Цена обучения</h3>
|
||||
<p class="mt-1 text-gray-600">{{ additionalEducation.data.price }} ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Целевая аудитория</h3>
|
||||
<p class="mt-1 text-gray-600">{{ additionalEducation.data.target_group }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- End Icon Block -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 flex flex-col mb-[50px] items-center justify-center">
|
||||
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
|
||||
Оставить заявку на консультацию
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-bold md:text-2xl">О программе</h2>
|
||||
<div class="py-4 px-5">
|
||||
<template v-for="block in this.additionalEducation.data.content" :key="block.id">
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<div class="mb-4" v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<template v-for="img in block.data.url">
|
||||
<img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] leading-8 font-light paragraph-container" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
|
||||
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="block.type === 'linkTool'">
|
||||
<div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">
|
||||
<a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">
|
||||
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 inset-x-0 z-10">
|
||||
<div class="p-4 flex flex-col h-full sm:p-6">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center">
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-semibold text-white">
|
||||
{{ block.data.meta.data.authors[0].name }}
|
||||
</h4>
|
||||
<p class="text-xs text-white/[.8]">
|
||||
{{ block.data.meta.data.created_post }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 inset-x-0 z-10">
|
||||
<div class="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
|
||||
{{ block.data.meta.data.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-white/[.8]">
|
||||
{{ textLimit(block.data.meta.description, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
<div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ block.data.meta.title }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Blocks -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-6
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ page.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"/>
|
||||
|
||||
<div class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<PageSubSectionLinks :sub-section-pages="subSectionPages" :current-section="page.data.section"/>
|
||||
<PageNavigateLinks :header-navs="this.headerNavs"/>
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-5 md:space-y-5">
|
||||
<PageBreadcrumbs :breadcrumbs="breadcrumbs" :page-title="page.data.title"/>
|
||||
<PageTitle :header="page.data.title"/>
|
||||
<div id="page-area" class="space-y-4">
|
||||
<PageBuilder :blocks="this.page.data.content"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import {Head} from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import PageBuilder from "@/Components/BuilderUi/Pages/PageBuilder.vue";
|
||||
import PageBreadcrumbs from "@/Components/BuilderUi/Pages/PageBreadcrumbs.vue";
|
||||
import PageTitle from "@/Components/BuilderUi/Pages/PageTitle.vue";
|
||||
import PageNavigateLinks from "@/Components/BuilderUi/Pages/PageNavigateLinks.vue";
|
||||
import PageSubSectionLinks from "@/Components/BuilderUi/Pages/PageSubSectionLinks.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
data() {
|
||||
return {
|
||||
headerNavs: this.page.data.content.filter(block => block.type === 'heading').map(block => ({
|
||||
id: block.data.id,
|
||||
text: block.data.content
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
props: {
|
||||
navigation: {
|
||||
type: Object,
|
||||
},
|
||||
page: {
|
||||
type: Object,
|
||||
},
|
||||
subSectionPages: {
|
||||
type: Object,
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
PageSubSectionLinks,
|
||||
PageNavigateLinks,
|
||||
PageTitle,
|
||||
PageBreadcrumbs,
|
||||
PageBuilder,
|
||||
ClientFooterDown,
|
||||
MainNavbar,
|
||||
Link,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
methods: {},
|
||||
|
||||
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes grow-progress {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 2px;
|
||||
background: #26ACB8;
|
||||
z-index: 10000;
|
||||
|
||||
transform-origin: 0 50%;
|
||||
animation: grow-progress auto linear;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
|
||||
|
||||
.example-initial-animation {
|
||||
animation: initial-animation 2s ease;
|
||||
}
|
||||
|
||||
@keyframes initial-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ page.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"/>
|
||||
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
|
||||
<PageNavigateLinks :header-navs="this.headerNavs"/>
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-5 md:space-y-5">
|
||||
<PageBreadcrumbs :breadcrumbs="breadcrumbs" :page-title="page.data.title"/>
|
||||
<PageTitle :header="page.data.title"/>
|
||||
<div id="page-area" class="space-y-4">
|
||||
<PageBuilder :blocks="this.page.data.content"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import {Head} from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import PageBuilder from "@/Components/BuilderUi/Pages/PageBuilder.vue";
|
||||
import PageBreadcrumbs from "@/Components/BuilderUi/Pages/PageBreadcrumbs.vue";
|
||||
import PageTitle from "@/Components/BuilderUi/Pages/PageTitle.vue";
|
||||
import PageNavigateLinks from "@/Components/BuilderUi/Pages/PageNavigateLinks.vue";
|
||||
import PageSubSectionLinks from "@/Components/BuilderUi/Pages/PageSubSectionLinks.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
data() {
|
||||
return {
|
||||
headerNavs: this.page.data.content.filter(block => block.type === 'heading').map(block => ({
|
||||
id: block.data.id,
|
||||
text: block.data.content
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
props: {
|
||||
navigation: {
|
||||
type: Object,
|
||||
},
|
||||
page: {
|
||||
type: Object,
|
||||
},
|
||||
subSectionPages: {
|
||||
type: Object,
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
PageSubSectionLinks,
|
||||
PageNavigateLinks,
|
||||
PageTitle,
|
||||
PageBreadcrumbs,
|
||||
PageBuilder,
|
||||
ClientFooterDown,
|
||||
MainNavbar,
|
||||
Link,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
methods: {},
|
||||
|
||||
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes grow-progress {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 2px;
|
||||
background: #26ACB8;
|
||||
z-index: 10000;
|
||||
|
||||
transform-origin: 0 50%;
|
||||
animation: grow-progress auto linear;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
|
||||
|
||||
.example-initial-animation {
|
||||
animation: initial-animation 2s ease;
|
||||
}
|
||||
|
||||
@keyframes initial-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ department.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
|
||||
<div class="w-full h-[67px] pointer-events-none fixed" id="visor"></div>
|
||||
|
||||
<div class="sticky top-[110px] hidden h-[calc(100vh-110px)] max-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
|
||||
<nav v-if="this.departments"
|
||||
class="styled-scrollbar flex h-[calc(100vh-200px)] flex-col overflow-y-scroll pr-2 pb-4">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">Кафедры факультета - {{ department.data.faculty.abbreviation }}</div>
|
||||
<div class="flex gap-x-1">
|
||||
<ul class="px-0.5 last-of-type:mb-0 mb-8">
|
||||
<li v-for="depart in this.departments.data" :key="department.id" class="my-1.5 flex">
|
||||
<a :class="{'text-white hover:text-gray-200 font-semibold bg-[#135aae]': isSameRoute(route('client.department.show', { facultySlug: department.data.faculty.slug, departmentSlug: depart.slug })), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(route('client.department.show', { facultySlug: department.data.faculty.slug, departmentSlug: depart.slug })) }"
|
||||
:href="route('client.department.show', { facultySlug: department.data.faculty.slug, departmentSlug: depart.slug }) + '/'"
|
||||
class="relative duration-300 flex w-full rounded-md cursor-pointer items-center px-2 py-1 text-left text-sm">{{
|
||||
depart.title
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
<div class="sticky top-[110px] h-[calc(100vh-110px)]">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
|
||||
<ul class="styled-scrollbar max-h-[70vh] space-y-1.5 overflow-y-auto py-2 text-sm">
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'workers', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'workers' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#workers">Сотрудники кафедры</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'teachers', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'teachers' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#teachers">Преподаватели кафедры</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'external-teachers', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'external-teachers' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#external-teachers">Внешние совместители</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'programs', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'programs' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#programs">Программы</a>
|
||||
</li>
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-5 md:space-y-5">
|
||||
|
||||
<DepartmentBackButton title="Назад" />
|
||||
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
||||
<ol class="flex items-center whitespace-normal flex-wrap min-w-0"
|
||||
aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600">
|
||||
Главная
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
|
||||
Факультеты
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
|
||||
{{ department.data.faculty.abbreviation }}
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
|
||||
Кафедры
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
|
||||
{{ department.data.title }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<h1 class="text-2xl mb-10 font-bold md:text-3xl">{{ department.data.title }}</h1>
|
||||
</div>
|
||||
|
||||
<div id="page-area" class="space-y-5 md:space-y-5">
|
||||
<h2 id="workers" class="font-bold text-xl">Сотрудники кафедры</h2>
|
||||
|
||||
<template v-for="worker in department.data.workers">
|
||||
<ClientDepartmentWorkerCard :worker="worker" />
|
||||
</template>
|
||||
<h2 id="teachers" class="font-bold text-xl">Преподаватели кафедры</h2>
|
||||
<template v-for="teacher in department.data.teachers">
|
||||
<ClientDepartmentTeacherCard :teacher="teacher" />
|
||||
</template>
|
||||
<h2 id="external-teachers" class="font-bold text-xl">Внешние совместители</h2>
|
||||
|
||||
<h2 id="programs" class="font-bold text-xl">Программы</h2>
|
||||
|
||||
|
||||
|
||||
<div class="hs-accordion-group">
|
||||
<div v-for="(direction, index) in directions" class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl px-4 py-6" id="hs-basic-with-title-and-arrow-stretched-heading-three">
|
||||
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 focus:outline-none" aria-expanded="false" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
|
||||
{{ index }}
|
||||
<svg class="hs-accordion-active:hidden block shrink-0 size-5 text-gray-600 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
||||
<svg class="hs-accordion-active:block hidden shrink-0 size-5 text-gray-600 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
|
||||
</button>
|
||||
<div id="hs-basic-with-title-and-arrow-stretched-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three">
|
||||
<ul class="list-disc list-outside space-y-3 ps-5 text-lg text-gray-800 dark:text-neutral-200">
|
||||
<li v-for="program in direction" class="ps-2">
|
||||
<Link :href="route('client.program.show', program.id)" class="text-base text-blue-600 decoration-2 hover:underline focus:outline-none focus:underline font-medium dark:text-blue-500">{{ program.name }}</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<DepartmentBuilder :blocks="this.department.data.content "/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ClientFooterDown/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<FsLightbox class="z-1000" :slide="slide" :toggler="toggler" :sources="editorImages"/>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import PageNavigateLinks from "@/Components/BuilderUi/Pages/PageNavigateLinks.vue";
|
||||
import PageBreadcrumbs from "@/Components/BuilderUi/Pages/PageBreadcrumbs.vue";
|
||||
import PageBuilder from "@/Components/BuilderUi/Pages/PageBuilder.vue";
|
||||
import PageTitle from "@/Components/BuilderUi/Pages/PageTitle.vue";
|
||||
import ClientDepartmentWorkerCard from "@/Components/PersonCards/ClientDepartmentWorkerCard.vue";
|
||||
import ClientDepartmentTeacherCard from "@/Components/PersonCards/ClientDepartmentTeacherCard.vue";
|
||||
import FacultyBuilder from "@/Components/BuilderUi/Faculties/FacultyBuilder.vue";
|
||||
import DepartmentBuilder from "@/Components/BuilderUi/Departments/DepartmentBuilder.vue";
|
||||
import DepartmentBackButton from "@/Components/BuilderUi/Departments/DepartmentBackButton.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
data() {
|
||||
return {
|
||||
scrollTop: false,
|
||||
currentNavSection: null,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
department: {
|
||||
type: Object,
|
||||
},
|
||||
departments: {
|
||||
type: Object
|
||||
},
|
||||
directions: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
DepartmentBackButton,
|
||||
DepartmentBuilder,
|
||||
FacultyBuilder,
|
||||
ClientDepartmentTeacherCard,
|
||||
ClientDepartmentWorkerCard,
|
||||
PageTitle, PageBuilder, PageBreadcrumbs, PageNavigateLinks,
|
||||
ClientFooterDown,
|
||||
MainNavbar,
|
||||
Link,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
openEditorImagesOnSlide: function (number) {
|
||||
this.slide = number;
|
||||
this.toggler = !this.toggler;
|
||||
},
|
||||
isSameRoute(route) {
|
||||
if (this.$page.props.ziggy.location === route) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
const windowTop = window.top.scrollY
|
||||
if (windowTop > 100) {
|
||||
this.scrollTop = true
|
||||
} else {
|
||||
this.scrollTop = false
|
||||
}
|
||||
},
|
||||
scrollToTop() {
|
||||
window.scrollTo(0, 0)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScroll)
|
||||
|
||||
// this.editorImages = this.blocksWithSlideNumber.filter(block => block.type === 'image').map(block => block.data.file.url);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const headings = document.querySelectorAll('h2');
|
||||
const visor = document.querySelector('#visor');
|
||||
let lastVisibleHeading = null;
|
||||
|
||||
const visorRect = visor.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли визор в пределах видимости
|
||||
if (visorRect.top > window.scrollY) {
|
||||
this.currentNavSection = null;
|
||||
lastVisibleHeading = null; // Сбрасываем заголовок, если визор не виден
|
||||
return; // Выходим из функции, если визор не виден
|
||||
}
|
||||
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
const heading = headings[i];
|
||||
const rect = heading.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли заголовок в видимой области и касается ли он элемента visor
|
||||
if (rect.top >= 0 && rect.bottom <= window.innerHeight && rect.bottom >= visorRect.top && rect.top <= visorRect.bottom) {
|
||||
// Проверяем, изменился ли заголовок
|
||||
if (heading !== lastVisibleHeading) {
|
||||
this.currentNavSection = heading.id;
|
||||
lastVisibleHeading = heading;
|
||||
}
|
||||
break; // Выходим из цикла, если нашли видимый заголовок
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
window.removeEventListener("scroll", this.onScroll)
|
||||
},
|
||||
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes grow-progress {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 2px;
|
||||
background: #26ACB8;
|
||||
z-index: 10000;
|
||||
|
||||
transform-origin: 0 50%;
|
||||
animation: grow-progress auto linear;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
.example-initial-animation {
|
||||
animation: initial-animation 2s ease;
|
||||
}
|
||||
|
||||
@keyframes initial-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
divisions: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Подразделения института</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<!-- Card Section -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Подразделения института</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">We've helped some great companies brand, design and get to market.</p>
|
||||
</div>
|
||||
<!-- Grid -->
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
|
||||
<template v-for="division in divisions.data">
|
||||
<Link :href="route('client.division.show', division.slug)" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
|
||||
<div class="p-4 md:p-5 w-full">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="grow">
|
||||
<h3 class="group-hover:text-blue-600 font-semibold text-gray-800">
|
||||
{{ division.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="shrink-0 size-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
<!-- End Card Section -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ division.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation" />
|
||||
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="w-full h-[67px] fixed" id="visor"></div>
|
||||
|
||||
<div class="sticky top-[110px] hidden h-[calc(100vh-110px)] max-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
|
||||
<nav v-if="this.divisions"
|
||||
class="styled-scrollbar flex h-[calc(100vh-200px)] flex-col overflow-y-scroll pr-2 pb-4">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">Подразделения</div>
|
||||
<div class="flex gap-x-1">
|
||||
<ul class="px-0.5 last-of-type:mb-0 mb-8">
|
||||
<li v-for="division in this.divisions.data" :key="division.id" class="my-1.5 flex">
|
||||
<a :class="{'text-white hover:text-gray-200 font-semibold bg-[#135aae]': isSameRoute(route('client.division.show', division.slug)), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(route('client.division.show', division.id)) }"
|
||||
:href="route('client.division.show', division.slug) + '/'"
|
||||
class="relative duration-300 flex w-full rounded-md cursor-pointer items-center px-2 py-1 text-left text-sm">{{
|
||||
division.title
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
<div class="sticky top-[110px] h-[calc(100vh-110px)]">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
|
||||
<ul class="styled-scrollbar max-h-[70vh] space-y-1.5 overflow-y-auto py-2 text-sm">
|
||||
<li v-if="division.data.workers.length > 0" class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'persons', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'persons' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#persons">Состав</a>
|
||||
</li>
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-5 md:space-y-5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
||||
<ol class="flex items-center whitespace-normal min-w-0"
|
||||
aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600">
|
||||
Главная
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
|
||||
Факультеты
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<h1 class="text-2xl mb-10 font-bold md:text-3xl">{{ division.data.title }}</h1>
|
||||
</div>
|
||||
|
||||
<div id="page-area" class="space-y-5 md:space-y-5">
|
||||
|
||||
<h2 v-if="division.data.workers.length > 0" id="persons" class="font-bold text-xl">Состав</h2>
|
||||
<template v-for="worker in division.data.workers">
|
||||
<div class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + worker.details.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="route('client.person.show', worker.id)" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ worker.administrativePosition }}: {{ worker.name }}
|
||||
</Link>
|
||||
<p v-if="worker.details.academicTitle" class="text-xs text-gray-500 mt-2">
|
||||
Ученая степень: {{ worker.details.academicTitle }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Контактный телефон: {{ worker.details.contactPhone }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Электронная почта: {{ worker.details.contactEmail }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Кабинет: 207В
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- FAQ -->
|
||||
|
||||
<!-- End FAQ -->
|
||||
|
||||
|
||||
<!-- Card Section -->
|
||||
<!-- Grid -->
|
||||
|
||||
<!-- End Grid -->
|
||||
<!-- End Card Section -->
|
||||
|
||||
<!-- <template v-for="block in this.blocks" :key="block.id">-->
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="block.type === 'heading'">-->
|
||||
<!-- <h2 :id="generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <template v-for="img in block.data.url">-->
|
||||
<!-- <img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">-->
|
||||
<!-- </template>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>-->
|
||||
<!-- <div v-if="block.type === 'attaches'">-->
|
||||
<!-- <div class="flex border rounded-lg px-4 py-2 items-center justify-between">-->
|
||||
<!-- <div class="flex items-center">-->
|
||||
<!-- <div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">-->
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"-->
|
||||
<!-- stroke-width="1.5"-->
|
||||
<!-- stroke="currentColor" class="w-6 h-6">-->
|
||||
<!-- <path stroke-linecap="round" stroke-linejoin="round"-->
|
||||
<!-- d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"-->
|
||||
<!-- stroke="white"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>{{ block.data.title }}</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <a :href="block.data.file.url" download type="button"-->
|
||||
<!-- class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">-->
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"-->
|
||||
<!-- stroke-width="1.5"-->
|
||||
<!-- stroke="currentColor" class="w-6 h-6">-->
|
||||
<!-- <path stroke-linecap="round" stroke-linejoin="round"-->
|
||||
<!-- d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="block.type === 'linkTool'">-->
|
||||
<!-- <div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">-->
|
||||
<!-- <a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">-->
|
||||
<!-- <div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="absolute top-0 inset-x-0 z-10">-->
|
||||
<!-- <div class="p-4 flex flex-col h-full sm:p-6">-->
|
||||
<!-- <!– Avatar –>-->
|
||||
<!-- <div class="flex items-center">-->
|
||||
<!-- <div class="ms-2.5 sm:ms-4">-->
|
||||
<!-- <h4 class="font-semibold text-white">-->
|
||||
<!-- {{ block.data.meta.data.authors[0].name }}-->
|
||||
<!-- </h4>-->
|
||||
<!-- <p class="text-xs text-white/[.8]">-->
|
||||
<!-- {{ block.data.meta.data.created_post }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– End Avatar –>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="absolute bottom-0 inset-x-0 z-10">-->
|
||||
<!-- <div class="flex flex-col h-full p-4 sm:p-6">-->
|
||||
<!-- <h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">-->
|
||||
<!-- {{ block.data.meta.data.title }}-->
|
||||
<!-- </h3>-->
|
||||
<!-- <p class="mt-2 text-white/[.8]">-->
|
||||
<!-- {{ textLimit(block.data.meta.description, 200) }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– End Card Blog –>-->
|
||||
<!-- <div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">-->
|
||||
<!-- <div class="flex items-center gap-x-4">-->
|
||||
<!-- <img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">-->
|
||||
<!-- <div class="grow">-->
|
||||
<!-- <Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">-->
|
||||
<!-- {{ block.data.meta.title }}-->
|
||||
<!-- </Link>-->
|
||||
<!-- <p class="text-xs text-gray-500 mt-2">-->
|
||||
<!-- {{ block.data.meta.data.position }}-->
|
||||
<!-- </p>-->
|
||||
<!-- <p class="text-xs text-gray-500 mt-2">-->
|
||||
<!-- {{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <!– Social Brands –>-->
|
||||
<!-- <!– End Social Brands –>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </template>-->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
<FsLightbox class="z-1000" :slide="slide" :toggler="toggler" :sources="editorImages"/>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
scrollTop: false,
|
||||
currentNavSection: null,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
division: {
|
||||
type: Object,
|
||||
},
|
||||
divisions: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
ClientFooterDown,
|
||||
MainNavbar,
|
||||
Link,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
openEditorImagesOnSlide: function (number) {
|
||||
this.slide = number;
|
||||
this.toggler = !this.toggler;
|
||||
},
|
||||
isSameRoute(route) {
|
||||
if (this.$page.props.ziggy.location === route) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
const windowTop = window.top.scrollY
|
||||
if (windowTop > 100) {
|
||||
this.scrollTop = true
|
||||
} else {
|
||||
this.scrollTop = false
|
||||
}
|
||||
},
|
||||
scrollToTop() {
|
||||
window.scrollTo(0, 0)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScroll)
|
||||
|
||||
// this.editorImages = this.blocksWithSlideNumber.filter(block => block.type === 'image').map(block => block.data.file.url);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const headings = document.querySelectorAll('h2');
|
||||
const visor = document.querySelector('#visor');
|
||||
let lastVisibleHeading = null;
|
||||
|
||||
const visorRect = visor.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли визор в пределах видимости
|
||||
if (visorRect.top > window.scrollY) {
|
||||
this.currentNavSection = null;
|
||||
lastVisibleHeading = null; // Сбрасываем заголовок, если визор не виден
|
||||
return; // Выходим из функции, если визор не виден
|
||||
}
|
||||
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
const heading = headings[i];
|
||||
const rect = heading.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли заголовок в видимой области и касается ли он элемента visor
|
||||
if (rect.top >= 0 && rect.bottom <= window.innerHeight && rect.bottom >= visorRect.top && rect.top <= visorRect.bottom) {
|
||||
// Проверяем, изменился ли заголовок
|
||||
if (heading !== lastVisibleHeading) {
|
||||
this.currentNavSection = heading.id;
|
||||
lastVisibleHeading = heading;
|
||||
}
|
||||
break; // Выходим из цикла, если нашли видимый заголовок
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
window.removeEventListener("scroll", this.onScroll)
|
||||
},
|
||||
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes grow-progress {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 2px;
|
||||
background: #26ACB8;
|
||||
z-index: 10000;
|
||||
|
||||
transform-origin: 0 50%;
|
||||
animation: grow-progress auto linear;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
.example-initial-animation {
|
||||
animation: initial-animation 2s ease;
|
||||
}
|
||||
|
||||
@keyframes initial-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import ClientEventSelectDate from "@/Components/ClientEventSelectDate.vue";
|
||||
import ClientEventFilter from "@/Components/ClientEventFilter.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
ClientEventFilter,
|
||||
ClientEventSelectDate,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
props: {
|
||||
events: {
|
||||
type: Array,
|
||||
},
|
||||
currentDate: {
|
||||
type: String,
|
||||
},
|
||||
eventDates: {
|
||||
type: Array,
|
||||
},
|
||||
navigation: {
|
||||
type: Array,
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
},
|
||||
categories: {
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Мероприятия</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- <AdminIndexHeader>-->
|
||||
<!-- <ClientPostSearch />-->
|
||||
<!-- <ClientPostFilter :items="categories"/>-->
|
||||
<!-- </AdminIndexHeader>-->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="flex items-center w-full justify-center">
|
||||
<h1 class="block text-brand-primary text-center mb-3 mt-2 mr-4 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
Мероприятия НТГСПИ
|
||||
</h1>
|
||||
<ClientEventFilter :is_online_filter="filters.is_online_filter" :categories="this.categories" :category_filter="filters.category_filter" :sorting-by_filter="filters.sortingBy_filter" />
|
||||
|
||||
</div>
|
||||
|
||||
<div class="my-10 justify-center flex gap-x-3 items-center">
|
||||
<h3 class="font-light text-xl">Мероприятия на </h3>
|
||||
<div class="shadow-sm w-[35px]">
|
||||
<div class="block w-[35px] h-[8px] bg-red-400 rounded-t"></div>
|
||||
<div class="block w-[35px] h-[27px] bg-white text-center font-medium">{{ currentDate.day }}</div>
|
||||
</div>
|
||||
<h3 class="font-light text-xl">{{ currentDate.month }}</h3>
|
||||
</div>
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div>
|
||||
<ClientEventSelectDate :current-date="currentDate.fullDate" :dates="eventDates"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-y-10 mt-10">
|
||||
<template v-for="event in events.data">
|
||||
<Link class="group sm:flex rounded-xl" :href="route('client.event.show', event.slug)">
|
||||
<div class="grow">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="mb-3">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-[12px] text-gray-600">
|
||||
{{ event.event_time_start }}
|
||||
</p>
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ event.category }}
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600">
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Great news we're eager to share.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import EventBackButton from "@/Components/BuilderUi/Events/EventBackButton.vue";
|
||||
import TitleEvent from "@/Components/BuilderUi/Events/TitleEvent.vue";
|
||||
import PostBuilder from "@/Components/BuilderUi/Posts/PostBuilder.vue";
|
||||
import EventBuilder from "@/Components/BuilderUi/Events/EventBuilder.vue";
|
||||
import EventtBuilder from "@/Components/BuilderUi/Events/EventBuilder.vue";
|
||||
import ClientEventSelectDate from "@/Components/ClientEventSelectDate.vue";
|
||||
import ClientEventFilter from "@/Components/ClientEventFilter.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
ClientEventFilter, ClientEventSelectDate,
|
||||
EventtBuilder,
|
||||
EventBuilder,
|
||||
PostBuilder,
|
||||
TitleEvent,
|
||||
EventBackButton,
|
||||
ClientImageSlider, ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.event.data.content,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
event: {
|
||||
type: Array,
|
||||
},
|
||||
navigation: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ event.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
|
||||
<MainNavbar :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-4xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<EventBackButton title="Назад" />
|
||||
<TitleEvent :header="event.data.title" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
|
||||
<div class="md:flex md:items-center space-y-3 md:space-y-0 space-x-2 text-sm">
|
||||
<p v-if="event.data.is_online === 1" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
Онлайн
|
||||
</p>
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ event.data.category }}
|
||||
</p>
|
||||
<div class="col-start-2 text-center">
|
||||
<span>Адрес: {{ event.data.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<EventBuilder :blocks="this.blocks"/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import TitleEvent from "@/Components/BuilderUi/Events/TitleEvent.vue";
|
||||
import EventBackButton from "@/Components/BuilderUi/Events/EventBackButton.vue";
|
||||
import EventBuilder from "@/Components/BuilderUi/Events/EventBuilder.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
EventBuilder, EventBackButton, TitleEvent,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Array,
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
},
|
||||
categories: {
|
||||
type: Array,
|
||||
},
|
||||
navigation: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Новости</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<AdminIndexHeader>
|
||||
<ClientPostSearch />
|
||||
<ClientPostFilter :items="categories"/>
|
||||
</AdminIndexHeader>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div>
|
||||
<div class="container px-8 mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<div class="mt-10 grid gap-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<ClientPost :post="post" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="mt-10 flex items-center justify-center">
|
||||
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<Link as="button" :href="$props.posts.links.prev" :disabled="$props.posts.links.prev === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-l-md border border-gray-300 bg-white px-3 py-2 pr-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
|
||||
</svg>
|
||||
<span>Предыдущая</span></Link>
|
||||
<Link as="button" :href="$props.posts.links.next" :disabled="$props.posts.links.next === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-r-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<span>Следующая</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
|
||||
</svg>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ClientPostFilter from "@/Components/ClientPostFilter.vue";
|
||||
import ClientPostSearch from "@/Components/ClientPostSearch.vue";
|
||||
import ClientPost from "@/Components/ClientPost.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
AdminIndexHeader,
|
||||
ClientPost,
|
||||
ClientPostSearch,
|
||||
ClientPostFilter,
|
||||
ClientImageSlider, ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.post.data.content,
|
||||
toggler: false,
|
||||
togglerGallery: false,
|
||||
editorImages: [],
|
||||
galleryImages: [],
|
||||
slide: 1,
|
||||
gallerySlide: 1,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
post: {
|
||||
type: Array,
|
||||
},
|
||||
navigation: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<MainNavbar :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-3xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<a onclick="history.back()" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500" href="#">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Назад
|
||||
</a>
|
||||
<h1 class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ post.data.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<div class="col-start-2 text-center">
|
||||
<div class="hs-tooltip inline-block">
|
||||
<button type="button" class="hs-tooltip-toggle underline hover:text-blue-400 duration-300">
|
||||
Над статьей работали
|
||||
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute duration-300 invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-neutral-700" role="tooltip">
|
||||
<template v-for="author in post.data.authors">
|
||||
{{ author }} <br>
|
||||
</template>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<time class="text-gray-500 dark:text-gray-400">• {{ post.data.created_post }} •
|
||||
</time>
|
||||
<span>Чтение займет {{ post.data.reading_time }}<!-- --> Минуты</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<template v-for="block in this.blocks" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url" />
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="galleryImages.length" class="grid gap-4 border-t border-gray-300 py-4">
|
||||
<div class="relative">
|
||||
<img
|
||||
class="filter brightness-[0.7] w-full max-h-[500px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"
|
||||
:src="galleryImages[0]" data-hs-overlay="#hs-large-modal" alt="">
|
||||
<div class="absolute inset-x-0 bottom-5 flex flex-col justify-center items-center">
|
||||
<p class="text-white text-sm lg:text-xl text-center">{{ post.data.title }}</p>
|
||||
<span class="text-gray-400 text-sm">{{ galleryImages.length }} фотографий</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="z-index: 100" id="hs-large-modal"
|
||||
class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
|
||||
<div
|
||||
class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto">
|
||||
<div
|
||||
class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
|
||||
<h3 class="font-bold text-gray-800 dark:text-white">
|
||||
Галлерея: {{ post.data.title }}
|
||||
</h3>
|
||||
<button type="button"
|
||||
class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
|
||||
data-hs-overlay="#hs-large-modal">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
|
||||
fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
faculties: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Факультеты</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<!-- Card Section -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Факультеты и кафедры</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">We've helped some great companies brand, design and get to market.</p>
|
||||
</div>
|
||||
<!-- Grid -->
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
|
||||
<template v-for="faculty in faculties.data">
|
||||
<Link :href="route('client.faculty.show', faculty.slug)" class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="grow">
|
||||
<h3 class="group-hover:text-blue-600 font-semibold text-gray-800">
|
||||
{{ faculty.shortTitle }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ faculty.title }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="shrink-0 size-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
<!-- End Card Section -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ faculty.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"/>
|
||||
|
||||
<div class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
|
||||
<div class="w-full h-[67px] pointer-events-none fixed" id="visor"></div>
|
||||
|
||||
|
||||
<div class="sticky top-[110px] hidden h-[calc(100vh-110px)] max-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
|
||||
<nav v-if="this.faculties"
|
||||
class="styled-scrollbar flex h-[calc(100vh-200px)] flex-col overflow-y-scroll pr-2 pb-4">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">Факультеты</div>
|
||||
<div class="flex gap-x-1">
|
||||
<ul class="px-0.5 last-of-type:mb-0 mb-8">
|
||||
<li v-for="faculty in this.faculties.data" :key="faculty.id" class="my-1.5 flex">
|
||||
<a :class="{'text-white hover:text-gray-200 font-semibold bg-[#135aae]': isSameRoute(route('client.faculty.show', faculty.slug)), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(route('client.faculty.show', faculty.id)) }"
|
||||
:href="route('client.faculty.show', faculty.slug) + '/'"
|
||||
class="relative duration-300 flex w-full rounded-md cursor-pointer items-center px-2 py-1 text-left text-sm">{{
|
||||
faculty.title
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
<div class="sticky top-[110px] h-[calc(100vh-110px)]">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
|
||||
<ul class="styled-scrollbar max-h-[70vh] space-y-1.5 overflow-y-auto py-2 text-sm">
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'persons', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'persons' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#persons">Состав</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'department', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'department' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#department">Кафедры факультета</a>
|
||||
</li>
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-5 md:space-y-5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
||||
<ol class="flex items-center whitespace-normal min-w-0"
|
||||
aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600">
|
||||
Главная
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
|
||||
Факультеты
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<h1 class="text-2xl mb-10 font-bold md:text-3xl">{{ faculty.data.title }}</h1>
|
||||
</div>
|
||||
|
||||
<div id="page-area" class="space-y-5 md:space-y-5">
|
||||
|
||||
<h2 id="persons" class="font-bold text-xl">Состав</h2>
|
||||
|
||||
<template v-for="worker in faculty.data.workers">
|
||||
<ClientFacultyWorkerCard :worker="worker" />
|
||||
</template>
|
||||
|
||||
|
||||
<!-- End FAQ -->
|
||||
|
||||
|
||||
|
||||
<h2 id="department" class="font-bold text-xl">Кафедры факультета</h2>
|
||||
|
||||
<!-- Card Section -->
|
||||
<!-- Grid -->
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-2 gap-3 sm:gap-6">
|
||||
<template v-for="department in faculty.data.departments">
|
||||
|
||||
<Link :href="route('client.department.show', { facultySlug: faculty.data.slug, departmentSlug: department.slug })" class="flex justify-center items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="grow">
|
||||
<h3 class="group-hover:text-blue-600 font-semibold text-gray-800">
|
||||
{{ department.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="shrink-0 size-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<FacultyBuilder :blocks="this.faculty.data.content "/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import PageNavigateLinks from "@/Components/BuilderUi/Pages/PageNavigateLinks.vue";
|
||||
import PageBreadcrumbs from "@/Components/BuilderUi/Pages/PageBreadcrumbs.vue";
|
||||
import PageBuilder from "@/Components/BuilderUi/Pages/PageBuilder.vue";
|
||||
import PageSubSectionLinks from "@/Components/BuilderUi/Pages/PageSubSectionLinks.vue";
|
||||
import PageTitle from "@/Components/BuilderUi/Pages/PageTitle.vue";
|
||||
import ClientFacultyWorkerCard from "@/Components/PersonCards/ClientFacultyWorkerCard.vue";
|
||||
import PostBuilder from "@/Components/BuilderUi/Posts/PostBuilder.vue";
|
||||
import FacultyBuilder from "@/Components/BuilderUi/Faculties/FacultyBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
data() {
|
||||
return {
|
||||
scrollTop: false,
|
||||
currentNavSection: null,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
faculty: {
|
||||
type: Object,
|
||||
},
|
||||
faculties: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
FacultyBuilder,
|
||||
PostBuilder,
|
||||
ClientFacultyWorkerCard,
|
||||
PageTitle, PageSubSectionLinks, PageBuilder, PageBreadcrumbs, PageNavigateLinks,
|
||||
ClientFooterDown,
|
||||
MainNavbar,
|
||||
Link,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
openEditorImagesOnSlide: function (number) {
|
||||
this.slide = number;
|
||||
this.toggler = !this.toggler;
|
||||
},
|
||||
isSameRoute(route) {
|
||||
if (this.$page.props.ziggy.location === route) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
const windowTop = window.top.scrollY
|
||||
if (windowTop > 100) {
|
||||
this.scrollTop = true
|
||||
} else {
|
||||
this.scrollTop = false
|
||||
}
|
||||
},
|
||||
scrollToTop() {
|
||||
window.scrollTo(0, 0)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScroll)
|
||||
|
||||
// this.editorImages = this.blocksWithSlideNumber.filter(block => block.type === 'image').map(block => block.data.file.url);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const headings = document.querySelectorAll('h2');
|
||||
const visor = document.querySelector('#visor');
|
||||
let lastVisibleHeading = null;
|
||||
|
||||
const visorRect = visor.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли визор в пределах видимости
|
||||
if (visorRect.top > window.scrollY) {
|
||||
this.currentNavSection = null;
|
||||
lastVisibleHeading = null; // Сбрасываем заголовок, если визор не виден
|
||||
return; // Выходим из функции, если визор не виден
|
||||
}
|
||||
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
const heading = headings[i];
|
||||
const rect = heading.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли заголовок в видимой области и касается ли он элемента visor
|
||||
if (rect.top >= 0 && rect.bottom <= window.innerHeight && rect.bottom >= visorRect.top && rect.top <= visorRect.bottom) {
|
||||
// Проверяем, изменился ли заголовок
|
||||
if (heading !== lastVisibleHeading) {
|
||||
this.currentNavSection = heading.id;
|
||||
lastVisibleHeading = heading;
|
||||
}
|
||||
break; // Выходим из цикла, если нашли видимый заголовок
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
window.removeEventListener("scroll", this.onScroll)
|
||||
},
|
||||
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes grow-progress {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 2px;
|
||||
background: #26ACB8;
|
||||
z-index: 10000;
|
||||
|
||||
transform-origin: 0 50%;
|
||||
animation: grow-progress auto linear;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
.example-initial-animation {
|
||||
animation: initial-animation 2s ease;
|
||||
}
|
||||
|
||||
@keyframes initial-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientEventSelectDate from "@/Components/ClientEventSelectDate.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
ClientEventSelectDate,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
|
||||
},
|
||||
props: {
|
||||
exhibitions: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Виртуальные выставки</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Виртуальные выставки</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">We've helped some great companies brand, design and get to market.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-8 mx-auto xl:px-5 max-w-screen-md">
|
||||
<div class="my-10 sm:my-14">
|
||||
<template v-for="exhibition in exhibitions.data">
|
||||
<Link :href="route('client.library.exhibition.show', exhibition.id)" class="group sm:flex rounded-xl mb-4">
|
||||
<div class="grow">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="mb-3">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-[12px] text-gray-600">
|
||||
{{ exhibition.created_at }}
|
||||
</p>
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ exhibition.category }}
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600">
|
||||
{{ exhibition.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-gray-600">
|
||||
{{ exhibition.preview_text }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="mt-10 flex items-center justify-center">
|
||||
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<Link as="button" :href="exhibitions.links.prev" :disabled="exhibitions.links.prev === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-l-md border border-gray-300 bg-white px-3 py-2 pr-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
|
||||
</svg>
|
||||
<span>Предыдущая</span></Link>
|
||||
<Link as="button" :href="exhibitions.links.next" :disabled="exhibitions.links.next === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-r-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<span>Следующая</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
|
||||
</svg>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,206 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {ClientImageSlider, ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.exhibition.data.content,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
exhibition: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ exhibition.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<MainNavbar :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-4xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<a onclick="history.back()"
|
||||
class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500"
|
||||
href="#">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="m15 18-6-6 6-6"/>
|
||||
</svg>
|
||||
Назад
|
||||
</a>
|
||||
<h1 class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ exhibition.data.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ exhibition.data.category }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template v-for="block in this.blocks" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content"
|
||||
v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url"/>
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-4xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<a onclick="history.back()"
|
||||
class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500"
|
||||
href="#">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="m15 18-6-6 6-6"/>
|
||||
</svg>
|
||||
Назад
|
||||
</a>
|
||||
<h1 class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ exhibition.data.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ exhibition.data.category }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template v-for="block in this.blocks" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content"
|
||||
v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url"/>
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import ClientEventSelectDate from "@/Components/ClientEventSelectDate.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
ClientEventSelectDate,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Мероприятия</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- <AdminIndexHeader>-->
|
||||
<!-- <ClientPostSearch />-->
|
||||
<!-- <ClientPostFilter :items="categories"/>-->
|
||||
<!-- </AdminIndexHeader>-->
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Заметки библиотеки</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">We've helped some great companies brand, design and get to market.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-8 mx-auto xl:px-5 max-w-screen-md">
|
||||
<div class="my-10 sm:my-14">
|
||||
<template v-for="post in posts.data">
|
||||
<Link :href="route('client.library.news.show', post.id)" class="group sm:flex rounded-xl mb-4">
|
||||
<div class="grow">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="mb-3">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-[12px] text-gray-600">
|
||||
{{ post.created_at }}
|
||||
</p>
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ post.category }}
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-gray-600">
|
||||
{{ post.preview_text }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="mt-10 flex items-center justify-center">
|
||||
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<Link as="button" :href="posts.links.prev" :disabled="posts.links.prev === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-l-md border border-gray-300 bg-white px-3 py-2 pr-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
|
||||
</svg>
|
||||
<span>Предыдущая</span></Link>
|
||||
<Link as="button" :href="posts.links.next" :disabled="posts.links.next === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-r-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<span>Следующая</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
|
||||
</svg>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {ClientImageSlider, ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.post.data.content,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
post: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<ClientScrollTimeline/>
|
||||
<MainNavbar :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-4xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<a onclick="history.back()"
|
||||
class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500"
|
||||
href="#">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="m15 18-6-6 6-6"/>
|
||||
</svg>
|
||||
Назад
|
||||
</a>
|
||||
<h1 class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ post.data.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ post.data.category }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template v-for="block in this.blocks" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content"
|
||||
v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url"/>
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ person.data.name }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation" />
|
||||
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
|
||||
<div class="w-full h-[67px] fixed" id="visor"></div>
|
||||
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
<div class="sticky top-[110px] h-[calc(100vh-110px)]">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
|
||||
<ul class="styled-scrollbar max-h-[70vh] space-y-1.5 overflow-y-auto py-2 text-sm">
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'education', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'education' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#education">Образование
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'awards', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'awards' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#awards">Награды</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'professionalRetraining', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'professionalRetraining' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#professionalRetraining">Профессиональная переподготовка
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'professionalDevelopment', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'professionalDevelopment' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#professionalDevelopment">Повышение квалификации
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'professDisciplines', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'professDisciplines' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#professDisciplines">Преподаваемые дисциплины
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'workExperience', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'workExperience' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#workExperience">Стаж работы
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'attendedConferences', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'attendedConferences' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#attendedConferences">Участие в конференциях
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'participationScienceProjects', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'participationScienceProjects' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#participationScienceProjects">Участие в научных проектах
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'publications', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'publications' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#publications">Публикации
|
||||
</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'other', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'other' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#other">Другое
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="w-full mx-auto sm:px-6 lg:px-8">
|
||||
<!-- Profile -->
|
||||
<div class="flex items-center gap-x-10 gap-y-4 flex-wrap">
|
||||
<div class="">
|
||||
<img class="shrink-0 w-full md:w-[200px] md:h-[300px] rounded-xl object-cover" :src="'/storage/' + person.data.details.photo" alt="Avatar"> {{ }}
|
||||
</div>
|
||||
<div class="grow">
|
||||
<h1 class="text-2xl font-medium text-gray-800 dark:text-neutral-200">
|
||||
{{ person.data.name }}
|
||||
</h1>
|
||||
<div class="">
|
||||
<template v-for="division_work in person.data.divisions_works">
|
||||
<Link :href="route('client.division.show', division_work.slug)" class="text-sm text-blue-500 dark:text-neutral-400 mr-2">
|
||||
{{ division_work.position }}
|
||||
</Link>
|
||||
</template>
|
||||
<template v-for="faculty_work in person.data.faculties_works">
|
||||
<Link :href="route('client.faculty.show', faculty_work.slug)" class="text-sm text-blue-500 dark:text-neutral-400 mr-2">
|
||||
{{ faculty_work.position }}
|
||||
</Link>
|
||||
</template>
|
||||
<template v-for="division_work in person.data.departments_work">
|
||||
<Link :href="route('client.department.show', { facultySlug: division_work.faculty_slug, departmentSlug: division_work.slug })" class="text-sm text-blue-500 dark:text-neutral-400 mr-2">
|
||||
{{ division_work.position }}
|
||||
</Link>
|
||||
</template>
|
||||
<template v-for="division_tech in person.data.departments_teach">
|
||||
<Link :href="route('client.department.show', { facultySlug: division_tech.faculty_slug, departmentSlug: division_tech.slug })" class="text-sm text-blue-500 dark:text-neutral-400 mr-2">
|
||||
{{ division_tech.position }}
|
||||
</Link>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{ console.log(person) }}
|
||||
|
||||
<ul class="mt-5 flex flex-col gap-y-3">
|
||||
|
||||
<li class="flex items-center gap-x-2.5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="shrink-0 size-3.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
|
||||
</svg>
|
||||
|
||||
<a class="text-[13px] text-gray-500 underline hover:text-gray-800 hover:decoration-2 focus:outline-none focus:decoration-2 dark:text-neutral-500 dark:hover:text-neutral-400" href="#">
|
||||
{{ person.data.details.contactPhone }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex items-center gap-x-2.5">
|
||||
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
|
||||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
|
||||
</svg>
|
||||
<a class="text-[13px] text-gray-500 underline hover:text-gray-800 hover:decoration-2 focus:outline-none focus:decoration-2 dark:text-neutral-500 dark:hover:text-neutral-400" href="#">
|
||||
{{ person.data.details.contactEmail }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Profile -->
|
||||
|
||||
<div class="mt-10 sm:mt-14">
|
||||
<h2 id="education" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Направление подготовки
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-1 gap-3">
|
||||
<div class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700">
|
||||
<h3 class="mb-1 text-xs text-gray-600 dark:text-neutral-400">
|
||||
2012 - 2013
|
||||
</h3>
|
||||
|
||||
<p class="font-semibold text-sm text-gray-800 dark:text-neutral-200">
|
||||
{{ person.data.details.education }}
|
||||
</p>
|
||||
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
The University of Manchester
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="awards" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Награды
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="award in person.data.details.awards">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ award.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="professionalRetraining" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Профессиональная переподготовка
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="professionalRetraining in person.data.details.professionalRetraining">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ professionalRetraining.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="professionalDevelopment" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Повышение квалификации
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="professionalDevelopment in person.data.details.professionalDevelopment">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ professionalDevelopment.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="professDisciplines" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Преподаваемые дисциплины
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="professDiscipline in person.data.details.professDisciplines">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ professDiscipline.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="workExperience" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Стаж
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-1 gap-3">
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
Стаж работы: {{ person.data.details.workExperience }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
Стаж по специальности: {{ person.data.details.workExperience }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="attendedConferences" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Участие в конференциях
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="attendedConference in person.data.details.attendedConferences">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ attendedConference.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="participationScienceProjects" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Участие в научных проектах
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="participationScienceProject in person.data.details.participationScienceProjects">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ participationScienceProject.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 id="publications" class="mb-3 font-medium text-gray-800 dark:text-neutral-200">
|
||||
Публикации
|
||||
</h2>
|
||||
<ul class="list-disc ms-6 mt-3 space-y-1.5">
|
||||
<template v-for="publication in person.data.details.publications">
|
||||
<li class="ps-1 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ publication.item }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- About -->
|
||||
|
||||
<!-- End About -->
|
||||
|
||||
<!-- Projects -->
|
||||
<!-- End Projects -->
|
||||
|
||||
<!-- Testimonials -->
|
||||
<!-- End Testimonials -->
|
||||
|
||||
<!-- Skills -->
|
||||
<!-- End Skills -->
|
||||
|
||||
<!-- Work Experience -->
|
||||
<!-- End Work Experience -->
|
||||
|
||||
<!-- Education -->
|
||||
<!-- End Education -->
|
||||
|
||||
<!-- Articles -->
|
||||
<!-- End Articles -->
|
||||
|
||||
<!-- Subscribe -->
|
||||
<!-- End Subscribe -->
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
<FsLightbox class="z-1000" :slide="slide" :toggler="toggler" :sources="editorImages"/>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
scrollTop: false,
|
||||
currentNavSection: null,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
person: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
ClientFooterDown,
|
||||
MainNavbar,
|
||||
Link,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
openEditorImagesOnSlide: function (number) {
|
||||
this.slide = number;
|
||||
this.toggler = !this.toggler;
|
||||
},
|
||||
isSameRoute(route) {
|
||||
if (this.$page.props.ziggy.location === route) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
const windowTop = window.top.scrollY
|
||||
if (windowTop > 100) {
|
||||
this.scrollTop = true
|
||||
} else {
|
||||
this.scrollTop = false
|
||||
}
|
||||
},
|
||||
scrollToTop() {
|
||||
window.scrollTo(0, 0)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScroll)
|
||||
|
||||
// this.editorImages = this.blocksWithSlideNumber.filter(block => block.type === 'image').map(block => block.data.file.url);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const headings = document.querySelectorAll('h2');
|
||||
const visor = document.querySelector('#visor');
|
||||
let lastVisibleHeading = null;
|
||||
|
||||
const visorRect = visor.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли визор в пределах видимости
|
||||
if (visorRect.top > window.scrollY) {
|
||||
this.currentNavSection = null;
|
||||
lastVisibleHeading = null; // Сбрасываем заголовок, если визор не виден
|
||||
return; // Выходим из функции, если визор не виден
|
||||
}
|
||||
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
const heading = headings[i];
|
||||
const rect = heading.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли заголовок в видимой области и касается ли он элемента visor
|
||||
if (rect.top >= 0 && rect.bottom <= window.innerHeight && rect.bottom >= visorRect.top && rect.top <= visorRect.bottom) {
|
||||
// Проверяем, изменился ли заголовок
|
||||
if (heading !== lastVisibleHeading) {
|
||||
this.currentNavSection = heading.id;
|
||||
lastVisibleHeading = heading;
|
||||
}
|
||||
break; // Выходим из цикла, если нашли видимый заголовок
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
window.removeEventListener("scroll", this.onScroll)
|
||||
},
|
||||
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes grow-progress {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 2px;
|
||||
background: #26ACB8;
|
||||
z-index: 10000;
|
||||
|
||||
transform-origin: 0 50%;
|
||||
animation: grow-progress auto linear;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
.example-initial-animation {
|
||||
animation: initial-animation 2s ease;
|
||||
}
|
||||
|
||||
@keyframes initial-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import PostBadge from "@/Components/BuilderUi/Events/EventBadgeBuilder.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
PostBadge,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Object,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
},
|
||||
categories: {
|
||||
type: Object,
|
||||
},
|
||||
tags: {
|
||||
type: Object,
|
||||
},
|
||||
navigation: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Новости</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Новости НТГСПИ</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">Узнайте последние новости любимого вуза</p>
|
||||
</div>
|
||||
<div>
|
||||
<AdminIndexHeader>
|
||||
<ClientPostSearch :search_filter="this.filters.search_filter" />
|
||||
<ClientPostFilter :sorting-by_filter="this.filters.sortingBy_filter" :category_filter="this.filters.category_filter" :tag_filter="this.filters.tag_filter" :tags="tags" :items="categories"/>
|
||||
</AdminIndexHeader>
|
||||
|
||||
|
||||
<div class="px-6">
|
||||
<h3 v-if="filters.category_filter.value || filters.tag_filter.value || filters.search_filter.value" class="text-sm text-gray-500 mb-4">Найдено новостей: {{ posts.meta.total }}</h3>
|
||||
<div class="flex-wrap flex gap-3 md:items-center">
|
||||
<PostBadge :filters="this.filters" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div>
|
||||
<div class="container px-4 mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<div class="mt-10 grid gap-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<ClientPost :post="post" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="mt-10 flex items-center justify-center">
|
||||
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<Link as="button" :href="posts.links.prev" :disabled="$props.posts.links.prev === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-l-md border border-gray-300 bg-white px-3 py-2 pr-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
|
||||
</svg>
|
||||
<span>Предыдущая</span></Link>
|
||||
<Link as="button" :href="posts.links.next" :disabled="$props.posts.links.next === null"
|
||||
class="relative inline-flex items-center gap-1 rounded-r-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
||||
<span>Следующая</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
|
||||
</svg>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import PostTitle from "@/Components/BuilderUi/Posts/PostTitle.vue";
|
||||
import PostBackButton from "@/Components/BuilderUi/Posts/PostBackButton.vue";
|
||||
import PostAuthorsList from "@/Components/BuilderUi/Posts/PostAuthorsList.vue";
|
||||
import PostTimeRead from "@/Components/BuilderUi/Posts/PostTimeRead.vue";
|
||||
import PostBuilder from "@/Components/BuilderUi/Posts/PostBuilder.vue";
|
||||
import PostGallery from "@/Components/BuilderUi/Posts/PostGallery.vue";
|
||||
import PostBadge from "@/Components/BuilderUi/Events/EventBadgeBuilder.vue";
|
||||
import ClientPostFilter from "@/Components/ClientPostFilter.vue";
|
||||
import ClientPostSearch from "@/Components/ClientPostSearch.vue";
|
||||
import ClientPost from "@/Components/ClientPost.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
AdminIndexHeader, ClientPost, ClientPostSearch, ClientPostFilter, PostBadge,
|
||||
PostGallery,
|
||||
PostBuilder,
|
||||
PostTimeRead,
|
||||
PostAuthorsList,
|
||||
PostBackButton,
|
||||
PostTitle,
|
||||
ClientImageSlider,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.post.data.content,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
post: {
|
||||
type: Object,
|
||||
},
|
||||
navigation: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<ClientScrollTimeline/>
|
||||
|
||||
<MainNavbar :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-3xl lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<PostBackButton :title="'Назад'"/>
|
||||
<PostTitle :header="post.data.title"/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="md:flex md:items-center space-y-2 md:space-y-0 md:space-x-4 text-sm">
|
||||
<PostAuthorsList :authors="post.data.authors"/>
|
||||
<time class="block text-gray-500">Опубликовано {{ post.data.created_post }}
|
||||
</time>
|
||||
<PostTimeRead :time="post.data.reading_time"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<PostBuilder :blocks="this.blocks"/>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<PostGallery :title="post.data.title" :images="post.data.gallery"/>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a :href="route('client.post.index', { 'tag[]': tag.slug })" v-for="tag in post.data.tags" class="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
|
||||
{{ tag.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,163 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
|
||||
import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
|
||||
import ClientPostFilter from '@/Components/ClientPostFilter.vue';
|
||||
import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import LevelEduFilter from "@/Components/BuilderUi/Programs/Filters/LevelEduFilter.vue";
|
||||
import ClientProgramFilter from "@/Components/ClientProgramFilter.vue";
|
||||
import PostAuthorsList from "@/Components/BuilderUi/Posts/PostAuthorsList.vue";
|
||||
import PostTimeRead from "@/Components/BuilderUi/Posts/PostTimeRead.vue";
|
||||
import PostBackButton from "@/Components/BuilderUi/Posts/PostBackButton.vue";
|
||||
import PostTitle from "@/Components/BuilderUi/Posts/PostTitle.vue";
|
||||
import PostBuilder from "@/Components/BuilderUi/Posts/PostBuilder.vue";
|
||||
import PostGallery from "@/Components/BuilderUi/Posts/PostGallery.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
PostGallery, PostBuilder, PostTitle, PostBackButton, PostTimeRead, PostAuthorsList,
|
||||
ClientProgramFilter,
|
||||
LevelEduFilter,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
AdminIndexFilter, AdminIndexSearch,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
ClientPostFilter,
|
||||
Link,
|
||||
MainNavbar,
|
||||
FsLightbox,
|
||||
Head,
|
||||
ClientPost,
|
||||
ClientPostSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
campaignName: {
|
||||
type: String,
|
||||
},
|
||||
levelsEducational: {
|
||||
type: Array,
|
||||
},
|
||||
naprs: {
|
||||
type: Array
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
},
|
||||
formsEdu: {
|
||||
type: Array,
|
||||
},
|
||||
budgetEdu: {
|
||||
type: Array,
|
||||
},
|
||||
direction_studies: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transformToColumns(originalArray) {
|
||||
const chunkArray = (arr, size) => {
|
||||
return arr.reduce((acc, _, i) => (i % size ? acc : [...acc, arr.slice(i, i + size)]), []);
|
||||
};
|
||||
|
||||
const dividedArrays = chunkArray(originalArray, Math.ceil(originalArray.length / 2));
|
||||
|
||||
return dividedArrays.reverse();
|
||||
},
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Приемная компания</title>
|
||||
<meta name="description" content="Your page description"/>
|
||||
</Head>
|
||||
|
||||
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
|
||||
<div class="w-100">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<h1 class="text-brand-primary text-center mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ this.campaignName }}
|
||||
</h1>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div>
|
||||
<div class="my-10 flex items-center justify-center gap-x-2">
|
||||
<LevelEduFilter :levels="levelsEducational" :level_filter="filters.level_filter" />
|
||||
<ClientProgramFilter
|
||||
:budget_filter="filters.budget_filter"
|
||||
:direction_filter="filters.direction_filter"
|
||||
:formEdu_filter="filters.formEdu_filter"
|
||||
:types_budget="budgetEdu"
|
||||
:direction_studies="direction_studies"
|
||||
:forms_educational="formsEdu" />
|
||||
</div>
|
||||
<div class="container mx-auto xl:px-5 py-5 lg:py-4">
|
||||
<div class="w-full mx-auto gap-x3 flex flex-wrap lg:justify-center">
|
||||
<template v-for="naprs in transformToColumns(this.naprs.data)">
|
||||
<div class="flex flex-col">
|
||||
<template v-for="napr in naprs">
|
||||
<div style="height: max-content" class="px-4">
|
||||
<h1 class="text-brand-primary mb-2 mt-2 text-lg font-semibold upper tracking-tight dark:text-white lg:text-md lg:leading-tight">
|
||||
{{ napr.name }}
|
||||
</h1>
|
||||
<template v-for="program in napr.programs" :key="program.id">
|
||||
<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.program.show', program)">{{ program.name }}</Link>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,465 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientPostFilter from "@/Components/ClientPostFilter.vue";
|
||||
import ClientPost from "@/Components/ClientPost.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import ClientPostSearch from "@/Components/ClientPostSearch.vue";
|
||||
import ClientProgramFilter from "@/Components/ClientProgramFilter.vue";
|
||||
import LevelEduFilter from "@/Components/BuilderUi/Programs/Filters/LevelEduFilter.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
LevelEduFilter, ClientProgramFilter,
|
||||
ClientPostSearch,
|
||||
AdminIndexHeader,
|
||||
ClientPost,
|
||||
ClientPostFilter,
|
||||
ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.blocksWithSlideNumber,
|
||||
userData: this.$page.props.auth.user,
|
||||
toggler: false,
|
||||
togglerGallery: false,
|
||||
editorImages: [],
|
||||
galleryImages: [],
|
||||
slide: 1,
|
||||
gallerySlide: 1,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
program: {
|
||||
type: Array,
|
||||
},
|
||||
formsEdu: {
|
||||
type: Array
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
getFormOfStudy(contests) {
|
||||
const formOfStudyArray = Array.from(new Set(contests.map(item => item.form_edu)));
|
||||
|
||||
return formOfStudyArray;
|
||||
},
|
||||
getYearOfStudy(contests) {
|
||||
const YearOfStudyArray = Array.from(new Set(contests.map(item => item.period_data)));
|
||||
|
||||
return YearOfStudyArray;
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>Образовательная программа</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
|
||||
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
|
||||
<div>
|
||||
<div class="container mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<a onclick="history.back()" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500" href="#">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Назад
|
||||
</a>
|
||||
<div class="space-y-3 flex flex-col items-center justify-center">
|
||||
<div class="inline-flex mx-auto items-center gap-x-1.5 py-1.5 px-3 rounded-md text-xs font-medium border border-gray-200 bg-white text-gray-800 shadow-sm dark:bg-slate-900 dark:border-gray-700 dark:text-white">{{ program.data.lvl_edu }}</div>
|
||||
<h1 class="text-2xl text-center font-bold md:text-4xl">{{ program.data.name }}</h1>
|
||||
</div>
|
||||
<!-- Icon Blocks -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 items-start gap-12">
|
||||
<!-- Icon Block -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Направление подготовки</h3>
|
||||
<p class="mt-1 text-gray-600">{{ program.data.directionStudy.name }} {{ program.data.directionStudy.code }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Block -->
|
||||
|
||||
<!-- Icon Block -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Срок обучения</h3>
|
||||
<template v-for="data in program.data.learning_forms">
|
||||
<p class="mt-1 text-gray-600">{{ data.period_data }} <span class="text-gray-400 text-[12px]">({{ data.form_edu }})</span> </p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Block -->
|
||||
|
||||
<!-- Icon Block -->
|
||||
<!-- <div class="text-center">-->
|
||||
<!-- <div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">-->
|
||||
<!-- <svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mt-3">-->
|
||||
<!-- <h3 class="text-lg font-semibold text-gray-800">Форма обучения</h3>-->
|
||||
<!-- <template v-for="form in getFormOfStudy(program.data.learning_forms)">-->
|
||||
<!-- <p class="mt-1 text-gray-600">{{ form }}</p>-->
|
||||
<!-- </template>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- End Icon Block -->
|
||||
|
||||
|
||||
|
||||
<!-- Icon Block -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
|
||||
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">Количество мест на прием</h3>
|
||||
<template v-for="admissionPlan in program.data.admissionPlans">
|
||||
<template v-for="contest in admissionPlan.contests">
|
||||
<div class="border rounded my-2 py-1">
|
||||
<span class="text-gray-500 text-[14px]">{{ (contest.form_education === '1') ? 'Очная форма обучения' : 'Заочная форма обучения' }}</span>
|
||||
<p v-for="place in contest.places" class="mt-1 text-gray-600">{{ place.count }} мест <span class="text-gray-400 text-[12px]">{{ this.formsEdu[place.form_budget] }}</span></p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Block -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg" id="hs-bordered-heading-one">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none" aria-controls="hs-basic-bordered-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
Условия поступления
|
||||
</button>
|
||||
<div id="hs-basic-bordered-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-two">
|
||||
<div class="pb-4 px-5">
|
||||
<ol class="list-decimal list-inside">
|
||||
<template v-for="admissionPlan in program.data.admissionPlans">
|
||||
<template v-for="exam in admissionPlan.exams">
|
||||
<li>{{ exam.title }} <span class="text-gray-400 text-[14px]">({{ (exam.type_exam === 'ege' ? 'ЕГЭ' : 'ВИ') }}, минимальный балл: {{ exam.min_score }})</span></li>
|
||||
</template>
|
||||
</template>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hs-accordion bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg" id="hs-bordered-heading-two">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none" aria-controls="hs-basic-bordered-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
О программе
|
||||
</button>
|
||||
<div id="hs-basic-bordered-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-two">
|
||||
<div class="pb-4 px-5">
|
||||
<template v-for="block in this.program.data.about_program" :key="block.id">
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<template v-for="img in block.data.url">
|
||||
<img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="paragraph-container" v-html="block.data.content" v-if="block.type === 'paragraph'" />
|
||||
|
||||
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="block.type === 'linkTool'">
|
||||
<div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">
|
||||
<a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">
|
||||
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 inset-x-0 z-10">
|
||||
<div class="p-4 flex flex-col h-full sm:p-6">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center">
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-semibold text-white">
|
||||
{{ block.data.meta.data.authors[0].name }}
|
||||
</h4>
|
||||
<p class="text-xs text-white/[.8]">
|
||||
{{ block.data.meta.data.created_post }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 inset-x-0 z-10">
|
||||
<div class="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
|
||||
{{ block.data.meta.data.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-white/[.8]">
|
||||
{{ textLimit(block.data.meta.description, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
<div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ block.data.meta.title }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hs-accordion bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg" id="hs-bordered-heading-three">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none" aria-controls="hs-basic-bordered-collapse-three">
|
||||
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
Особенности программы
|
||||
</button>
|
||||
<div id="hs-basic-bordered-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-three">
|
||||
<div class="pb-4 px-5">
|
||||
<template v-for="block in this.program.data.program_features" :key="block.id">
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<template v-for="img in block.data.url">
|
||||
<img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="paragraph-container" v-html="block.data.content" v-if="block.type === 'paragraph'" />
|
||||
|
||||
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="block.type === 'linkTool'">
|
||||
<div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">
|
||||
<a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">
|
||||
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 inset-x-0 z-10">
|
||||
<div class="p-4 flex flex-col h-full sm:p-6">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center">
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-semibold text-white">
|
||||
{{ block.data.meta.data.authors[0].name }}
|
||||
</h4>
|
||||
<p class="text-xs text-white/[.8]">
|
||||
{{ block.data.meta.data.created_post }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 inset-x-0 z-10">
|
||||
<div class="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
|
||||
{{ block.data.meta.data.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-white/[.8]">
|
||||
{{ textLimit(block.data.meta.description, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
<div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ block.data.meta.title }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Blocks -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
data() {
|
||||
return {
|
||||
searchInput: this.searchRequest,
|
||||
}
|
||||
},
|
||||
components: {MainPageNavBar, ClientFooterDown, MainNavbar, Link},
|
||||
props: [
|
||||
'educationalGroups',
|
||||
'mainSections',
|
||||
'searchRequest',
|
||||
'navigation',
|
||||
],
|
||||
methods: {
|
||||
search: debounce(function () {
|
||||
this.$inertia.reload({
|
||||
method: 'get',
|
||||
data: {
|
||||
search: this.searchInput,
|
||||
},
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
}, 300),
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<article class="w-full min-w-0 mt-4 px-1 md:px-6">
|
||||
<div class="relative overflow-hidden">
|
||||
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:pb-24 sm:py-5">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl sm:text-4xl font-bold text-gray-800 dark:text-gray-200">
|
||||
Расписание занятий
|
||||
</h1>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="mt-3 text-gray-600 dark:text-gray-400">
|
||||
Просто введите название группы
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-7 sm:mt-12 mx-auto max-w-xl relative">
|
||||
<!-- Form -->
|
||||
<form>
|
||||
<div class="relative z-10 space-x-3 p-3 bg-white border rounded-lg shadow-lg shadow-gray-100">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex w-full">
|
||||
<label for="hs-search-article-1"
|
||||
class="block text-sm text-gray-700 font-medium dark:text-white">
|
||||
<span class="sr-only">Поиск</span>
|
||||
</label>
|
||||
<input @keydown.enter.prevent autocomplete="off" v-model="searchInput" @input="search" type="search"
|
||||
id="hs-search-article-1"
|
||||
class="py-2.5 px-4 block w-full border-transparent rounded-lg"
|
||||
placeholder="Поиск">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- End Form -->
|
||||
|
||||
<!-- SVG Element -->
|
||||
<div class="hidden md:block absolute top-0 end-0 -translate-y-12 translate-x-20">
|
||||
<svg class="w-16 h-auto text-orange-500" width="121" height="135" viewBox="0 0 121 135"
|
||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164" stroke="currentColor"
|
||||
stroke-width="10" stroke-linecap="round"/>
|
||||
<path d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
||||
stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
|
||||
<path d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
||||
stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- End SVG Element -->
|
||||
|
||||
<!-- SVG Element -->
|
||||
<div class="hidden md:block absolute bottom-0 start-0 translate-y-10 -translate-x-32">
|
||||
<svg class="w-40 h-auto text-cyan-500" width="347" height="188" viewBox="0 0 347 188"
|
||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 82.4591C54.7956 92.8751 30.9771 162.782 68.2065 181.385C112.642 203.59 127.943 78.57 122.161 25.5053C120.504 2.2376 93.4028 -8.11128 89.7468 25.5053C85.8633 61.2125 130.186 199.678 180.982 146.248L214.898 107.02C224.322 95.4118 242.9 79.2851 258.6 107.02C274.299 134.754 299.315 125.589 309.861 117.539L343 93.4426"
|
||||
stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- End SVG Element -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-2xl hs-accordion-group grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
|
||||
<transition-group name="fade">
|
||||
<template v-for="educationalGroup in educationalGroups.data" :key="educationalGroup.id">
|
||||
<div class="hs-accordion hs-accordion-active:border-gray-200 bg-white border-b dark:hs-accordion-active:border-gray-700 dark:bg-gray-800 dark:border-transparent"
|
||||
id="hs-active-bordered-heading-one">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:text-gray-400"
|
||||
aria-controls="hs-basic-active-bordered-collapse-one">
|
||||
{{ educationalGroup.title }}
|
||||
<svg class="hs-accordion-active:hidden block w-3.5 h-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"/>
|
||||
<path d="M12 5v14"/>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden w-3.5 h-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="hs-basic-active-bordered-collapse-one"
|
||||
class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-active-bordered-heading-one">
|
||||
<div class="pb-4 px-5 grid gap-3 grid-cols-1">
|
||||
<template v-for="schedule in educationalGroup.schedules" :key="schedule.id">
|
||||
<a target="_blank" :href="route('client.schedule.show', schedule.id)" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
|
||||
{{ schedule.title }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</transition-group>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.gg-enter-active,
|
||||
.gg-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.gg-enter-from,
|
||||
.gg-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,271 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
weekdayFull: ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'],
|
||||
weekday: ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'],
|
||||
timeSchedules: ['09:00 - 10:35', '10:55 - 12:30', '13:00 - 14:35', '14:45 - 16:20', '16:30 - 18:00']
|
||||
}
|
||||
},
|
||||
components: {ClientFooterDown, MainNavbar, Link},
|
||||
props: [
|
||||
'schedule',
|
||||
'searchRequest',
|
||||
'navigation',
|
||||
],
|
||||
methods: {
|
||||
getEndTime(timeString) {
|
||||
const [start, end] = timeString.split(' - ');
|
||||
const [hours, minutes] = end.split(':');
|
||||
const hoursInt = parseInt(hours);
|
||||
const minutesInt = parseInt(minutes);
|
||||
const date = new Date();
|
||||
date.setHours(hoursInt);
|
||||
date.setMinutes(minutesInt);
|
||||
return date;
|
||||
},
|
||||
generateDayTitle(dayId) {
|
||||
const today = new Date();
|
||||
const todayDayOfWeek = today.getDay() - 1;
|
||||
let title;
|
||||
if (todayDayOfWeek === dayId) {
|
||||
title = "Cегодня"
|
||||
} else if(todayDayOfWeek + 1 === dayId) {
|
||||
title = "Завтра"
|
||||
} else {
|
||||
title = this.weekdayFull[dayId]
|
||||
}
|
||||
return title;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDayOfWeek() {
|
||||
const today = new Date();
|
||||
const todayDayOfWeek = today.getDay() - 1;
|
||||
let scheduleDay;
|
||||
let currentDay;
|
||||
let todaySchedule = this.schedule.days[todayDayOfWeek];
|
||||
if (todaySchedule === undefined) {
|
||||
scheduleDay = this.schedule.days[0];
|
||||
currentDay = 0;
|
||||
return {
|
||||
'title': this.generateDayTitle(currentDay),
|
||||
'scheduleDay': scheduleDay,
|
||||
}
|
||||
}
|
||||
if (this.getEndTime(this.timeSchedules[todaySchedule.form.length - 1]) < today) {
|
||||
scheduleDay = this.schedule.days[todayDayOfWeek + 1];
|
||||
currentDay = todayDayOfWeek + 1;
|
||||
} else {
|
||||
scheduleDay = this.schedule.days[todayDayOfWeek];
|
||||
currentDay = todayDayOfWeek;
|
||||
}
|
||||
|
||||
return {
|
||||
'title': this.generateDayTitle(currentDay),
|
||||
'scheduleDay': scheduleDay,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainNavbar class="border-b" :sections="$page.props.navigation"></MainNavbar>
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<article class="w-full min-w-0 mt-4 px-1 md:px-6">
|
||||
<div class="relative overflow-hidden">
|
||||
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-5">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl sm:text-4xl font-bold text-gray-800 dark:text-gray-200">
|
||||
Расписание занятий
|
||||
</h1>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">{{ schedule.title }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-7 sm:mt-12 mx-auto max-w-xl relative">
|
||||
|
||||
<div class="border-b border-gray-200 px-4">
|
||||
<nav class="flex space-x-2 justify-center" aria-label="Tabs" role="tablist">
|
||||
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none active" id="basic-tabs-item-1" data-hs-tab="#basic-tabs-1" aria-controls="basic-tabs-1" role="tab">
|
||||
Расписание на {{ getDayOfWeek.title }}
|
||||
</button>
|
||||
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none" id="basic-tabs-item-2" data-hs-tab="#basic-tabs-2" aria-controls="basic-tabs-2" role="tab">
|
||||
Расписание на неделю
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mx-auto max-w-4xl hs-accordion-group gap-3">
|
||||
|
||||
<div id="basic-tabs-1" role="tabpanel" aria-labelledby="basic-tabs-item-1">
|
||||
<table class="border-collapse rounded-xl border w-full mb-4">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center border px-3">#</td>
|
||||
<td class="text-center border" width="20%">Время</td>
|
||||
<td class="text-center border" colspan="3">Предмет</td>
|
||||
</tr>
|
||||
<template v-for="(lesson, index) in getDayOfWeek.scheduleDay.form">
|
||||
<tr>
|
||||
<td class="border text-center">{{ index + 1 }}</td>
|
||||
<td class="border text-center">{{ this.timeSchedules[index] }}</td>
|
||||
<td class="text-center border">
|
||||
<template v-for="lesson_info in lesson">
|
||||
<div class="flex items-stretch justify-center">
|
||||
<template v-for="firstWeek in lesson_info[0]">
|
||||
<template v-for="(couple, index) in firstWeek">
|
||||
<div class="flex" :class="{'border-l': index === 1, 'w-1/2': Object.keys(firstWeek).length === 2,}">
|
||||
<p class="my-auto text-center px-2 py-1">{{ couple.title }} {{ couple.teacher }} <i>{{ couple.studyRoom }}</i></p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="lesson_info[1]" class="flex border-t justify-center">
|
||||
<template v-for="firstWeek in lesson_info[1]">
|
||||
<template v-for="(couple, index) in firstWeek">
|
||||
<div class="flex justify-center" :class="{'border-l': index === 1, 'w-1/2': Object.keys(firstWeek).length === 2}">
|
||||
<p class="my-auto text-center px-2 py-1">{{ couple.title }} {{ couple.teacher }} <i>{{ couple.studyRoom }}</i></p>
|
||||
<p class="unselectable text-center opacity-0" v-if="couple.title === null">-------------------- <br>
|
||||
---------</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="basic-tabs-2" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-2">
|
||||
<template v-for="(day, index) in schedule.days">
|
||||
<table class="border-collapse border w-full mb-4">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center" rowspan="9" width="30px">{{ this.weekday[index] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center border px-3">#</td>
|
||||
<td class="text-center border" width="20%">Время</td>
|
||||
<td class="text-center border" colspan="3">Предмет</td>
|
||||
</tr>
|
||||
<template v-for="(lesson, index) in day.form">
|
||||
<tr>
|
||||
<td class="border text-center">{{ index + 1 }}</td>
|
||||
<td class="border text-center">{{ this.timeSchedules[index] }}</td>
|
||||
<td class="text-center border">
|
||||
<template v-for="lesson_info in lesson">
|
||||
<div class="flex items-stretch justify-center">
|
||||
<template v-for="firstWeek in lesson_info[0]">
|
||||
<template v-for="(couple, index) in firstWeek">
|
||||
<div class="flex" :class="{'border-l': index === 1, 'w-1/2': Object.keys(firstWeek).length === 2,}">
|
||||
<p class="my-auto text-center px-2 py-1">{{ couple.title }} {{ couple.teacher }} <i>{{ couple.studyRoom }}</i></p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="lesson_info[1]" class="flex border-t justify-center">
|
||||
<template v-for="firstWeek in lesson_info[1]">
|
||||
<template v-for="(couple, index) in firstWeek">
|
||||
<div class="flex justify-center" :class="{'border-l': index === 1, 'w-1/2': Object.keys(firstWeek).length === 2}">
|
||||
<p class="my-auto text-center px-2 py-1">{{ couple.title }} {{ couple.teacher }} <i>{{ couple.studyRoom }}</i></p>
|
||||
<p class="unselectable text-center opacity-0" v-if="couple.title === null">-------------------- <br>
|
||||
---------</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<hr class="py-2">
|
||||
</template>
|
||||
</div>
|
||||
<div id="basic-tabs-3" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-3">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.unselectable {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.gg-enter-active,
|
||||
.gg-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.gg-enter-from,
|
||||
.gg-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,243 @@
|
||||
<script>
|
||||
import MainNavbar from "@/Navbars/MainNavbar.vue";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
return {
|
||||
blocks: this.blocksWithSlideNumber,
|
||||
userData: this.$page.props.auth.user,
|
||||
toggler: false,
|
||||
togglerGallery: false,
|
||||
editorImages: [],
|
||||
galleryImages: [],
|
||||
slide: 1,
|
||||
gallerySlide: 1,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
post: {
|
||||
type: Array,
|
||||
},
|
||||
mainSections: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
openEditorImagesOnSlide: function(number) {
|
||||
this.slide = number;
|
||||
this.toggler = !this.toggler;
|
||||
},
|
||||
openGalleryImagesOnSlide: function(number) {
|
||||
this.gallerySlide = number;
|
||||
this.togglerGallery = !this.togglerGallery;
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.editorImages = this.blocksWithSlideNumber
|
||||
.filter(block => block.type === 'image')
|
||||
.map(block => block.data.file.url);
|
||||
this.galleryImages = this.post.data.gallery.images
|
||||
.map(image => image.path)
|
||||
},
|
||||
computed: {
|
||||
blocksWithSlideNumber() {
|
||||
let slideNumber = 1;
|
||||
return this.post.data.content.blocks.map((block) => {
|
||||
if (block.type === "image") {
|
||||
block.slideNumber = slideNumber;
|
||||
slideNumber++;
|
||||
}
|
||||
return block;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<MainNavbar class="border-b" :sections="this.mainSections"></MainNavbar>
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="max-w-3xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-2xl font-bold md:text-3xl dark:text-white">{{ post.data.title }}</h2>
|
||||
</div>
|
||||
<div class="flex justify-between border-t border-b border-gray-300 py-4 items-center mb-6">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
||||
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
|
||||
Главная
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
|
||||
Новости
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
|
||||
{{ textLimit(post.data.title, 15) }}
|
||||
</li>
|
||||
</ol>
|
||||
<div class="flex items-center">
|
||||
<ul class="block text-xs text-gray-500 mr-3">
|
||||
<li class="inline-block relative pr-6 last:pr-0 last-of-type:before:hidden before:absolute before:top-1/2 before:right-2 before:-translate-y-1/2 before:w-1 before:h-1 before:bg-gray-300 before:rounded-full dark:text-gray-400 dark:before:bg-gray-600">
|
||||
Опубликовано: {{ post.data.created_post }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hs-tooltip [--trigger:hover] [--placement:bottom]">
|
||||
<div class="hs-tooltip-toggle sm:mb-1 block text-left cursor-pointer">
|
||||
<span class="font-normal text-sm text-gray-800 dark:text-gray-200 underline hover:text-gray-500">
|
||||
{{ post.data.authors.length === 0 ? '' : textLimit(post.data.authors[0].name, 10) }}
|
||||
</span>
|
||||
<!-- Dropdown Card -->
|
||||
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 max-w-xs cursor-default bg-gray-900 divide-y divide-gray-700 shadow-lg rounded-xl dark:bg-black" role="tooltip">
|
||||
<!-- Body -->
|
||||
<div class="p-4 sm:p-5">
|
||||
<div class="mb-2 flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<p class="text-lg font-semibold text-gray-200">
|
||||
{{ post.data.authors.length === 0 ? '' : post.data.authors[0].name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
<!-- End Body -->
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- End Footer -->
|
||||
</div>
|
||||
<!-- End Dropdown Card -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-for="block in blocksWithSlideNumber">
|
||||
<div v-if="block.type === 'image'">
|
||||
<figure>
|
||||
<img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)" :src="block.data.file.url" class="w-full max-h-[500px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition" :alt="block.data.caption">
|
||||
<figcaption class="mt-3 text-sm text-center text-gray-500">
|
||||
{{ block.data.caption }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div v-if="block.type === 'paragraph'">
|
||||
<p class="text-[16px] text-gray-800 dark:text-gray-200 text-justify leading-7">{{ block.data.text }}</p>
|
||||
</div>
|
||||
<div class="" v-if="block.type === 'list'">
|
||||
<ul class="list-inside" :class="{ 'list-disc': block.data.style === 'unordered' }">
|
||||
<li class="text-[16px] text-gray-800 dark:text-gray-200 text-justify leading-7" v-for="item in block.data.items" v-html="item"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke="white" /> </svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button" class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="galleryImages.length" class="grid gap-4 border-t border-gray-300 py-4">
|
||||
<div class="relative">
|
||||
<img class="filter brightness-[0.7] w-full max-h-[500px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition" :src="galleryImages[0]" data-hs-overlay="#hs-large-modal" alt="">
|
||||
<div class="absolute inset-x-0 bottom-5 flex flex-col justify-center items-center">
|
||||
<p class="text-white text-sm lg:text-xl text-center">{{ post.data.title }}</p>
|
||||
<span class="text-gray-400 text-sm">{{ galleryImages.length }} фотографий</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="z-index: 1000" id="hs-large-modal" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
|
||||
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto">
|
||||
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
|
||||
<h3 class="font-bold text-gray-800 dark:text-white">
|
||||
Галлерея: {{ post.data.title }}
|
||||
</h3>
|
||||
<button type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-large-modal">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<template v-for="(image, key) in galleryImages.slice()">
|
||||
<div>
|
||||
<img loading="lazy" @click="openGalleryImagesOnSlide(key + 1)" class="h-[200px] w-full object-cover rounded-lg hover:scale-[1.05] hover:opacity-95 hover:duration-200 transition" :src="image" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FsLightbox class="z-1100" :slide="gallerySlide" :toggler="togglerGallery" :sources="galleryImages" />
|
||||
|
||||
<FsLightbox class="z-1000" :slide="slide" :toggler="toggler" :sources="editorImages" />
|
||||
</div>
|
||||
<ClientFooterDown />
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user