From b83366f2d27ef13d53991a460d6de86f40c6f111 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Mon, 25 Jan 2021 20:25:27 -0800
Subject: [PATCH] Improve mobile usability of journal pages

---
 .../views/journal-entries/create.blade.php    |  13 +--
 .../views/journal-entries/index.blade.php     |  45 ++++---
 .../partials/entry-item-input.blade.php       | 110 ++++++++++--------
 resources/views/recipes/create.blade.php      |  90 --------------
 4 files changed, 95 insertions(+), 163 deletions(-)
 delete mode 100644 resources/views/recipes/create.blade.php

diff --git a/resources/views/journal-entries/create.blade.php b/resources/views/journal-entries/create.blade.php
index c2d340b..7c56b1e 100644
--- a/resources/views/journal-entries/create.blade.php
+++ b/resources/views/journal-entries/create.blade.php
@@ -9,19 +9,12 @@
                 <div class="p-6 bg-white border-b border-gray-200">
                     <form method="POST" action="{{ route('journal-entries.store') }}">
                     @csrf
-                        <div x-data="{ ingredients: {{ empty($ingredients) ? 0 : -1 }} }">
-                            <div class="grid grid-cols-12 gap-4 items-center">
-                                <x-inputs.label for="ingredients[date][]" value="Date" class="col-span-2"/>
-                                <x-inputs.label for="ingredients[meal][]" value="Meal" class="col-span-2"/>
-                                <x-inputs.label for="ingredients[amount][]" value="Amount"/>
-                                <x-inputs.label for="ingredients[unit][]" value="Unit" class="col-span-2"/>
-                                <x-inputs.label for="ingredients[id][]" value="Food or Recipe" class="col-span-4"/>
-                            </div>
-                            <div>
+                        <div x-data="{ ingredients: 1 }">
+                            <div class="space-y-4">
                                 @foreach($ingredients as $ingredient)
                                     @include('journal-entries.partials.entry-item-input', $ingredient)
                                 @endforeach
-                                <template x-for="i in ingredients + 1">
+                                <template x-if="ingredients > 0" x-for="i in ingredients">
                                     @include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
                                 </template>
                             </div>
diff --git a/resources/views/journal-entries/index.blade.php b/resources/views/journal-entries/index.blade.php
index c9ffa86..46cb2bb 100644
--- a/resources/views/journal-entries/index.blade.php
+++ b/resources/views/journal-entries/index.blade.php
@@ -1,9 +1,27 @@
 <x-app-layout>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="font-semibold text-2xl text-gray-800 leading-tight">
-                {{ Auth::user()->name }}'s Journal
-                <div class="text-base text-gray-500">{{ $date->format('D, j M Y') }}</div>
+            <h2 class="leading-tight text-center">
+                <div class="text-2xl font-semibold text-gray-800">{{ Auth::user()->name }}'s Journal</div>
+                <div class="flex items-center space-x-2">
+                    <div>
+                        <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                           href="{{ route(Route::current()->getName(), ['date' => $date->copy()->subDay(1)->toDateString()]) }}">
+                            <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 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    </div>
+                    <div class="text-base text-gray-500">{{ $date->format('D, j M Y') }}</div>
+                    <div>
+                        <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                           href="{{ route(Route::current()->getName(), ['date' => $date->copy()->addDay(1)->toDateString()]) }}">
+                            <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 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
             </h2>
             <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">
@@ -18,13 +36,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="p-6 bg-white border-b border-gray-200">
-                    <div class="flex flex-row">
-                        <div class="w-1/12 mr-4">
-                            <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                               href="{{ route(Route::current()->getName(), ['date' => $date->copy()->subDay(1)->toDateString()]) }}">
-                                previous</a>
-                        </div>
-                        <div class="w-3/12 mr-4">
+                    <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-2/5 md:w-1/3 lg:w-1/4">
                             <h3 class="font-semibold text-xl text-gray-800">{{ $date->format('D, j M Y') }}</h3>
                             <div class="text-gray-700">{{ $entries->count() }} {{ \Illuminate\Support\Pluralizer::plural('entry', $entries->count()) }}</div>
                             <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2">
@@ -42,11 +55,14 @@
                                 <div class="text-right">{{ round($entries->sum('protein'), 2) }}g</div>
                             </div>
                         </div>
-                        <div class="flex flex-col space-y-4 w-full mr-4">
+                        <div class="w-full sm:w-3/5 md:w-2/3 lg:w-3/4 flex flex-col space-y-4">
                             @foreach(['breakfast', 'lunch', 'dinner', 'snacks'] as $meal)
                                 <div>
                                     <h3 class="font-semibold text-lg text-gray-800">
-                                        {{ Str::ucfirst($meal) }}
+                                        <div class="flex items-center">
+                                            <div>{{ Str::ucfirst($meal) }}</div>
+                                            <div class="ml-2 w-full"><hr/></div>
+                                        </div>
                                         <span class="text-sm text-gray-500">
                                         @foreach(\App\Support\Nutrients::$all as $nutrient)
                                                 {{ round($entries->where('meal', $meal)->sum($nutrient), 2) }}g
@@ -101,11 +117,6 @@
                                 </div>
                             @endforeach
                         </div>
-                        <div class="w-1/12 text-right">
-                            <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                               href="{{ route(Route::current()->getName(), ['date' => $date->copy()->addDay(1)->toDateString()]) }}">
-                                next</a>
-                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/journal-entries/partials/entry-item-input.blade.php b/resources/views/journal-entries/partials/entry-item-input.blade.php
index 1ee9541..447f4e4 100644
--- a/resources/views/journal-entries/partials/entry-item-input.blade.php
+++ b/resources/views/journal-entries/partials/entry-item-input.blade.php
@@ -1,54 +1,72 @@
-<div x-data x-init="setDefaultsFromPrevious($el);" class="grid grid-cols-12 gap-4 items-center mt-2">
-    <!-- Date -->
-    <div class="col-span-2">
-        <x-inputs.input class="block w-full"
-                        type="date"
-                        name="ingredients[date][]"
-                        :value="$date ?? $default_date->toDateString()"
-                        required />
-    </div>
+<div x-data x-init="setDefaultsFromPrevious($el);" class="flex items-center space-x-2">
+    <div class="flex flex-col space-y-4 w-full">
+        <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
+            <!-- Date -->
+            <div class="w-full">
+                <x-inputs.label for="ingredients[date][]" value="Date" class="md:hidden"/>
+                <x-inputs.input name="ingredients[date][]"
+                                type="date"
+                                class="block w-full"
+                                :value="$date ?? $default_date->toDateString()"
+                                required />
+            </div>
 
-    <!-- Meal -->
-    <div class="col-span-2">
-        <x-inputs.select name="ingredients[meal][]"
-                         class="block w-full"
-                         :options="$meals"
-                         :selectedValue="$meal ?? null"
-                         required>
-            <option value=""></option>
-        </x-inputs.select>
-    </div>
+            <!-- Meal -->
+            <div class="w-full">
+                <x-inputs.label for="ingredients[meal][]" value="Meal" class="md:hidden"/>
+                <x-inputs.select name="ingredients[meal][]"
+                                 class="block w-full"
+                                 :options="$meals"
+                                 :selectedValue="$meal ?? null"
+                                 required>
+                    <option value="" disabled selected>Meal</option>
+                </x-inputs.select>
+            </div>
 
-    <!-- Amount -->
-    <div>
-        <x-inputs.input type="text"
-                        name="ingredients[amount][]"
-                        class="block w-full"
-                        :value="$amount ?? null" />
-    </div>
+            <!-- Amount -->
+            <div class="w-full">
+                <x-inputs.label for="ingredients[amount][]" value="Amount" class="md:hidden"/>
+                <x-inputs.input name="ingredients[amount][]"
+                                type="text"
+                                size="5"
+                                class="block w-full"
+                                placeholder="Amount"
+                                :value="$amount ?? null" />
+            </div>
 
-    <!-- Unit -->
-    <div class="col-span-2">
-        <x-inputs.select name="ingredients[unit][]"
-                         class="block w-full"
-                         :options="$units"
-                         :selectedValue="$unit ?? null">
-            <option value=""></option>
-        </x-inputs.select>
+            <!-- Unit -->
+            <div class="w-full">
+                <x-inputs.label for="ingredients[unit][]" value="Unit" class="md:hidden"/>
+                <x-inputs.select name="ingredients[unit][]"
+                                 class="block w-full"
+                                 :options="$units"
+                                 :selectedValue="$unit ?? null">
+                    <option value=""></option>
+                </x-inputs.select>
+            </div>
+        </div>
+        <div class="w-full">
+            <!-- Ingredient -->
+            <div class="w-full">
+                <x-inputs.label for="ingredients[id][]" value="Food or Recipe" class="md:hidden"/>
+                <x-ingredient-picker :default-id="$id ?? null"
+                                     :default-type="$type ?? null"
+                                     :default-name="$name ?? null" />
+            </div>
+        </div>
+        <div class="w-full">
+            <hr class="my-2"/>
+        </div>
     </div>
-
-    <!-- Ingredient -->
-    <div class="col-span-4">
-        <x-ingredient-picker :default-id="$id ?? null"
-                             :default-type="$type ?? null"
-                             :default-name="$name ?? null" />
+    <div class="flex-none">
+        <x-inputs.icon-button type="button"
+                              color="red"
+                              x-on:click="($parent.ingredients > 1 ? $parent.ingredients-- : null); $event.target.parentNode.parentNode.remove();">
+            <svg class="h-8 w-8 pointer-events-none m-auto" 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>
+        </x-inputs.icon-button>
     </div>
-
-    <x-inputs.icon-button type="button" color="red" x-on:click="$parent.ingredients--; $event.target.parentNode.remove();">
-        <svg class="h-8 w-8 pointer-events-none m-auto" 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>
-    </x-inputs.icon-button>
 </div>
 
 @once
diff --git a/resources/views/recipes/create.blade.php b/resources/views/recipes/create.blade.php
deleted file mode 100644
index 38e2104..0000000
--- a/resources/views/recipes/create.blade.php
+++ /dev/null
@@ -1,90 +0,0 @@
-<x-app-layout>
-    <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Recipe</h2>
-    </x-slot>
-
-    <div class="py-12">
-        <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.store') }}">
-                    @csrf
-                        <div class="flex flex-col space-y-4">
-                            <div class="grid grid-cols-5 gap-4">
-                                <!-- Name -->
-                                <div class="col-span-4">
-                                    <x-inputs.label for="name" value="Name" />
-
-                                    <x-inputs.input id="name"
-                                                    class="block mt-1 w-full"
-                                                    type="text"
-                                                    name="name"
-                                                    :value="old('name')"
-                                                    required />
-                                </div>
-
-                                <!-- Servings -->
-                                <div>
-                                    <x-inputs.label for="servings" value="Servings" />
-
-                                    <x-inputs.input id="servings"
-                                                    class="block mt-1 w-full"
-                                                    type="number"
-                                                    name="servings"
-                                                    :value="old('servings')"
-                                                    required />
-                                </div>
-                            </div>
-
-                            <!-- Description -->
-                            <div>
-                                <x-inputs.label for="description" value="Description" />
-
-                                <x-inputs.textarea id="description"
-                                                   class="block mt-1 w-full"
-                                                   name="description"
-                                                   :value="old('description')" />
-                            </div>
-                        </div>
-
-                        <!-- Ingredients -->
-                        <h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
-                        @for($i = 0; $i < 20; $i++)
-                            <div class="flex flex-row space-x-4 mb-4">
-                                <x-inputs.input type="text"
-                                                name="foods_amount[]"
-                                                size="5"
-                                                :value="old('foods_amount.' . $i)" />
-                                <x-inputs.select name="foods_unit[]"
-                                                 :options="$food_units"
-                                                 :selectedValue="old('foods_unit.' . $i)">
-                                    <option value=""></option>
-                                </x-inputs.select>
-                                <x-inputs.select name="foods[]"
-                                                 :options="$foods"
-                                                 :selectedValue="old('foods.' . $i)">
-                                    <option value=""></option>
-                                </x-inputs.select>
-                            </div>
-                        @endfor
-
-                        <!-- Steps -->
-                        <h3 class="pt-2 mb-2 font-extrabold">Steps</h3>
-                        @for($i = 0; $i < 20; $i++)
-                            <div class="flex flex-row space-x-4 mb-4">
-                                <div class="text-3xl text-gray-400 text-center">{{ $i + 1 }}</div>
-                                <x-inputs.textarea class="block mt-1 w-full"
-                                                   name="steps[]"
-                                                   :value="old('steps.' . $i)" />
-                            </div>
-                        @endfor
-
-                        <div class="flex items-center justify-end mt-4">
-                            <x-inputs.button class="ml-3">Add</x-inputs.button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</x-app-layout>