forked from eatvio/eatvio-infra
103 lines
5.9 KiB
PHP
103 lines
5.9 KiB
PHP
<section class="py-5" id="main">
|
|
<div class="container d-block d-sm-flex justify-content-between align-items-end align-items-lg-center mb-4 p-0 --mw-1000" wire:key="search">
|
|
<div class="d-block d-lg-flex align-items-center col-12 col-sm-9 me-lg-2 mb-1 mb-sm-0 p-0 pe-sm-2">
|
|
<div class="h4 me-md-3 mb-3 mb-lg-0 --f_grey text-uppercase">Популярные блюда</div>
|
|
<div class="d-flex align-items-center -search flex-grow-1">
|
|
<span class="btn --search_icon">
|
|
<svg width="20" height="20">
|
|
<use xlink:href="#SearchIcon"></use>
|
|
</svg>
|
|
</span>
|
|
<input class="form-control" name="search" wire:model.live.debounce.500ms="search" type="search" placeholder="Поиск рецепта" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm px-0 flex-grow-1">
|
|
<button type="submit" class="btn btn-lg btn-primary btn-block w-100 ps-4 pe-sm-4 --f_bold text-uppercase --no_wrap --radius">Найти рецепт</button>
|
|
</div>
|
|
</div>
|
|
<div id="recordsList" class="container p-0 --mw-1000" wire:key="recipe-result">
|
|
<div class="row justify-content-between flex-lg-nowrap">
|
|
<div class="col-12 col-lg-9 me-lg-2 mb-4 mb-lg-0 p-0 pe-lg-2" >
|
|
<div class="row gx-3">
|
|
@foreach($recipes as $recipe)
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h-100 --bg_white --shadow --radius --no_wrap overflow-hidden">
|
|
<div class="post_img position-relative">
|
|
<a href="{{ route("recipe.show", $recipe) }}"><img src="{{ Storage::url($recipe->image) }}" class="w-100" /></a>
|
|
@if(Str::length($recipe->video_url) > 1)
|
|
<a href="{{ $recipe->video_url }}">
|
|
<div class="post_v_l --top_r --round_icon">
|
|
<svg width="18" height="14">
|
|
<use xlink:href="#YouTubeIcon"></use>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
<div class="mt-2 px-3 py-2">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center --f_bold">
|
|
<svg width="22" height="22" class="me-1">
|
|
<use xlink:href="#KdjIcon"></use>
|
|
</svg>
|
|
139.9 ккал
|
|
</div>
|
|
<div class="d-flex align-items-center --f_bold">
|
|
<svg width="22" height="22" class="me-1">
|
|
<use xlink:href="#TimeBlack"></use>
|
|
</svg>
|
|
{{ $recipe->cooking_time }}
|
|
</div>
|
|
<div class="d-flex align-items-center --f_bold">
|
|
<svg width="22" height="26" class="me-1">
|
|
<use xlink:href="#Footprints"></use>
|
|
</svg>
|
|
{{ $recipe->steps->count() }} этапов
|
|
</div>
|
|
</div>
|
|
<div class="mb-2 f-4_5 --f_bold --no_wrap_normal">{{ $recipe->title }}</div>
|
|
<small class="d-block --no_wrap_normal">{!! $recipe->description !!}</small>
|
|
<div class="mt-1 text-center --pointer">
|
|
<svg width="14" height="8" class="--sblue">
|
|
<use xlink:href="#ArrBottomBlue"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
{{ $recipes->links() }}
|
|
</div>
|
|
@php
|
|
$colorClasses = [
|
|
'btn-primary',
|
|
'btn-green',
|
|
'btn-yellow',
|
|
'btn-red',
|
|
'btn-rose',
|
|
'btn-seaweed',
|
|
'btn-purple'
|
|
];
|
|
|
|
$colorsMaxIndex = count($colorClasses) - 1;
|
|
$i = 0;
|
|
@endphp
|
|
<div class="col-12 col-lg px-0 flex-grow-1 text-lg-end">
|
|
@if(!is_null($rawTypes))
|
|
@foreach($rawTypes as $keyType => $type)
|
|
<div class="--tags mb-3">
|
|
<div class="mb-2 --f_bold"> {{ __('recipe.' . $keyType) }} </div>
|
|
@foreach($type as $tagName => $tagsCount)
|
|
<a href="?tag={{ $tagName }}" data-idx="{{ $i . ":" . $colorsMaxIndex }}" style="font-weight: {{$tagsCount * 200}};" class="btn {{ $colorClasses[$i] }} btn-sm border-0 --radius">{{ Str::of($tagName)->split('/-/')[1] }} <sup>{{ $tagsCount }}</sup></a>
|
|
@php $i = ($colorsMaxIndex > $i) ? $i+1 : 0; @endphp
|
|
@endforeach
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|