RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust recipe show page styles

This commit is contained in:
Christopher C. Wells 2021-03-08 08:35:00 -08:00 committed by Christopher Charbonneau Wells
parent 7b0abbc5af
commit 04631d2106
1 changed files with 73 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
resources/views/recipes/show.blade.php
View File

@ -18,27 +18,27 @@
</a> </a>
</h1> </h1>
</x-slot> </x-slot>
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row"> <div class="flex flex-col justify-between pb-4 md:flex-row md:space-x-4">
<div x-data="{showNutrientsSummary: false}"> <div x-data="{showNutrientsSummary: false}">
@if($recipe->description) @if($recipe->time_total > 0)
<section class="mb-2 prose prose-lg md:prose-xl"> <section class="flex justify-between mb-2 p-2 bg-gray-100 rounded">
{!! $recipe->description !!} <div>
<h1 class="mb-1 font-bold">Prep time</h1>
<p class="text-gray-800 text-sm">{{ $recipe->time_prep }} minutes</p>
</div>
<div>
<h1 class="mb-1 font-bold">Active time</h1>
<p class="text-gray-800 text-sm">{{ $recipe->time_active }} minutes</p>
</div>
<div>
<h1 class="mb-1 font-bold">Total time</h1>
<p class="text-gray-800 text-sm">{{ $recipe->time_total }} minutes</p>
</div>
</section> </section>
@endif @endif
@if($recipe->time_total > 0) @if($recipe->description)
<section class="flex space-x-4"> <section class="mb-2 prose prose-lg">
<div> {!! $recipe->description !!}
<h1 class="mb-2 font-bold text-lg">Prep time</h1>
<p class="mb-2 text-gray-800">{{ $recipe->time_prep }} minutes</p>
</div>
<div>
<h1 class="mb-2 font-bold text-lg">Active time</h1>
<p class="mb-2 text-gray-800">{{ $recipe->time_active }} minutes</p>
</div>
<div>
<h1 class="mb-2 font-bold text-lg">Total time</h1>
<p class="mb-2 text-gray-800">{{ $recipe->time_total }} minutes</p>
</div>
</section> </section>
@endif @endif
<section x-data="{showNutrientsSummary: false}"> <section x-data="{showNutrientsSummary: false}">
@ -47,9 +47,11 @@
<span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer" <span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
x-on:click="showNutrientsSummary = !showNutrientsSummary">[toggle nutrients]</span> x-on:click="showNutrientsSummary = !showNutrientsSummary">[toggle nutrients]</span>
</h1> </h1>
<div class="prose prose-lg">
<ul class="space-y-2"> <ul class="space-y-2">
@foreach($recipe->ingredientAmounts as $ia) @foreach($recipe->ingredientAmounts as $ia)
<li> <li>
<span>
{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }} {{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}
@if($ia->unitFormatted){{ $ia->unitFormatted }}@endif @if($ia->unitFormatted){{ $ia->unitFormatted }}@endif
@if($ia->ingredient->type === \App\Models\Recipe::class) @if($ia->ingredient->type === \App\Models\Recipe::class)
@ -62,13 +64,25 @@
@endif @endif
@if($ia->detail)<span class="text-gray-500">{{ $ia->detail }}</span>@endif @if($ia->detail)<span class="text-gray-500">{{ $ia->detail }}</span>@endif
<div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div> <div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
</span>
</li> </li>
@endforeach @endforeach
</ul> </ul>
</div>
</section>
<section>
<h1 class="mb-2 font-bold text-2xl">Steps</h1>
<div class="prose prose-lg">
<ol>
@foreach($recipe->steps as $step)
<li>{{ $step->step }}</li>
@endforeach
</ol>
</div>
</section> </section>
</div> </div>
<aside> <aside class="flex flex-col space-y-4 md:w-1/2 lg:w-1/3">
<div class="p-1 border-2 border-black font-sans sm:ml-4 md:w-72"> <div class="p-1 border-2 border-black font-sans w-72">
<div class="text-3xl font-extrabold leading-none">Nutrition Facts</div> <div class="text-3xl font-extrabold leading-none">Nutrition Facts</div>
<div class="leading-snug">{{ $recipe->servings }} {{ \Illuminate\Support\Str::plural('serving', $recipe->servings ) }}</div> <div class="leading-snug">{{ $recipe->servings }} {{ \Illuminate\Support\Str::plural('serving', $recipe->servings ) }}</div>
@if($recipe->serving_weight) @if($recipe->serving_weight)
@ -110,32 +124,27 @@
</div> </div>
</div> </div>
</div> </div>
</aside>
</div>
<section>
<h1 class="mb-2 font-bold text-2xl">Steps</h1>
<div class="prose prose-xl md:prose-2xl">
<ol>
@foreach($recipe->steps as $step)
<li>{{ $step->step }}</li>
@endforeach
</ol>
</div>
</section>
@if($recipe->source) @if($recipe->source)
<footer class="mb-2 text-gray-500 text-sm"> <section>
<h1 class="font-extrabold inline">Source:</h1> <h1 class="mb-2 font-bold text-2xl">Source</h1>
@if(filter_var($recipe->source, FILTER_VALIDATE_URL)) @if(filter_var($recipe->source, FILTER_VALIDATE_URL))
<a href="{{ $recipe->source }}">{{ $recipe->source }}</a> <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
href="{{ $recipe->source }}">{{ $recipe->source }}</a>
@else @else
{{ $recipe->source }} {{ $recipe->source }}
@endif @endif
</footer>
@endif
@if(!$recipe->tags->isEmpty())
<section class="mb-2 text-gray-500 text-sm">
<h1 class="font-extrabold inline">Tags:</h1>
{{ implode(', ', $recipe->tags->pluck('name')->all()) }}
</section> </section>
@endif @endif
@if(!$recipe->tags->isEmpty())
<section>
<h1 class="mb-2 font-bold text-2xl">Tags</h1>
<div class="flex flex-wrap">
@foreach($recipe->tags as $tag)
<span class="m-1 bg-gray-200 rounded-full px-2 leading-loose cursor-default">{{ $tag->name }}</span>
@endforeach
</div>
</section>
@endif
</aside>
</div>
</x-app-layout> </x-app-layout>