forked from eatvio/eatvio-infra
115 lines
6.3 KiB
PHP
115 lines
6.3 KiB
PHP
@extends('layouts/eatvio')
|
|
|
|
@section('page_title', 'Blog Post ' . $blogPost->title)
|
|
@php
|
|
$blogPostViewsCount = views($blogPost)->unique()->count();
|
|
@endphp
|
|
@section('main_section')
|
|
<section class="py-5" id="main">
|
|
<div class="container d-flex justify-content-between align-items-center flex-nowrap mb-4 px-4 py-3 --bg_white --shadow --radius --mw-1000 --f_bold --f_main overflow-x-xs-scroll">
|
|
<a href="{{ route('blog_post.index') }}" class="d-flex w-2/5 align-items-center --f_bold">
|
|
<svg width="17" height="16" class="me-2"><use xlink:href="#GoBack"></use></svg>
|
|
<span class="d-none d-md-inline --f_main">Посты в блоге</span>
|
|
</a>
|
|
<div class="d-flex align-items-center fs-6">
|
|
<svg width="20" height="14" class="me-2"><use xlink:href="#Eye_Black"></use></svg>
|
|
<span class="me-4">{{ $blogPostViewsCount }}</span>
|
|
<svg width="16" height="14" class="me-2"><use xlink:href="#Heart_Black"></use></svg>
|
|
<span class="me-4">@livewire('blog-post.like-count', ['blogPost' => $blogPost])</span>
|
|
<svg width="14" height="14" class="me-2"><use xlink:href="#Comment_Black"></use></svg>
|
|
<span>{{ $blogPost->comments_count }}</span>
|
|
</div>
|
|
<div class="d-none d-md-flex w-2/5 ps-3 justify-content-end align-items-center">
|
|
<span class="me-2 text-end">
|
|
<a href="{{ route('profile.show', $author->id) }}" class="text-black">
|
|
{{ $author['name'] }}
|
|
</a>
|
|
</span>
|
|
<a href="{{ route('profile.show', $author->id) }}" class="d-none d-sm-block overflow-hidden rounded-full" >
|
|
<div class="centered-bg-img" style="background-image: url('{{ $author->profile_photo_url }}')"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-5 p-0 --mw-1000">
|
|
<div class="--bg_white --shadow --radius --no_wrap">
|
|
<div class="row m-0 p-3 position-relative">
|
|
<div class="col-12 col-md-5 mb-2 mb-md-0 ps-0 pe-0 pe-md-3">
|
|
<img src="/storage/{{ $blogPost->image }}" class="w-full --radius">
|
|
</div>
|
|
<div class="col-12 col-md-7 pe-0 d-flex flex-column justify-content-between">
|
|
<div>
|
|
<div class="mb-3 fs-18 --f_bold --no_wrap_normal">{{ $blogPost->title }}</div>
|
|
<div class="mt-3 lh-sm --no_wrap_normal">
|
|
<small>
|
|
{!! $blogPost->description !!}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 fs-14 --f_bolder">
|
|
@if(filter_var($blogPost->youtube_url, FILTER_VALIDATE_URL))
|
|
<a href="{{ $blogPost->youtube_url }}" class="d-inline-flex align-items-center" target="_blank">
|
|
<span class="--f_main">Посмотреть рецепт на YouTube</span>
|
|
<svg width="18" height="14" class="ms-2"><use xlink:href="#YouTubeIcon"></use></svg>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<ul class="navbar-nav --abs --dotted --r w-auto mt-2 me-2 mt-md-3 me-md-3 p-0" style="--bs-scroll-height:100px;">
|
|
<li class="nav-item dropdown">
|
|
<a id="dLabel" class="nav-link py-0 dropdown-toggle-js" href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button">
|
|
<svg width="18" height="4"><use xlink:href="#Dots"></use></svg>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
|
|
<li><a class="dropdown-item" href="{{ route('blog_post.edit', $blogPost->id) }}">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Другое действие</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="#">Что-то еще</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="row m-0 mt-2 p-3 bg_lightest_blue-v2">
|
|
<div class="col-12 col-md-3 mt-3 mt-md-0 fs-14">
|
|
<div class="h6 mb-2 mb-md-3 --f_bold --f_grey text-uppercase">Теги:</div>
|
|
<div class="fs-6 --tags --m_large --no_wrap_normal">
|
|
@foreach($blogPost->tags as $curTag)
|
|
<a href="{{ $curTag->index_url }}" class="btn badge --radius --bg-blue --f_bold --f_main">{{ $curTag->name }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex p-4 align-items-center justify-content-between justify-content-sm-center --f_bold">
|
|
<a href="#" class="d-flex align-items-center me-4 me-sm-5 --f_main">
|
|
<small>
|
|
<svg width="21" height="20" class="me-1">
|
|
<use xlink:href="#ActionComment"></use>
|
|
</svg>
|
|
Комментировать
|
|
</small>
|
|
</a>
|
|
@livewire('blog-post.like', ['blogPost' => $blogPost])
|
|
<a href="#" class="d-flex align-items-center --f_main">
|
|
<small>
|
|
<svg width="21" height="22" class="me-1">
|
|
<use xlink:href="#Share"></use>
|
|
</svg>
|
|
<span class="d-none d-sm-inline">Поделится</span>
|
|
</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="commentsList" class="container p-0 --mw-1000">
|
|
@livewire('blog-post.comment.show', ['blogPost' => $blogPost])
|
|
</div>
|
|
<div class="container px-0 mb-4 --mw-1000 --bg_white --radius fs-4_5">
|
|
@livewire('blog-post.comment.create', ['blogPost' => $blogPost, 'user' => Auth::user()])
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
@push('jq_scripts')
|
|
<script src="/js/bootstrap.min.js"></script>
|
|
<script src="/js/bootstrap.bundle.min.js"></script>
|
|
@endpush
|