From 7f3ed5b70400e7ae88efda7650f8e22aa325da31 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Thu, 28 Jan 2021 15:00:07 -0800
Subject: [PATCH] Update nutrition label styling

---
 .../views/components/search-view.blade.php    |  2 +-
 resources/views/foods/index.blade.php         | 70 ++++++++++++-------
 resources/views/foods/show.blade.php          | 51 +++++++++++++-
 resources/views/recipes/index.blade.php       | 58 +++++++++------
 resources/views/recipes/show.blade.php        | 52 +++++++++-----
 5 files changed, 168 insertions(+), 65 deletions(-)

diff --git a/resources/views/components/search-view.blade.php b/resources/views/components/search-view.blade.php
index dbcc729..e6aaa53 100644
--- a/resources/views/components/search-view.blade.php
+++ b/resources/views/components/search-view.blade.php
@@ -5,7 +5,7 @@
                     autocomplete="off"
                     class="w-full mb-4"
                     @input.debounce.400ms="search($event)" />
-    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
         {{ $results }}
     </div>
     <x-inputs.button
diff --git a/resources/views/foods/index.blade.php b/resources/views/foods/index.blade.php
index 9b4dd80..3fbec0a 100644
--- a/resources/views/foods/index.blade.php
+++ b/resources/views/foods/index.blade.php
@@ -18,35 +18,53 @@
                     <x-search-view :route="route('api:v1:foods.index')">
                         <x-slot name="results">
                             <template x-for="food in results" :key="food">
-                                <div class="p-2 font-light rounded-t border-2 border-gray-400">
-                                    <div class="flex justify-between items-baseline">
-                                        <div class="text-2xl">
-                                            <a x-bind:href="food.showUrl"
-                                               class="text-gray-600 hover:text-gray-800">
-                                                <span x-text="food.name"></span><span class="text-gray-500" x-text="`, ${food.detail}`" x-show="food.detail"></span>
-                                            </a>
+                                <div class="p-1 border-2 border-black font-sans">
+                                    <div class="text-2xl lowercase font-extrabold leading-none">
+                                        <a x-bind:href="food.showUrl"
+                                           class="hover:text-gray-600">
+                                            <span x-text="food.name"></span><span class="text-gray-500" x-text="`, ${food.detail}`" x-show="food.detail"></span>
+                                        </a>
+                                    </div>
+                                    <div class="lowercase text-lg text-gray-600" x-text="food.brand" x-show="food.brand"></div>
+                                    <div class="flex justify-between font-bold border-b-8 border-black">
+                                        <div>Serving size</div>
+                                        <div>
+                                            <span x-text="food.servingSizeFormatted"></span>
+                                            <span x-text="food.servingUnit ?? 'unit'"></span>
+                                            <span x-text="`(${food.servingWeight}g)`"></span>
                                         </div>
                                     </div>
-                                    <div class="text-xl text-gray-600" x-text="food.brand" x-show="food.brand"></div>
-                                    <div class="font-bold">
-                                        Serving size <span x-text="food.servingSizeFormatted"></span>
-                                        <span x-text="food.servingUnit"></span>
-                                        <span x-text="`(${food.servingWeight}g)`"></span>
+                                    <div class="font-bold text-right">Amount per serving</div>
+                                    <div class="flex justify-between items-end font-extrabold">
+                                        <div class="text-xl">Calories</div>
+                                        <div class="text-xl" x-text="food.calories"></div>
                                     </div>
-                                    <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2">
-                                        <div class="col-span-2 text-xs font-bold 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" x-text="`${food.calories}g`"></div>
-                                        <div class="font-bold border-b border-gray-300">Fat</div>
-                                        <div class="text-right border-b border-gray-300" x-text="`${food.fat}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(food.cholesterol*1000)}mg`"></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(food.sodium*1000)}mg`">{</div>
-                                        <div class="font-bold border-b border-gray-300">Carbohydrates</div>
-                                        <div class="text-right border-b border-gray-300" x-text="`${food.carbohydrates}g`"></div>
-                                        <div class="font-bold">Protein</div>
-                                        <div class="text-right" x-text="`${food.protein}g`"></div>
+                                    <div class="border-t-4 border-black text-sm">
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Total Fat</div>
+                                            <div x-text="`${food.fat}g`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Cholesterol</div>
+                                            <div x-text="`${Math.round(food.cholesterol*1000)}mg`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Sodium</div>
+                                            <div x-text="`${Math.round(food.sodium*1000)}mg`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Total Carbohydrate</div>
+                                            <div x-text="`${food.carbohydrates}g`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Protein</div>
+                                            <div x-text="`${food.protein}g`"></div>
+                                        </div>
                                     </div>
                                 </div>
                             </template>
diff --git a/resources/views/foods/show.blade.php b/resources/views/foods/show.blade.php
index 7405e33..98a6f76 100644
--- a/resources/views/foods/show.blade.php
+++ b/resources/views/foods/show.blade.php
@@ -21,7 +21,56 @@
         <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">
-                    TODO! Show stats, tags, attached recipes, etc.
+                    <!-- TODO: tags, recipes, etc. -->
+                    <h3 class="text-2xl font-extrabold">
+                        {{ $food->name }}@if($food->detail), <span class="text-2xl font-extrabold">{{ $food->detail }}</span>@endif
+                    </h3>
+                    @if($food->brand)
+                        <div class="text-2xl font-extrabold">{{ $food->brand }}</div>
+                    @endif
+                    <div class="p-1 border-2 border-black font-sans md:w-72">
+                        <div class="text-3xl font-extrabold leading-none">Nutrition Facts</div>
+                        <div class="flex justify-between font-bold border-b-8 border-black">
+                            <div>Serving size</div>
+                            <div>
+                                {{ $food->servingSizeFormatted }}
+                                {{ $food->serving_unit }}
+                                ({{ $food->serving_weight }}g)
+                            </div>
+                        </div>
+                        <div class="font-bold text-right">Amount per serving</div>
+                        <div class="flex justify-between items-end font-extrabold">
+                            <div class="text-3xl">Calories</div>
+                            <div class="text-4xl">{{ $food->calories }}</div>
+                        </div>
+                        <div class="border-t-4 border-black text-sm">
+                            <hr class="border-gray-500"/>
+                            <div class="flex justify-between">
+                                <div class="font-bold">Total Fat</div>
+                                <div>{{ $food->fat }}g</div>
+                            </div>
+                            <hr class="border-gray-500"/>
+                            <div class="flex justify-between">
+                                <div class="font-bold">Cholesterol</div>
+                                <div>{{ $food->cholesterol }}g</div>
+                            </div>
+                            <hr class="border-gray-500"/>
+                            <div class="flex justify-between">
+                                <div class="font-bold">Sodium</div>
+                                <div>{{ $food->sodium }}g</div>
+                            </div>
+                            <hr class="border-gray-500"/>
+                            <div class="flex justify-between">
+                                <div class="font-bold">Total Carbohydrate</div>
+                                <div>{{ $food->carbohydrates }}g</div>
+                            </div>
+                            <hr class="border-gray-500"/>
+                            <div class="flex justify-between">
+                                <div class="font-bold">Protein</div>
+                                <div>{{ $food->protein }}g</div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/resources/views/recipes/index.blade.php b/resources/views/recipes/index.blade.php
index 0276f00..1362c9a 100644
--- a/resources/views/recipes/index.blade.php
+++ b/resources/views/recipes/index.blade.php
@@ -18,27 +18,45 @@
                     <x-search-view :route="route('api:v1:recipes.index')">
                         <x-slot name="results">
                             <template x-for="recipe in results" :key="recipe">
-                                <div class="p-2 font-light rounded-lg border-2 border-gray-200">
-                                    <div class="pb-2 flex justify-between items-baseline">
-                                        <div class="text-2xl">
-                                            <a x-bind:href="recipe.showUrl"
-                                               class="text-gray-600 hover:text-gray-800" x-text="recipe.name"></a>
-                                        </div>
+                                <div class="p-1 border-2 border-black font-sans">
+                                    <div class="text-2xl font-extrabold">
+                                        <a x-bind:href="recipe.showUrl"
+                                           class="hover:text-gray-600" x-text="recipe.name"></a>
                                     </div>
-                                    <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-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" x-text="`${recipe.caloriesPerServing}g`"></div>
-                                        <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="`${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="`${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>
-                                        <div class="text-right" x-text="`${recipe.proteinPerServing}g`"></div>
+                                    <div class="flex justify-between font-bold border-b-8 border-black">
+                                        <div class="leading-snug" x-text="`${recipe.servings} servings`"></div>
+                                    </div>
+                                    <div class="font-bold text-right">Amount per serving</div>
+                                    <div class="flex justify-between items-end font-extrabold">
+                                        <div class="text-xl">Calories</div>
+                                        <div class="text-xl" x-text="`${recipe.caloriesPerServing}g`"></div>
+                                    </div>
+                                    <div class="border-t-4 border-black text-sm">
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Total Fat</div>
+                                            <div x-text="`${recipe.fatPerServing}g`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Cholesterol</div>
+                                            <div x-text="`${recipe.cholesterolPerServing}g`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Sodium</div>
+                                            <div x-text="`${recipe.sodiumPerServing}g`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Total Carbohydrate</div>
+                                            <div x-text="`${recipe.carbohydratesPerServing}g`"></div>
+                                        </div>
+                                        <hr class="border-gray-500"/>
+                                        <div class="flex justify-between">
+                                            <div class="font-bold">Protein</div>
+                                            <div x-text="`${recipe.proteinPerServing}g`"></div>
+                                        </div>
                                     </div>
                                 </div>
                             </template>
diff --git a/resources/views/recipes/show.blade.php b/resources/views/recipes/show.blade.php
index 8dc250b..8a8d24d 100644
--- a/resources/views/recipes/show.blade.php
+++ b/resources/views/recipes/show.blade.php
@@ -47,24 +47,42 @@
                             @endforeach
                         </div>
                         <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 class="p-1 border-2 border-black font-sans md:w-72">
+                                <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="font-bold text-right border-t-8 border-black">Amount per serving</div>
+                                <div class="flex justify-between items-end font-extrabold">
+                                    <div class="text-3xl">Calories</div>
+                                    <div class="text-4xl">{{ $recipe->caloriesPerServing() }}</div>
+                                </div>
+                                <div class="border-t-4 border-black text-sm">
+                                    <hr class="border-gray-500"/>
+                                    <div class="flex justify-between">
+                                        <div class="font-bold">Total Fat</div>
+                                        <div>{{ $recipe->fatPerServing() }}g</div>
+                                    </div>
+                                    <hr class="border-gray-500"/>
+                                    <div class="flex justify-between">
+                                        <div class="font-bold">Cholesterol</div>
+                                        <div>{{ $recipe->cholesterolPerServing() }}g</div>
+                                    </div>
+                                    <hr class="border-gray-500"/>
+                                    <div class="flex justify-between">
+                                        <div class="font-bold">Sodium</div>
+                                        <div>{{ $recipe->sodiumPerServing() }}g</div>
+                                    </div>
+                                    <hr class="border-gray-500"/>
+                                    <div class="flex justify-between">
+                                        <div class="font-bold">Total Carbohydrate</div>
+                                        <div>{{ $recipe->carbohydratesPerServing() }}g</div>
+                                    </div>
+                                    <hr class="border-gray-500"/>
+                                    <div class="flex justify-between">
+                                        <div class="font-bold">Protein</div>
+                                        <div>{{ $recipe->proteinPerServing() }}g</div>
+                                    </div>
+                                </div>
                             </div>
-                            <h3 class="mb-2 font-bold text-2xl">Servings</h3>
-                            <div class="ext-gray-800">{{ $recipe->servings }}</div>
                         </div>
                     </div>
                     <h3 class="mb-2 font-bold text-2xl">Steps</h3>