mirror of https://github.com/kcal-app/kcal.git
Improve recipes HTML semantics
This commit is contained in:
Christopher C. Wells
parent
debe773def
commit
2a6a1741e1
|
|
@ -5,7 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||||
|
|
||||||
<title>{{ config('app.name', 'Laravel') }}</title>
|
<title>{{ $title }} - {{ config('app.name', 'Laravel') }}</title>
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
|
||||||
|
|
@ -52,16 +52,14 @@
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<div class="py-6">
|
<div class="pt-6 max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||||
<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="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
<article class="p-6 border-b border-gray-200">
|
||||||
<article class="p-6 bg-white border-b border-gray-200">
|
{{ $slot }}
|
||||||
{{ $slot }}
|
</article>
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@stack('scripts')
|
@stack('scripts')
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<x-app-layout>
|
<x-app-layout>
|
||||||
|
<x-slot name="title">{{ $recipe->name }}</x-slot>
|
||||||
<x-slot name="header">
|
<x-slot name="header">
|
||||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
||||||
{{ $recipe->name }}
|
{{ $recipe->name }}
|
||||||
|
|
@ -20,44 +21,44 @@
|
||||||
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
|
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
|
||||||
<div x-data="{showNutrientsSummary: false}">
|
<div x-data="{showNutrientsSummary: false}">
|
||||||
@if(!$recipe->tags->isEmpty())
|
@if(!$recipe->tags->isEmpty())
|
||||||
<div class="mb-2 text-gray-700 text-sm">
|
<section class="mb-2 text-gray-700 text-sm">
|
||||||
<span class="font-extrabold">Tags:</span>
|
<h3 class="font-extrabold inline">Tags:</h3>
|
||||||
{{ implode(', ', $recipe->tags->pluck('name')->all()) }}
|
{{ implode(', ', $recipe->tags->pluck('name')->all()) }}
|
||||||
</div>
|
</section>
|
||||||
@endif
|
@endif
|
||||||
@if($recipe->description)
|
@if($recipe->description)
|
||||||
<h3 class="mb-2 font-bold text-2xl">Description</h3>
|
<section>
|
||||||
<div class="mb-2 text-gray-800">{{ $recipe->description }}</div>
|
<h3 class="mb-2 font-bold text-2xl">Description</h3>
|
||||||
|
<p class="mb-2 text-gray-800">{{ $recipe->description }}</p>
|
||||||
|
</section>
|
||||||
@endif
|
@endif
|
||||||
<h3 class="mb-2 font-bold text-2xl">
|
<section x-data="{showNutrientsSummary: false}">
|
||||||
Ingredients
|
<h3 class="mb-2 font-bold text-2xl">
|
||||||
<span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
|
Ingredients
|
||||||
x-on:click="showNutrientsSummary = !showNutrientsSummary">[toggle nutrients]</span>
|
<span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
|
||||||
</h3>
|
x-on:click="showNutrientsSummary = !showNutrientsSummary">[toggle nutrients]</span>
|
||||||
<div class="space-y-2">
|
</h3>
|
||||||
@foreach($recipe->ingredientAmounts as $ia)
|
<ul class="space-y-2">
|
||||||
<div>
|
@foreach($recipe->ingredientAmounts as $ia)
|
||||||
<div class="flex flex-row space-x-2">
|
<li>
|
||||||
<div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div>
|
{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}
|
||||||
@if($ia->unitFormatted)<div>{{ $ia->unitFormatted }}</div>@endif
|
@if($ia->unitFormatted){{ $ia->unitFormatted }}@endif
|
||||||
<div>
|
@if($ia->ingredient->type === \App\Models\Recipe::class)
|
||||||
@if($ia->ingredient->type === \App\Models\Recipe::class)
|
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
href="{{ route('recipes.show', $ia->ingredient) }}">
|
||||||
href="{{ route('recipes.show', $ia->ingredient) }}">
|
{{ $ia->ingredient->name }}
|
||||||
{{ $ia->ingredient->name }}
|
</a>
|
||||||
</a>
|
@else
|
||||||
@else
|
{{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif
|
||||||
{{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif
|
@endif
|
||||||
@endif
|
@if($ia->detail)<span class="text-gray-500">{{ $ia->detail }}</span>@endif
|
||||||
</div>
|
<div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
|
||||||
@if($ia->detail)<div class="text-gray-500">{{ $ia->detail }}</div>@endif
|
</li>
|
||||||
</div>
|
@endforeach
|
||||||
<div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
@endforeach
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<aside>
|
||||||
<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 sm:ml-4 md: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>
|
||||||
|
|
@ -100,23 +101,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mb-2 font-bold text-2xl">Steps</h3>
|
<section>
|
||||||
@foreach($recipe->steps as $step)
|
<h3 class="mb-2 font-bold text-2xl">Steps</h3>
|
||||||
<div class="flex flex-row space-x-4 mb-4">
|
@foreach($recipe->steps as $step)
|
||||||
<div class="text-3xl text-gray-400 text-center">{{ $step->number }}</div>
|
<div class="flex flex-row space-x-4 mb-4">
|
||||||
<div class="text-2xl">{{ $step->step }}</div>
|
<p class="text-3xl text-gray-400 text-center">{{ $step->number }}</p>
|
||||||
</div>
|
<p class="text-2xl">{{ $step->step }}</p>
|
||||||
@endforeach
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</section>
|
||||||
@if($recipe->source)
|
@if($recipe->source)
|
||||||
<div class="mb-2 text-gray-500 text-sm">
|
<footer class="mb-2 text-gray-500 text-sm">
|
||||||
<span class="font-extrabold">Source:</span>
|
<h3 class="font-extrabold inline">Source:</h3>
|
||||||
@if(filter_var($recipe->source, FILTER_VALIDATE_URL))
|
@if(filter_var($recipe->source, FILTER_VALIDATE_URL))
|
||||||
<a href="{{ $recipe->source }}">{{ $recipe->source }}</a>
|
<a href="{{ $recipe->source }}">{{ $recipe->source }}</a>
|
||||||
@else
|
@else
|
||||||
{{ $recipe->source }}
|
{{ $recipe->source }}
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</footer>
|
||||||
@endif
|
@endif
|
||||||
</x-app-layout>
|
</x-app-layout>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue