From ca55a0d6ec21485db21cc245f40068a8e07ee68c Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Wed, 27 Jan 2021 05:43:43 -0800
Subject: [PATCH] Add data to recipe view

---
 resources/views/recipes/index.blade.php |  4 +-
 resources/views/recipes/show.blade.php  | 86 ++++++++++++++++---------
 2 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/resources/views/recipes/index.blade.php b/resources/views/recipes/index.blade.php
index 441c0fc..44edcff 100644
--- a/resources/views/recipes/index.blade.php
+++ b/resources/views/recipes/index.blade.php
@@ -39,9 +39,9 @@
                                         <div class="font-bold border-b border-gray-300">Fat</div>
                                         <div class="text-right border-b border-gray-300" x-text="`${recipe.fatPerServing}g`"></div>
                                         <div class="font-bold border-b border-gray-300">Cholesterol</div>
-                                        <div class="text-right border-b border-gray-300" x-text="`${Math.round(recipe.cholesterolPerServing)}mg`"></div>
+                                        <div class="text-right border-b border-gray-300" x-text="`${recipe.cholesterolPerServing}g`"></div>
                                         <div class="font-bold border-b border-gray-300">Sodium</div>
-                                        <div class="text-right border-b border-gray-300" x-text="`${Math.round(recipe.sodiumPerServing)}mg`"></div>
+                                        <div class="text-right border-b border-gray-300" x-text="`${recipe.sodiumPerServing}g`"></div>
                                         <div class="font-bold border-b border-gray-300">Carbohydrates</div>
                                         <div class="text-right border-b border-gray-300" x-text="`${recipe.carbohydratesPerServing}g`"></div>
                                         <div class="font-bold">Protein</div>
diff --git a/resources/views/recipes/show.blade.php b/resources/views/recipes/show.blade.php
index a5a0bc0..8dc250b 100644
--- a/resources/views/recipes/show.blade.php
+++ b/resources/views/recipes/show.blade.php
@@ -15,45 +15,71 @@
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                 <div class="p-6 bg-white border-b border-gray-200">
-                    @if($recipe->tags)
-                        <div class="mb-2 text-gray-700 text-sm">
-                            <span class="font-extrabold">Tags:</span>
-                            {{ implode(', ', $recipe->tags->pluck('name')->all()) }}
+                    <div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
+                        <div>
+                            @if(!$recipe->tags->isEmpty())
+                                <div class="mb-2 text-gray-700 text-sm">
+                                    <span class="font-extrabold">Tags:</span>
+                                    {{ implode(', ', $recipe->tags->pluck('name')->all()) }}
+                                </div>
+                            @endif
+                            @if($recipe->description)
+                                <h3 class="mb-2 font-bold text-2xl">Description</h3>
+                                <div class="mb-2 text-gray-800">{{ $recipe->description }}</div>
+                            @endif
+                            <h3 class="mb-2 font-bold text-2xl">Ingredients</h3>
+                            @foreach($recipe->ingredientAmounts as $ia)
+                                <div class="flex flex-row space-x-2 mb-2">
+                                    <div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div>
+                                    @if($ia->unit)<div>{{ $ia->unit }}</div>@endif
+                                    <div>
+                                        @if($ia->ingredient->type === \App\Models\Recipe::class)
+                                            <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                                               href="{{ route('recipes.show', $ia->ingredient) }}">
+                                                {{ $ia->ingredient->name }}
+                                            </a>
+                                        @else
+                                            {{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif
+                                        @endif
+                                    </div>
+                                    @if($ia->detail)<div class="text-gray-500">{{ $ia->detail }}</div>@endif
+                                </div>
+                            @endforeach
                         </div>
-                    @endif
-                    @if($recipe->source)
-                        <div class="mb-2 text-gray-500 text-sm">
-                            <span class="font-extrabold">Source:</span>
-                            {{ $recipe->source }}
-                        </div>
-                    @endif
-                    <h3 class="mb-2 font-bold">Description</h3>
-                    <div class="mb-2 text-gray-800">{{ $recipe->description }}</div>
-                    <h3 class="mb-2 font-bold">Ingredients</h3>
-                    @foreach($recipe->ingredientAmounts as $ia)
-                        <div class="flex flex-row space-x-2 mb-2">
-                            <div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div>
-                            @if($ia->unit)<div>{{ $ia->unit }}</div>@endif
-                            <div>
-                                @if($ia->ingredient->type === \App\Models\Recipe::class)
-                                    <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                                       href="{{ route('recipes.show', $ia->ingredient) }}">
-                                        {{ $ia->ingredient->name }}
-                                    </a>
-                                @else
-                                    {{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif
-                                @endif
+                        <div>
+                            <h3 class="mb-2 font-bold text-2xl">Nutritional Facts</h3>
+                            <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2 mb-2">
+                                <div class="col-span-2 text-xs text-right">Amount per serving</div>
+                                <div class="font-extrabold text-lg border-b-4 border-black">Calories</div>
+                                <div class="font-extrabold text-right text-lg border-b-4 border-black">{{ $recipe->caloriesPerServing() }}</div>
+                                <div class="font-bold border-b border-gray-300">Fat</div>
+                                <div class="text-right border-b border-gray-300">{{ $recipe->fatPerServing() }}g</div>
+                                <div class="font-bold border-b border-gray-300">Cholesterol</div>
+                                <div class="text-right border-b border-gray-300">{{ $recipe->cholesterolPerServing() }}g</div>
+                                <div class="font-bold border-b border-gray-300">Sodium</div>
+                                <div class="text-right border-b border-gray-300">{{ $recipe->sodiumPerServing() }}g</div>
+                                <div class="font-bold border-b border-gray-300">Carbohydrates</div>
+                                <div class="text-right border-b border-gray-300">{{ $recipe->carbohydratesPerServing() }}g</div>
+                                <div class="font-bold">Protein</div>
+                                <div class="text-right">{{ $recipe->proteinPerServing() }}g</div>
                             </div>
-                            @if($ia->detail)<div class="text-gray-500">{{ $ia->detail }}</div>@endif
+                            <h3 class="mb-2 font-bold text-2xl">Servings</h3>
+                            <div class="ext-gray-800">{{ $recipe->servings }}</div>
                         </div>
-                    @endforeach
-                    <h3 class="mb-2 font-bold">Steps</h3>
+                    </div>
+                    <h3 class="mb-2 font-bold text-2xl">Steps</h3>
                     @foreach($recipe->steps as $step)
                         <div class="flex flex-row space-x-4 mb-4">
                             <div class="text-3xl text-gray-400 text-center">{{ $step->number }}</div>
                             <div class="text-2xl">{{ $step->step }}</div>
                         </div>
                     @endforeach
+                    @if($recipe->source)
+                        <div class="mb-2 text-gray-500 text-sm">
+                            <span class="font-extrabold">Source:</span>
+                            {{ $recipe->source }}
+                        </div>
+                    @endif
                 </div>
             </div>
         </div>