mirror of https://github.com/kcal-app/kcal.git
Further improve HTML semantics
This commit is contained in:
Christopher C. Wells
parent
3524836878
commit
f643baf8ff
|
|
@ -1,9 +1,9 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete {{ $food->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $food->name }}?
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('foods.destroy', $food) }}">
|
||||
@method('delete')
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $title = ($food->exists ? "Edit {$food->name}" : 'Add Food') }}
|
||||
<x-slot name="title">{{ $title }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ ($food->exists ? route('foods.update', $food) : route('foods.store')) }}">
|
||||
@if ($food->exists)@method('put')@endif
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<x-slot name="title">Foods</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-2xl text-gray-800 leading-tight">Foods</h2>
|
||||
<h1 class="font-semibold text-2xl text-gray-800 leading-tight">Foods</h1>
|
||||
<a href="{{ route('foods.create') }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
|
|
@ -14,55 +14,55 @@
|
|||
<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">
|
||||
<div class="text-2xl lowercase font-extrabold leading-none">
|
||||
<article class="p-1 border-2 border-black font-sans">
|
||||
<h1 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>
|
||||
</h1>
|
||||
<h2 class="lowercase text-lg text-gray-600" x-text="food.brand" x-show="food.brand"></h2>
|
||||
<section class="flex justify-between font-bold border-b-8 border-black">
|
||||
<h1>Serving size</h1>
|
||||
<p>
|
||||
<span x-text="food.servingSizeFormatted"></span>
|
||||
<span x-text="food.servingUnitFormatted ?? food.name"></span>
|
||||
<span x-text="`(${food.servingWeight}g)`"></span>
|
||||
</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>
|
||||
</p>
|
||||
</section>
|
||||
<h2 class="font-bold text-right">Amount per serving</h2>
|
||||
<section class="flex justify-between items-end font-extrabold">
|
||||
<h1 class="text-xl">Calories</h1>
|
||||
<div class="text-xl" x-text="food.calories"></div>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Total Fat</h1>
|
||||
<div x-text="`${food.fat}g`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Cholesterol</h1>
|
||||
<div x-text="`${food.cholesterol}mg`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Sodium</h1>
|
||||
<div x-text="`${food.sodium}mg`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Total Carbohydrate</h1>
|
||||
<div x-text="`${food.carbohydrates}g`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Protein</h1>
|
||||
<div x-text="`${food.protein}g`"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">{{ $food->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto items-center">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto items-center">
|
||||
<div>
|
||||
{{ $food->name }}@if($food->detail), {{ $food->detail }}@endif
|
||||
@if($food->brand)
|
||||
|
|
@ -21,55 +21,55 @@
|
|||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<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">
|
||||
<div>Serving size</div>
|
||||
<article class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<section class="p-1 mb-2 border-2 border-black font-sans md:w-72">
|
||||
<h1 class="text-3xl font-extrabold leading-none">Nutrition Facts</h1>
|
||||
<section class="flex justify-between font-bold border-b-8 border-black">
|
||||
<h1>Serving size</h1>
|
||||
<div>
|
||||
{{ $food->servingSizeFormatted }}
|
||||
{{ $food->servingUnitFormatted ?? $food->name }}
|
||||
({{ $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>
|
||||
</section>
|
||||
<h2 class="font-bold text-right">Amount per serving</h2>
|
||||
<section class="flex justify-between items-end font-extrabold">
|
||||
<h1 class="text-3xl">Calories</h1>
|
||||
<div class="text-4xl">{{ $food->calories }}</div>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Total Fat</h1>
|
||||
<div>{{ $food->fat }}g</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Cholesterol</h1>
|
||||
<div>{{ $food->cholesterol }}mg</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Sodium</h1>
|
||||
<div>{{ $food->sodium }}mg</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Total Carbohydrate</h1>
|
||||
<div>{{ $food->carbohydrates }}g</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Protein</h1>
|
||||
<div>{{ $food->protein }}g</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2">
|
||||
</section>
|
||||
<section class="flex flex-col space-y-2">
|
||||
@if(!$food->tags->isEmpty())
|
||||
<h3 class="font-bold text-2xl">Tags</h3>
|
||||
<h1 class="font-bold text-2xl">Tags</h1>
|
||||
<div class="flex flex-wrap">
|
||||
@foreach ($food->tags as $tag)
|
||||
<span class="m-1 bg-gray-200 rounded-full px-2 leading-loose">{{ $tag->name }}</span>
|
||||
|
|
@ -77,11 +77,11 @@
|
|||
</div>
|
||||
@endif
|
||||
@if($food->description)
|
||||
<h3 class="font-bold text-2xl">Description</h3>
|
||||
<div class="text-gray-800">{{ $food->description }}</div>
|
||||
<h1 class="font-bold text-2xl">Description</h1>
|
||||
<p class="text-gray-800">{{ $food->description }}</p>
|
||||
@endif
|
||||
@if(!$food->ingredientAmountRelationships->isEmpty())
|
||||
<h3 class="font-bold text-2xl">Recipes</h3>
|
||||
<h1 class="font-bold text-2xl">Recipes</h1>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($food->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
|
|
@ -90,15 +90,15 @@
|
|||
</ul>
|
||||
@endif
|
||||
@if($food->source)
|
||||
<h3 class="font-bold text-2xl">Source</h3>
|
||||
<div>
|
||||
<h1 class="font-bold text-2xl">Source</h1>
|
||||
<p>
|
||||
@if(filter_var($food->source, FILTER_VALIDATE_URL))
|
||||
<a class="text-gray-500 hover:text-gray-700" href="{{ $food->source }}">{{ $food->source }}</a>
|
||||
@else
|
||||
{{ $food->source }}
|
||||
@endif
|
||||
</div>
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete Goal</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $goal->goal }} goal?
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('goals.destroy', $goal) }}">
|
||||
@method('delete')
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $title = ($goal->exists ? 'Edit' : 'Add') . ' Goal' }}
|
||||
<x-slot name="title">{{ $title }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ ($goal->exists ? route('goals.update', $goal) : route('goals.store')) }}">
|
||||
@if ($goal->exists)@method('put')@endif
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<x-slot name="title">My Goals - {{ $date->format('D, j M Y') }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="leading-tight text-center">
|
||||
<h1 class="leading-tight text-center">
|
||||
<div class="text-2xl font-semibold text-gray-800">My Goals</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</h1>
|
||||
<a href="{{ route('goals.create') }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Goal</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
||||
{{ $goal->summary }}
|
||||
<a class="ml-2 text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
|
||||
href="{{ route('goals.edit', $goal) }}">
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<div class="grid grid-cols-2 gap-y-1 gap-x-3 max-w-md inline-grid">
|
||||
<div class="font-bold">From</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<x-slot name="title">Add Entry</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Entry</h2>
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">Add Entry</h1>
|
||||
<a href="{{ route('journal-entries.create', ['date' => $default_date->format('Y-m-d')]) }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
|
||||
Add by Recipes/Food
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<x-slot name="title">Add Entries</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Entries</h2>
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">Add Entries</h1>
|
||||
<a href="{{ route('journal-entries.create.from-nutrients', ['date' => $default_date->format('Y-m-d')]) }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
|
||||
Add by Nutrients
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete Entry</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $entry->summary }}?
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('journal-entries.destroy', $entry) }}">
|
||||
@method('delete')
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<x-slot name="title">My Journal - {{ $date->format('D, j M Y') }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="leading-tight text-center">
|
||||
<h1 class="leading-tight text-center">
|
||||
<div class="text-2xl font-semibold text-gray-800">My Journal</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</h1>
|
||||
<a href="{{ route('journal-entries.create', ['date' => $date->format('Y-m-d')]) }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete {{ $recipe->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $recipe->name }}?
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('recipes.destroy', $recipe) }}">
|
||||
@method('delete')
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $title = ($recipe->exists ? "Edit {$recipe->name}" : 'Add Recipe') }}
|
||||
<x-slot name="title">{{ $title }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
|
||||
@if ($recipe->exists)@method('put')@endif
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<x-slot name="title">Recipes</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-2xl text-gray-800 leading-tight">Recipes</h2>
|
||||
<h1 class="font-semibold text-2xl text-gray-800 leading-tight">Recipes</h1>
|
||||
<a href="{{ route('recipes.create') }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
|
|
@ -14,51 +14,49 @@
|
|||
<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">
|
||||
<div class="text-2xl font-extrabold">
|
||||
<article class="p-1 border-2 border-black font-sans">
|
||||
<h1 class="text-2xl font-extrabold">
|
||||
<a x-bind:href="recipe.showUrl"
|
||||
class="hover:text-gray-600" x-text="recipe.name"></a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="leading-snug" x-text="`${recipe.servings} servings`"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end font-extrabold" x-show="recipe.serving_weight">
|
||||
<div>Serving weight</div>
|
||||
</h1>
|
||||
<h2 class="leading-snug" x-text="`${recipe.servings} servings`"></h2>
|
||||
<section class="flex justify-between items-end font-extrabold" x-show="recipe.serving_weight">
|
||||
<h1>Serving weight</h1>
|
||||
<div x-text="`${recipe.serving_weight}g`"></div>
|
||||
</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-xl">Calories</div>
|
||||
</section>
|
||||
<h2 class="font-bold text-right border-t-8 border-black">Amount per serving</h2>
|
||||
<section class="flex justify-between items-end font-extrabold">
|
||||
<h1 class="text-xl">Calories</h1>
|
||||
<div class="text-xl" x-text="`${recipe.caloriesPerServing}`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Total Fat</h1>
|
||||
<div x-text="`${recipe.fatPerServing}g`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Cholesterol</h1>
|
||||
<div x-text="`${recipe.cholesterolPerServing}mg`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Sodium</h1>
|
||||
<div x-text="`${recipe.sodiumPerServing}mg`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Total Carbohydrate</h1>
|
||||
<div x-text="`${recipe.carbohydratesPerServing}g`"></div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<section class="flex justify-between">
|
||||
<h1 class="font-bold">Protein</h1>
|
||||
<div x-text="`${recipe.proteinPerServing}g`"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">{{ $recipe->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
||||
{{ $recipe->name }}
|
||||
<a class="ml-2 text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
|
||||
href="{{ route('recipes.edit', $recipe) }}">
|
||||
|
|
@ -16,28 +16,28 @@
|
|||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</h2>
|
||||
</h1>
|
||||
</x-slot>
|
||||
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
|
||||
<div x-data="{showNutrientsSummary: false}">
|
||||
@if(!$recipe->tags->isEmpty())
|
||||
<section class="mb-2 text-gray-700 text-sm">
|
||||
<h3 class="font-extrabold inline">Tags:</h3>
|
||||
<h1 class="font-extrabold inline">Tags:</h1>
|
||||
{{ implode(', ', $recipe->tags->pluck('name')->all()) }}
|
||||
</section>
|
||||
@endif
|
||||
@if($recipe->description)
|
||||
<section>
|
||||
<h3 class="mb-2 font-bold text-2xl">Description</h3>
|
||||
<h1 class="mb-2 font-bold text-2xl">Description</h1>
|
||||
<p class="mb-2 text-gray-800">{{ $recipe->description }}</p>
|
||||
</section>
|
||||
@endif
|
||||
<section x-data="{showNutrientsSummary: false}">
|
||||
<h3 class="mb-2 font-bold text-2xl">
|
||||
<h1 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>
|
||||
</h1>
|
||||
<ul class="space-y-2">
|
||||
@foreach($recipe->ingredientAmounts as $ia)
|
||||
<li>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
</aside>
|
||||
</div>
|
||||
<section>
|
||||
<h3 class="mb-2 font-bold text-2xl">Steps</h3>
|
||||
<h1 class="mb-2 font-bold text-2xl">Steps</h1>
|
||||
@foreach($recipe->steps as $step)
|
||||
<div class="flex flex-row space-x-4 mb-4">
|
||||
<p class="text-3xl text-gray-400 text-center">{{ $step->number }}</p>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</section>
|
||||
@if($recipe->source)
|
||||
<footer class="mb-2 text-gray-500 text-sm">
|
||||
<h3 class="font-extrabold inline">Source:</h3>
|
||||
<h1 class="font-extrabold inline">Source:</h1>
|
||||
@if(filter_var($recipe->source, FILTER_VALIDATE_URL))
|
||||
<a href="{{ $recipe->source }}">{{ $recipe->source }}</a>
|
||||
@else
|
||||
|
|
|
|||
Loading…
Reference in New Issue