forked from eatvio/eatvio-infra
WIP recipe
This commit is contained in:
Anatoliy Poloz
@@ -5,6 +5,269 @@
|
||||
$recipeViewsCount = views($recipe)->unique()->count();
|
||||
@endphp
|
||||
@section('main_section')
|
||||
<section class="content">
|
||||
<div class="content__container container-sm">
|
||||
<div class="content__heading">
|
||||
<a href="{{ route('recipe.index') }}" class="content__heading-back icon-arrow-short-left">
|
||||
<span>Рецепты</span>
|
||||
</a>
|
||||
<div class="content__heading-stats">
|
||||
<div class="content__heading-stat icon-eye-fill">
|
||||
<strong>{{ $recipeViewsCount }}</strong>
|
||||
</div>
|
||||
<div class="content__heading-stat icon-heart-fill">
|
||||
<strong>@livewire('recipe.like-count', ['recipe' => $recipe])</strong>
|
||||
</div>
|
||||
<div class="content__heading-stat icon-message-square">
|
||||
<strong>{{ $recipe->comments_count }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content__person">
|
||||
<div class="content__person-name">
|
||||
{{ $author['name'] }}
|
||||
</div>
|
||||
<div class="content__person-thumb">
|
||||
@empty($author->profile_photo_path)
|
||||
<img src="{{ $author->profile_photo_url }}" alt="thumb">
|
||||
@else
|
||||
<img src="/storage/{{ $author->profile_photo_path }}" alt="thumb">
|
||||
@endempty
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="recipe">
|
||||
<div class="recipe__container container-sm">
|
||||
<div class="recipe__content">
|
||||
<div class="recipe__header">
|
||||
<div class="recipe__image">
|
||||
<img src="/storage/{{ $recipe->image }}" class="cover-image" alt="recipe">
|
||||
</div>
|
||||
<div class="recipe__body">
|
||||
<div class="recipe__caption">
|
||||
<h1 class="recipe__title">
|
||||
{{ $recipe->title }}
|
||||
</h1>
|
||||
<button type="button" class="recipe__action icon-dotts"></button>
|
||||
</div>
|
||||
<div class="recipe__stats">
|
||||
<div class="recipe__stat icon-clock">{{ __('recipe.t' . $recipe->cooking_time . "m") }}</div>
|
||||
<div class="recipe__stat icon-foots">{{ $recipe->steps->count() }} этапов</div>
|
||||
</div>
|
||||
<p class="recipe__desc">{!! $recipe->description !!}</p>
|
||||
@if (strlen(trim($recipe->video_url)) > 4)
|
||||
<a target="_blank" rel="noopener noreferrer" href="{{ $recipe->video_url }}" class="recipe__link icon-youtube">Посмотреть рецепт на YouTube</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe__info">
|
||||
<div class="recipe__info-column">
|
||||
<div class="recipe__info-caption">
|
||||
ПРОДУКТЫ:
|
||||
</div>
|
||||
<ul class="recipe__info-list marked">
|
||||
@foreach($recipe->ingredients as $ingredient)
|
||||
@php
|
||||
$localizedUnit = (isset($ingredient['unit']) && mb_strlen($ingredient['unit']) > 1)
|
||||
? $ingredient['unit']
|
||||
: 'gr';
|
||||
@endphp
|
||||
@if(mb_strlen($ingredient['name']) > 1)
|
||||
<li>{{ $ingredient['name'] }} - {{ $ingredient['portion'] }} {{ __('recipe.' . $localizedUnit ) }}</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
<div class="recipe__info-column">
|
||||
<div class="recipe__info-caption">
|
||||
ЦЕННОСТЬ:
|
||||
</div>
|
||||
<ul class="recipe__info-list">
|
||||
<li>WIP</li>
|
||||
{{--
|
||||
<li>Калории: 139.9 ккал</li>
|
||||
<li>Белки: 20.4 гр</li>
|
||||
<li>Жиры: 5.7 гр</li>
|
||||
<li>Углеводы: 1.8 гр</li>
|
||||
--}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="recipe__info-column">
|
||||
<div class="recipe__info-caption">
|
||||
ЦЕННОСТЬ:
|
||||
</div>
|
||||
<div class="recipe__info-tags">
|
||||
@foreach($recipe->tags->unique() as $curTag)
|
||||
<a href="{{ $curTag->recipe_index_url }}" class="recipe__info-tag">{{ $curTag->name }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe__footer">
|
||||
<a href="#commentsList" class="recipe__footer-action icon-message-square">
|
||||
<span>Комментировать</span>
|
||||
</a>
|
||||
@livewire('recipe.like', ['recipe' => $recipe])
|
||||
{{--<button class="recipe__footer-action icon-heart">
|
||||
<span>Нравится</span>
|
||||
</button>--}}
|
||||
<button class="recipe__footer-action icon-share">
|
||||
<span>Поделится</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="steps">
|
||||
<div class="steps__container container-sm">
|
||||
<h2 class="steps__title title">
|
||||
ПОШАГОВЫЙ ФОТО РЕЦЕПТ - КУРИНЫЕ РУЛЕТИКИ С СЫРОМ
|
||||
</h2>
|
||||
<ol class="steps__list">
|
||||
@foreach($recipe->steps as $step)
|
||||
|
||||
<li class="steps__item">
|
||||
<div class="steps__item-image">
|
||||
@if(isset($step['image']) && is_string($step['image']) && strlen($step["image"]) > 4)
|
||||
<img src="/storage/{{ $step['image'] }}" class="cover-image" alt="step">
|
||||
@endif
|
||||
</div>
|
||||
<div class="steps__item-text">
|
||||
<small>
|
||||
{!! $step['description'] !!}
|
||||
</small>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
{{--<li class="steps__item">
|
||||
<div class="steps__item-image">
|
||||
<img src="img/price_step_1.jpg" class="cover-image" alt="step">
|
||||
</div>
|
||||
<div class="steps__item-text">
|
||||
Режем куриную грудку тонкими ломтиками.
|
||||
</div>
|
||||
</li>
|
||||
<li class="steps__item">
|
||||
<div class="steps__item-image">
|
||||
<img src="img/price_step_2.jpg" class="cover-image" alt="step">
|
||||
</div>
|
||||
<div class="steps__item-text">
|
||||
<p>
|
||||
На край каждого кусочка филе кладем 1 ст. л. тертого сыра и порезанную зелень.
|
||||
</p>
|
||||
<p>
|
||||
Формируем рулетик из куриного филе с сыром и зеленью, подворачивая с боков, чтобы сыр при приготовлении не вытек. Скрепляем края половинками зубочисток.
|
||||
</p>
|
||||
</div>
|
||||
</li> --}}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
<section class="reviews">
|
||||
<div class="reviews__container container-sm">
|
||||
<h2 class="reviews__title title">
|
||||
Отзывы
|
||||
</h2>
|
||||
<div class="reviews__tabs tabs">
|
||||
<div class="tablist" role="tablist" aria-labelledby="label">
|
||||
<button class="tab" role="tab" type="button" id="tab-1" aria-selected="true" aria-controls="tabpanel-1">Положительные 2</button>
|
||||
<button class="tab" role="tab" type="button" id="tab-2" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">Негативные 1</button>
|
||||
</div>
|
||||
<div class="tabpanel" role="tabpanel" id="tabpanel-1" tabindex="0" aria-labelledby="tab-1">
|
||||
<div class="reviews__items">
|
||||
<div class="review">
|
||||
<div class="review__thumb">
|
||||
<img src="img/user.png" class="cover-image" alt="user">
|
||||
</div>
|
||||
<div class="review__content">
|
||||
<div class="review__name">
|
||||
Артём
|
||||
</div>
|
||||
<blockquote class="review__quote">
|
||||
После данного плана питания стал чувствовать себя куда лучше! Обязательно продолжу работать с Дмитрием!
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="review__info">
|
||||
<div class="review__programm">
|
||||
Лёгкий
|
||||
</div>
|
||||
<div class="review__rate icon-star">
|
||||
5.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="review__thumb">
|
||||
<img src="img/user.png" class="cover-image" alt="user">
|
||||
</div>
|
||||
<div class="review__content">
|
||||
<div class="review__name">
|
||||
Артём
|
||||
</div>
|
||||
<blockquote class="review__quote">
|
||||
После данного плана питания стал чувствовать себя куда лучше! Обязательно продолжу работать с Дмитрием!
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="review__info">
|
||||
<div class="review__programm">
|
||||
Лёгкий
|
||||
</div>
|
||||
<div class="review__rate icon-star">
|
||||
5.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabpanel" role="tabpanel" id="tabpanel-2" tabindex="0" aria-labelledby="tab-2">
|
||||
<div class="reviews__items">
|
||||
<div class="review">
|
||||
<div class="review__thumb">
|
||||
<img src="img/user.png" class="cover-image" alt="user">
|
||||
</div>
|
||||
<div class="review__content">
|
||||
<div class="review__name">
|
||||
Артём
|
||||
</div>
|
||||
<blockquote class="review__quote">
|
||||
Курить план – это плохо! Гласит лозунг и кричит Минздрав. Ну, конечно …Ничем не хуже водки, а водку везде продают и ничего.. ... Говорят, некоторые годами курят план и живут нормальной жизнью…Ну, если они считают это нормальной жизнью, то пусть и дальше существуют…Я не хочу…Я теперь спрашиваю себя – а зачем мне жить, что б просто курить траву?..Теперь мне плохо и траву курить, Проклятый мир! Даже год не покурил… Мне нужно что-то получше.. почище….ярче!!!
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="review__info">
|
||||
<div class="review__programm">
|
||||
Лёгкий
|
||||
</div>
|
||||
<div class="review__rate icon-star">
|
||||
5.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form action="" class="reviews__form">
|
||||
<textarea class="textarea textarea-white" placeholder="Введите отзыв"></textarea>
|
||||
<div class="reviews__form-column">
|
||||
<div class="reviews__form-rate star-rating">
|
||||
<input type="radio" name="rate" id="rate-5" value="5" class="star-rating__input hidden" hidden>
|
||||
<label class="star-rating__label" for="rate-5"></label>
|
||||
<input type="radio" name="rate" id="rate-4" value="4" class="star-rating__input hidden" hidden>
|
||||
<label class="star-rating__label" for="rate-4"></label>
|
||||
<input type="radio" name="rate" id="rate-3" value="3" class="star-rating__input hidden" hidden>
|
||||
<label class="star-rating__label" for="rate-3"></label>
|
||||
<input type="radio" name="rate" id="rate-2" value="2" class="star-rating__input hidden" hidden>
|
||||
<label class="star-rating__label" for="rate-2"></label>
|
||||
<input type="radio" name="rate" id="rate-1" value="1" class="star-rating__input hidden" hidden>
|
||||
<label class="star-rating__label" for="rate-1"></label>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary">Оставить отзыв</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</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('recipe.index') }}" class="d-flex w-2/5 align-items-center --f_bold">
|
||||
|
||||
Reference in New Issue
Block a user