100 lines
6.6 KiB
Vue
100 lines
6.6 KiB
Vue
<template>
|
|
<meta-head title="Новости"></meta-head>
|
|
|
|
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
|
|
<div class="items-center grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:gap-12">
|
|
<dropdown-menu>
|
|
|
|
<MenuItems class="origin-top-left absolute left-0 mt-2 w-64 bg-indigo-300 shadow-lg max-h-60 rounded-md text-base ring-1 ring-indigo-200 overflow-auto focus:outline-none">
|
|
<MenuItem>
|
|
<inertia-link :href="route('video.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
|
|
<VideoCameraIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Загрузить видео
|
|
</inertia-link>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<inertia-link :href="route('image.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
|
|
<PhotographIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Загрузить изображение
|
|
</inertia-link>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<inertia-link :href="route('music.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
|
|
<MusicNoteIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Загрузить музыку
|
|
</inertia-link>
|
|
</MenuItem>
|
|
</MenuItems>
|
|
|
|
</dropdown-menu>
|
|
<inertia-link
|
|
:href='route("feeds.layoutsidebar.image")'
|
|
:class="[active_button == 'image' ? 'bg-orange' : 'bg-indigo-200 hover:bg-orange', 'transition inline-flex items-center px-3 py-3 lg:px-7 lg:py-5 justify-center shadow-classic text-sm rounded-md text-white focus:outline-none']">
|
|
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M4.167 3.333a.833.833 0 00-.834.834v11.666c0 .46.373.834.834.834h11.666c.46 0 .834-.373.834-.834V4.167a.833.833 0 00-.834-.834H4.167zm-2.5.834a2.5 2.5 0 012.5-2.5h11.666a2.5 2.5 0 012.5 2.5v11.666a2.5 2.5 0 01-2.5 2.5H4.167a2.5 2.5 0 01-2.5-2.5V4.167z" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M7.083 6.667a.417.417 0 100 .833.417.417 0 000-.833zM5 7.083a2.083 2.083 0 114.167 0 2.083 2.083 0 01-4.167 0zM12.744 7.744a.833.833 0 011.179 0l4.166 4.167a.834.834 0 01-1.178 1.178l-3.578-3.577-8.577 8.577a.833.833 0 01-1.179-1.178l9.167-9.167z" />
|
|
</svg>
|
|
<span class="truncate">Изображения</span>
|
|
</inertia-link>
|
|
|
|
<inertia-link
|
|
:href='route("feeds.layoutsidebar.video")'
|
|
:class="[active_button == 'video' ? 'bg-orange' : 'bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-7 lg:py-5 justify-center shadow-classic text-sm rounded-md text-white focus:outline-none']">
|
|
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.483 2.5a.983.983 0 00-.983.983v13.034c0 .543.44.983.983.983h13.034c.543 0 .983-.44.983-.983V3.483a.983.983 0 00-.983-.983H3.483zm-2.65.983a2.65 2.65 0 012.65-2.65h13.034a2.65 2.65 0 012.65 2.65v13.034a2.65 2.65 0 01-2.65 2.65H3.483a2.65 2.65 0 01-2.65-2.65V3.483z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M5.833.833c.46 0 .834.373.834.834v16.666a.833.833 0 11-1.667 0V1.667c0-.46.373-.834.833-.834zM14.167.833c.46 0 .833.373.833.834v16.666a.833.833 0 11-1.667 0V1.667c0-.46.373-.834.834-.834z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M.833 10c0-.46.373-.833.834-.833h16.666a.833.833 0 010 1.666H1.667A.833.833 0 01.833 10zM.833 5.833c0-.46.373-.833.834-.833h4.166a.833.833 0 010 1.667H1.667a.833.833 0 01-.834-.834zM.833 14.167c0-.46.373-.834.834-.834h4.166a.833.833 0 010 1.667H1.667a.833.833 0 01-.834-.833zM13.333 14.167c0-.46.373-.834.834-.834h4.166a.833.833 0 010 1.667h-4.166a.833.833 0 01-.834-.833zM13.333 5.833c0-.46.373-.833.834-.833h4.166a.833.833 0 010 1.667h-4.166a.833.833 0 01-.834-.834z" /></svg>
|
|
<span class="truncate">Видео</span>
|
|
</inertia-link>
|
|
|
|
<inertia-link
|
|
:href='route("feeds.layoutsidebar.music")'
|
|
:class="[active_button == 'music' ? 'bg-orange' : 'bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-7 lg:py-5 justify-center shadow-classic text-sm rounded-md text-white focus:outline-none']">
|
|
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.399 12.399a2.5 2.5 0 011.768-.732H17.5c.46 0 .833.373.833.833v1.667a2.5 2.5 0 01-2.5 2.5h-1.666a2.5 2.5 0 01-1.768-4.268zm1.768.934a.833.833 0 000 1.667h1.666a.833.833 0 00.834-.833v-.834h-2.5zm-11.768.733a2.5 2.5 0 011.768-.733H7.5c.46 0 .833.373.833.834v1.666a2.5 2.5 0 01-2.5 2.5H4.167a2.5 2.5 0 01-1.768-4.267zM4.167 15a.833.833 0 100 1.667h1.666a.833.833 0 00.834-.834V15h-2.5z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.039 1.864c.187.158.294.391.294.636v10a.833.833 0 01-1.666 0V3.484L8.333 4.873v9.294a.833.833 0 01-1.666 0v-10c0-.408.294-.755.696-.822l10-1.667a.833.833 0 01.676.186z"/></svg>
|
|
<span class="truncate">Музыка</span>
|
|
</inertia-link>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feeds-user-list mt-5 container mx-auto px-2 md:px-6 2xl:px-28 space-y-4 lg:space-y-8">
|
|
|
|
<feed-list
|
|
:self-feed="false"
|
|
:feeds="feeds"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FeedList from "@/Shared/FeedList/FeedList";
|
|
import Layout from '@/Shared/Layout'
|
|
import MetaHead from '@/Shared/MetaHead'
|
|
import {
|
|
PhotographIcon,
|
|
VideoCameraIcon,
|
|
MusicNoteIcon,
|
|
} from '@heroicons/vue/solid'
|
|
import { MenuItem, MenuItems } from '@headlessui/vue'
|
|
import DropdownMenu from '@/Shared/Form/DropdownMenu'
|
|
|
|
export default {
|
|
components: {
|
|
FeedList,
|
|
MetaHead,
|
|
DropdownMenu,
|
|
MenuItem,
|
|
MenuItems,
|
|
PhotographIcon,
|
|
MusicNoteIcon,
|
|
VideoCameraIcon
|
|
},
|
|
layout: Layout,
|
|
props: {
|
|
feeds: Array,
|
|
active_button: String,
|
|
},
|
|
}
|
|
</script>
|