RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace tiny edit/delete icons with big buttons

This commit is contained in:
Christopher C. Wells 2021-04-10 21:10:22 -07:00
parent 232e2fc6ac
commit a9ef5ddfd4
12 changed files with 143 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

3
resources/views/components/button-link/base.blade.php Normal file
View File

@ -0,0 +1,3 @@
<a {{ $attributes->merge(['class' => "px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white text-center uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
{{ $slot }}
</a>

3
resources/views/components/button-link/green.blade.php Normal file
View File

@ -0,0 +1,3 @@
<x-button-link.base :attributes="$attributes" class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300">
{{ $slot }}
</x-button-link.base>

3
resources/views/components/button-link/red.blade.php Normal file
View File

@ -0,0 +1,3 @@
<x-button-link.base :attributes="$attributes" class="bg-red-800 hover:bg-red-700 active:bg-red-900 focus:border-red-900 ring-red-300">
{{ $slot }}
</x-button-link.base>

9
resources/views/foods/index.blade.php
View File

@ -3,12 +3,9 @@
<x-slot name="header"> <x-slot name="header">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="font-semibold text-2xl text-gray-800 leading-tight">Foods</h1> <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"> <x-button-link.green href="{{ route('foods.create') }}" class="text-sm">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> Add Food
<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" /> </x-button-link.green>
</svg>
New Food
</a>
</div> </div>
</x-slot> </x-slot>
<x-search-view :route="route('api:v1:foods.index')" :tags="$tags"> <x-search-view :route="route('api:v1:foods.index')" :tags="$tags">

179
resources/views/foods/show.blade.php
View File

@ -4,82 +4,46 @@
<h1 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> <div>
{{ $food->name }}@if($food->detail), {{ $food->detail }}@endif {{ $food->name }}@if($food->detail), {{ $food->detail }}@endif
@if($food->brand)
<div>{{ $food->brand }}</div>
@endif
</div> </div>
<a class="ml-2 text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
href="{{ route('foods.edit', $food) }}">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
</svg>
</a>
<a class="h-6 w-6 text-red-500 hover:text-red-700 hover:border-red-300 float-right text-sm"
href="{{ route('foods.delete', $food) }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
</h1> </h1>
</x-slot> </x-slot>
<article class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0"> <div class="flex flex-col justify-between pb-4 md:flex-row md:space-x-4">
<section class="p-1 mb-2 border-2 border-black font-sans md:w-72"> <div class="flex-1">
<h1 class="text-3xl font-extrabold leading-none">Nutrition Facts</h1> <section class="flex flex-col space-y-2">
<section class="flex justify-between font-bold border-b-8 border-black"> @if($food->brand)
<h1>Serving size</h1> <h1 class="font-bold text-2xl">Brand</h1>
<div> <div class="flex flex-wrap">
{{ $food->servingSizeFormatted }} {{ $food->brand }}
{{ $food->servingUnitFormatted ?? $food->name }} </div>
({{ $food->serving_weight }}g) @endif
</div> @if($food->notes)
</section> <h1 class="font-bold text-2xl">Notes</h1>
<h2 class="font-bold text-right">Amount per serving</h2> <div class="flex flex-wrap">
<section class="flex justify-between items-end font-extrabold"> {{ $food->notes }}
<h1 class="text-3xl">Calories</h1> </div>
<div class="text-4xl">{{ $food->calories }}</div> @endif
</section> @if(!$food->tags->isEmpty())
<div class="border-t-4 border-black text-sm"> <h1 class="font-bold text-2xl">Tags</h1>
<hr class="border-gray-500"/> <div class="flex flex-wrap">
<section class="flex justify-between"> @foreach ($food->tags as $tag)
<h1 class="font-bold">Total Fat</h1> <span class="m-1 bg-gray-200 rounded-full px-2 leading-loose">{{ $tag->name }}</span>
<div>{{ $food->fat }}g</div> @endforeach
</section> </div>
<hr class="border-gray-500"/> @endif
<section class="flex justify-between"> @if($food->description)
<h1 class="font-bold">Cholesterol</h1> <h1 class="font-bold text-2xl">Description</h1>
<div>{{ $food->cholesterol }}mg</div> <p class="text-gray-800">{{ $food->description }}</p>
</section> @endif
<hr class="border-gray-500"/> @if($food->source)
<section class="flex justify-between"> <h1 class="font-bold text-2xl">Source</h1>
<h1 class="font-bold">Sodium</h1> <p>
<div>{{ $food->sodium }}mg</div> @if(filter_var($food->source, FILTER_VALIDATE_URL))
</section> <a class="text-gray-500 hover:text-gray-700" href="{{ $food->source }}">{{ $food->source }}</a>
<hr class="border-gray-500"/> @else
<section class="flex justify-between"> {{ $food->source }}
<h1 class="font-bold">Total Carbohydrate</h1> @endif
<div>{{ $food->carbohydrates }}g</div> </p>
</section> @endif
<hr class="border-gray-500"/>
<section class="flex justify-between">
<h1 class="font-bold">Protein</h1>
<div>{{ $food->protein }}g</div>
</section>
</div>
</section>
<section class="flex flex-col space-y-2">
@if(!$food->tags->isEmpty())
<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>
@endforeach
</div>
@endif
@if($food->description)
<h1 class="font-bold text-2xl">Description</h1>
<p class="text-gray-800">{{ $food->description }}</p>
@endif
@if(!$food->ingredientAmountRelationships->isEmpty()) @if(!$food->ingredientAmountRelationships->isEmpty())
<h1 class="font-bold text-2xl">Recipes</h1> <h1 class="font-bold text-2xl">Recipes</h1>
<ul class="list-disc list-inside ml-3 space-y-1"> <ul class="list-disc list-inside ml-3 space-y-1">
@ -89,16 +53,61 @@
@endforeach @endforeach
</ul> </ul>
@endif @endif
@if($food->source) </section>
<h1 class="font-bold text-2xl">Source</h1> </div>
<p> <aside class="flex flex-col space-y-4 mt-8 sm:mt-0">
@if(filter_var($food->source, FILTER_VALIDATE_URL)) <section class="p-1 mb-2 border-2 border-black font-sans md:w-72">
<a class="text-gray-500 hover:text-gray-700" href="{{ $food->source }}">{{ $food->source }}</a> <h1 class="text-3xl font-extrabold leading-none">Nutrition Facts</h1>
@else <section class="flex justify-between font-bold border-b-8 border-black">
{{ $food->source }} <h1>Serving size</h1>
@endif <div>
</p> {{ $food->servingSizeFormatted }}
@endif {{ $food->servingUnitFormatted ?? $food->name }}
</section> ({{ $food->serving_weight }}g)
</article> </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>
</section>
<div class="border-t-4 border-black text-sm">
<hr class="border-gray-500"/>
<section class="flex justify-between">
<h1 class="font-bold">Total Fat</h1>
<div>{{ $food->fat }}g</div>
</section>
<hr class="border-gray-500"/>
<section class="flex justify-between">
<h1 class="font-bold">Cholesterol</h1>
<div>{{ $food->cholesterol }}mg</div>
</section>
<hr class="border-gray-500"/>
<section class="flex justify-between">
<h1 class="font-bold">Sodium</h1>
<div>{{ $food->sodium }}mg</div>
</section>
<hr class="border-gray-500"/>
<section class="flex justify-between">
<h1 class="font-bold">Total Carbohydrate</h1>
<div>{{ $food->carbohydrates }}g</div>
</section>
<hr class="border-gray-500"/>
<section class="flex justify-between">
<h1 class="font-bold">Protein</h1>
<div>{{ $food->protein }}g</div>
</section>
</div>
</section>
<hr />
<section class="flex flex-col space-y-2">
<x-button-link.base href="{{ route('foods.edit', $food) }}">
Edit Food
</x-button-link.base>
<x-button-link.red href="{{ route('foods.delete', $food) }}">
Delete Food
</x-button-link.red>
</section>
</aside>
</div>
</x-app-layout> </x-app-layout>

7
resources/views/goals/index.blade.php
View File

@ -33,12 +33,9 @@
</div> </div>
</div> </div>
</h1> </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"> <x-button-link.green href="{{ route('goals.create') }}" class="text-sm">
<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" />
</svg>
Add Goal Add Goal
</a> </x-button-link.green>
</div> </div>
</x-slot> </x-slot>
<div class="space-y-4"> <div class="space-y-4">

6
resources/views/journal-entries/create-from-nutrients.blade.php
View File

@ -3,9 +3,9 @@
<x-slot name="header"> <x-slot name="header">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="font-semibold text-xl text-gray-800 leading-tight">Add Entry</h1> <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"> <x-button-link.green href="{{ route('journal-entries.create', ['date' => $default_date->format('Y-m-d')]) }}" class="text-sm">
Add by Recipes/Food Add by Recipes/Foods
</a> </x-button-link.green>
</div> </div>
</x-slot> </x-slot>
<form method="POST" action="{{ route('journal-entries.store.from-nutrients') }}"> <form method="POST" action="{{ route('journal-entries.store.from-nutrients') }}">

4
resources/views/journal-entries/create.blade.php
View File

@ -3,9 +3,9 @@
<x-slot name="header"> <x-slot name="header">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="font-semibold text-xl text-gray-800 leading-tight">Add Entries</h1> <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"> <x-button-link.green href="{{ route('journal-entries.create.from-nutrients', ['date' => $default_date->format('Y-m-d')]) }}" class="text-sm">
Add by Nutrients Add by Nutrients
</a> </x-button-link.green>
</div> </div>
</x-slot> </x-slot>
<form method="POST" action="{{ route('journal-entries.store') }}"> <form method="POST" action="{{ route('journal-entries.store') }}">

9
resources/views/journal-entries/index.blade.php
View File

@ -33,12 +33,9 @@
</div> </div>
</div> </div>
</h1> </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"> <x-button-link.green href="{{ route('journal-entries.create', ['date' => $date->format('Y-m-d')]) }}" class="text-sm">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> Add Entry
<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" /> </x-button-link.green>
</svg>
New Entry
</a>
</div> </div>
</x-slot> </x-slot>
<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">

9
resources/views/recipes/index.blade.php
View File

@ -3,12 +3,9 @@
<x-slot name="header"> <x-slot name="header">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="font-semibold text-2xl text-gray-800 leading-tight">Recipes</h1> <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"> <x-button-link.green href="{{ route('recipes.create') }}" class="text-sm">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> Add Recipe
<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" /> </x-button-link.green>
</svg>
New Recipe
</a>
</div> </div>
</x-slot> </x-slot>
<x-search-view :route="route('api:v1:recipes.index')" :tags="$tags"> <x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">

48
resources/views/recipes/show.blade.php
View File

@ -6,25 +6,12 @@
<x-slot name="header"> <x-slot name="header">
<h1 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 }} {{ $recipe->name }}
<a class="ml-2 text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
href="{{ route('recipes.edit', $recipe) }}">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
</svg>
</a>
<a class="h-6 w-6 text-red-500 hover:text-red-700 hover:border-red-300 float-right text-sm"
href="{{ route('recipes.delete', $recipe) }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
</h1> </h1>
</x-slot> </x-slot>
<div class="flex flex-col justify-between pb-4 md:flex-row md:space-x-4"> <div class="flex flex-col justify-between pb-4 md:flex-row md:space-x-4">
<div class="flex-1" x-data="{showNutrientsSummary: false}"> <div class="flex-1" x-data="{showNutrientsSummary: false}">
@if($recipe->time_total > 0) @if($recipe->time_total > 0)
<section class="flex justify-between mb-2 p-2 bg-gray-100 rounded"> <section class="flex justify-between mb-2 p-2 bg-gray-100 rounded max-w-3xl">
<div> <div>
<h1 class="mb-1 font-bold">Prep time</h1> <h1 class="mb-1 font-bold">Prep time</h1>
<p class="text-gray-800 text-sm">{{ $recipe->time_prep }} minutes</p> <p class="text-gray-800 text-sm">{{ $recipe->time_prep }} minutes</p>
@ -94,8 +81,20 @@
</ol> </ol>
</div> </div>
</section> </section>
<footer>
@if(!$recipe->tags->isEmpty())
<section>
<h1 class="mb-2 font-bold text-2xl">Tags</h1>
<div class="flex flex-wrap">
@foreach($recipe->tags as $tag)
<span class="m-1 bg-gray-200 rounded-full px-2 leading-loose cursor-default">{{ $tag->name }}</span>
@endforeach
</div>
</section>
@endif
</footer>
</div> </div>
<aside class="flex flex-col space-y-4 md:w-1/2 lg:w-1/3"> <aside class="flex flex-col space-y-4 mt-8 sm:mt-0">
<div class="p-1 border-2 border-black font-sans w-72"> <div class="p-1 border-2 border-black font-sans 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>
@ -149,16 +148,15 @@
@endif @endif
</section> </section>
@endif @endif
@if(!$recipe->tags->isEmpty()) <hr />
<section> <section class="flex flex-col space-y-2">
<h1 class="mb-2 font-bold text-2xl">Tags</h1> <x-button-link.base href="{{ route('recipes.edit', $recipe) }}">
<div class="flex flex-wrap"> Edit Recipe
@foreach($recipe->tags as $tag) </x-button-link.base>
<span class="m-1 bg-gray-200 rounded-full px-2 leading-loose cursor-default">{{ $tag->name }}</span> <x-button-link.red href="{{ route('recipes.delete', $recipe) }}">
@endforeach Delete Recipe
</div> </x-button-link.red>
</section> </section>
@endif
</aside> </aside>
</div> </div>
</x-app-layout> </x-app-layout>