mirror of https://github.com/kcal-app/kcal.git
Moved repeated container components to app layout
This commit is contained in:
Christopher C. Wells
parent
580b16a634
commit
5bc2684ca7
|
|
@ -4,12 +4,7 @@
|
|||
Delete {{ $food->name }}?
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ route('foods.destroy', $food) }}">
|
||||
<form method="POST" action="{{ route('foods.destroy', $food) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="pb-3">
|
||||
|
|
@ -51,8 +46,4 @@
|
|||
<a class="ml-3 text-gray-500 hover:text-gray-700" href="{{ route('foods.show', $food) }}">
|
||||
No, do not delete</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,7 @@
|
|||
{{ ($food->exists ? "Edit {$food->name}" : 'Add Food') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ ($food->exists ? route('foods.update', $food) : route('foods.store')) }}">
|
||||
<form method="POST" action="{{ ($food->exists ? route('foods.update', $food) : route('foods.store')) }}">
|
||||
@if ($food->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4">
|
||||
|
|
@ -154,8 +149,4 @@
|
|||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
|
||||
<x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
|
||||
<x-slot name="results">
|
||||
<template x-for="food in results" :key="food">
|
||||
<div class="p-1 border-2 border-black font-sans">
|
||||
|
|
@ -70,8 +65,4 @@
|
|||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,7 @@
|
|||
</a>
|
||||
</h2>
|
||||
</x-slot>
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<div class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<div class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<div class="p-1 mb-2 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">
|
||||
|
|
@ -103,9 +99,5 @@
|
|||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,7 @@
|
|||
Delete {{ $goal->goal }} goal?
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ route('goals.destroy', $goal) }}">
|
||||
<form method="POST" action="{{ route('goals.destroy', $goal) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="text-lg pb-3">
|
||||
|
|
@ -21,8 +16,4 @@
|
|||
<a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('goals.show', $goal) }}">No, do not delete</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,7 @@
|
|||
{{ ($goal->exists ? 'Edit' : 'Add') }} Goal
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ ($goal->exists ? route('goals.update', $goal) : route('goals.store')) }}">
|
||||
<form method="POST" action="{{ ($goal->exists ? route('goals.update', $goal) : route('goals.store')) }}">
|
||||
@if ($goal->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4">
|
||||
|
|
@ -72,8 +67,4 @@
|
|||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -31,12 +31,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-4">
|
||||
@forelse($goals['present'] as $goal)
|
||||
<div class="flex space-x-2 items-center">
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
|
||||
|
|
@ -58,8 +53,4 @@
|
|||
<div>No goals set.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -17,24 +17,16 @@
|
|||
</a>
|
||||
</h2>
|
||||
</x-slot>
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<div class="grid grid-cols-2 gap-y-1 gap-x-3 max-w-md inline-grid">
|
||||
<div class="font-bold">From</div>
|
||||
<div>{{ $goal->from?->toDateString() ?? 'Any' }}</div>
|
||||
<div class="font-bold">To</div>
|
||||
<div>{{ $goal->to?->toDateString() ?? 'Any' }}</div>
|
||||
<div class="font-bold">Frequency</div>
|
||||
<div>{{ \Illuminate\Support\Str::ucfirst($frequencyOptions[$goal->frequency]['label']) }}</div>
|
||||
<div class="font-bold">Trackable</div>
|
||||
<div>{{ \Illuminate\Support\Str::ucfirst($nameOptions[$goal->name]['label']) }}</div>
|
||||
<div class="font-bold">Goal</div>
|
||||
<div>{{ $goal->goal }}{{ $nameOptions[$goal->name]['unit'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-1 gap-x-3 max-w-md inline-grid">
|
||||
<div class="font-bold">From</div>
|
||||
<div>{{ $goal->from?->toDateString() ?? 'Any' }}</div>
|
||||
<div class="font-bold">To</div>
|
||||
<div>{{ $goal->to?->toDateString() ?? 'Any' }}</div>
|
||||
<div class="font-bold">Frequency</div>
|
||||
<div>{{ \Illuminate\Support\Str::ucfirst($frequencyOptions[$goal->frequency]['label']) }}</div>
|
||||
<div class="font-bold">Trackable</div>
|
||||
<div>{{ \Illuminate\Support\Str::ucfirst($nameOptions[$goal->name]['label']) }}</div>
|
||||
<div class="font-bold">Goal</div>
|
||||
<div>{{ $goal->goal }}{{ $nameOptions[$goal->name]['unit'] }}</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ route('journal-entries.store.from-nutrients') }}">
|
||||
<form method="POST" action="{{ route('journal-entries.store.from-nutrients') }}">
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full mb-4">
|
||||
<!-- Date -->
|
||||
|
|
@ -72,8 +67,4 @@
|
|||
<x-inputs.button class="ml-3">Add Entry</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ route('journal-entries.store') }}">
|
||||
<form method="POST" action="{{ route('journal-entries.store') }}">
|
||||
@csrf
|
||||
<div x-data x-init="initJournalEntries($el);" class="space-y-4">
|
||||
@foreach($ingredients as $ingredient)
|
||||
|
|
@ -34,11 +29,7 @@
|
|||
<x-inputs.button x-on:click="removeTemplate($el);">Add entries</x-inputs.button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
|
|
|
|||
|
|
@ -4,12 +4,7 @@
|
|||
Delete {{ $entry->summary }}?
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ route('journal-entries.destroy', $entry) }}">
|
||||
<form method="POST" action="{{ route('journal-entries.destroy', $entry) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="text-lg">Are you sure what to delete this journal entry?</div>
|
||||
|
|
@ -33,8 +28,4 @@
|
|||
<a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('journal-entries.index') }}">No, do not delete</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -31,12 +31,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<div class="flex align-top flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<div class="flex align-top flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<div class="w-full sm:w-5/12 lg:w-4/12">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<h3 class="font-semibold text-lg text-gray-800">{{ $date->format('D, j M Y') }}</h3>
|
||||
|
|
@ -161,8 +156,4 @@
|
|||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,16 @@
|
|||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
{{ $slot }}
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,43 +4,34 @@
|
|||
Delete {{ $recipe->name }}?
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ route('recipes.destroy', $recipe) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="pb-3">
|
||||
<div class="text-lg">Are you sure what to delete <span class="font-extrabold">{{ $recipe->name }}</span>?</div>
|
||||
<div class="flex flex-col space-y-2 mt-2 text-lg">
|
||||
@if(!$recipe->ingredientAmountRelationships->isEmpty())
|
||||
<div class="flex space-x-2 items-center text-lg">
|
||||
<div class="text-yellow-500">
|
||||
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>Deleting this recipe will also remove it from the following recipes:</div>
|
||||
</div>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($recipe->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
href="{{ route('recipes.show', $ia->parent) }}">{{ $ia->parent->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
<form method="POST" action="{{ route('recipes.destroy', $recipe) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="pb-3">
|
||||
<div class="text-lg">Are you sure what to delete <span class="font-extrabold">{{ $recipe->name }}</span>?</div>
|
||||
<div class="flex flex-col space-y-2 mt-2 text-lg">
|
||||
@if(!$recipe->ingredientAmountRelationships->isEmpty())
|
||||
<div class="flex space-x-2 items-center text-lg">
|
||||
<div class="text-yellow-500">
|
||||
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700" href="{{ route('recipes.show', $recipe) }}">
|
||||
No, do not delete</a>
|
||||
</form>
|
||||
</div>
|
||||
<div>Deleting this recipe will also remove it from the following recipes:</div>
|
||||
</div>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($recipe->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
href="{{ route('recipes.show', $ia->parent) }}">{{ $ia->parent->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700" href="{{ route('recipes.show', $recipe) }}">
|
||||
No, do not delete</a>
|
||||
</form>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,7 @@
|
|||
{{ ($recipe->exists ? "Edit {$recipe->name}" : 'Add Recipe') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<form method="POST" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
|
||||
<form method="POST" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
|
||||
@if ($recipe->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
|
|
@ -111,11 +106,7 @@
|
|||
{{ ($recipe->exists ? 'Save' : 'Add') }}
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
|
|
|
|||
|
|
@ -10,12 +10,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
|
||||
<x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
|
||||
<x-slot name="results">
|
||||
<template x-for="recipe in results" :key="recipe">
|
||||
<div class="p-1 border-2 border-black font-sans">
|
||||
|
|
@ -65,9 +60,5 @@
|
|||
</div>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-search-view>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -17,114 +17,106 @@
|
|||
</a>
|
||||
</h2>
|
||||
</x-slot>
|
||||
<div class="py-6">
|
||||
<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">
|
||||
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
|
||||
<div x-data="{showNutrientsSummary: false}">
|
||||
@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
|
||||
<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>
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
@foreach($recipe->ingredientAmounts as $ia)
|
||||
<div>
|
||||
<div class="flex flex-row space-x-2">
|
||||
<div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div>
|
||||
@if($ia->unitFormatted)<div>{{ $ia->unitFormatted }}</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>
|
||||
<div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@if($recipe->serving_weight)
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div>Serving weight</div>
|
||||
<div>{{ $recipe->serving_weight }}g</div>
|
||||
</div>
|
||||
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
|
||||
<div x-data="{showNutrientsSummary: false}">
|
||||
@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
|
||||
<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>
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
@foreach($recipe->ingredientAmounts as $ia)
|
||||
<div>
|
||||
<div class="flex flex-row space-x-2">
|
||||
<div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div>
|
||||
@if($ia->unitFormatted)<div>{{ $ia->unitFormatted }}</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 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() }}mg</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div>{{ $recipe->sodiumPerServing() }}mg</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>
|
||||
@if($ia->detail)<div class="text-gray-500">{{ $ia->detail }}</div>@endif
|
||||
</div>
|
||||
<div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-1 border-2 border-black font-sans sm:ml-4 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>
|
||||
@if($recipe->serving_weight)
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div>Serving weight</div>
|
||||
<div>{{ $recipe->serving_weight }}g</div>
|
||||
</div>
|
||||
@endif
|
||||
<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() }}mg</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div>{{ $recipe->sodiumPerServing() }}mg</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>
|
||||
<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>
|
||||
@if(filter_var($recipe->source, FILTER_VALIDATE_URL))
|
||||
<a href="{{ $recipe->source }}">{{ $recipe->source }}</a>
|
||||
@else
|
||||
{{ $recipe->source }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@if(filter_var($recipe->source, FILTER_VALIDATE_URL))
|
||||
<a href="{{ $recipe->source }}">{{ $recipe->source }}</a>
|
||||
@else
|
||||
{{ $recipe->source }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</x-app-layout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue