Make goals table more responsive

This commit is contained in:
Christopher C. Wells 2021-05-15 20:53:23 -07:00 committed by Christopher Charbonneau Wells
parent 721c5baa2c
commit 433c884e1e
5 changed files with 323 additions and 810 deletions

1101
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -16,16 +16,16 @@
"autoprefixer": "^10.2.5", "autoprefixer": "^10.2.5",
"axios": "^0.21.1", "axios": "^0.21.1",
"cross-env": "^7.0", "cross-env": "^7.0",
"laravel-mix": "^6.0.16", "laravel-mix": "^6.0.19",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"postcss-import": "^14.0.1", "postcss-import": "^14.0.2",
"quill": "^1.3.7", "quill": "^1.3.7",
"resolve-url-loader": "^3.1.2", "resolve-url-loader": "^4.0.0",
"tailwindcss": "^2.1.1", "tailwindcss": "^2.1.2",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.12"
}, },
"dependencies": { "dependencies": {
"@shopify/draggable": "^1.0.0-beta.12", "@shopify/draggable": "^1.0.0-beta.12",
"alpine-magic-helpers": "^1.2.0" "alpine-magic-helpers": "^1.2.2"
} }
} }

2
public/css/app.css vendored

File diff suppressed because one or more lines are too long

2
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View File

@ -8,12 +8,12 @@
</x-button-link.green> </x-button-link.green>
</div> </div>
</x-slot> </x-slot>
<table class="min-w-max w-full table-auto"> <table class="w-full table-fixed">
<thead> <thead>
<tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal"> <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Name</th> <th class="py-3 px-6 text-left">Name</th>
<th class="py-3 px-6 text-left">Days of Week</th> <th class="hidden py-3 px-6 text-left lg:table-cell">Days of Week</th>
<th class="py-3 px-6 text-left">Total Calories</th> <th class="hidden py-3 px-6 text-left sm:table-cell">Total Calories</th>
<th class="py-3 px-6 text-left">Operations</th> <th class="py-3 px-6 text-left">Operations</th>
</tr> </tr>
</thead> </thead>
@ -26,12 +26,18 @@
{{ $goal->name }} {{ $goal->name }}
</a> </a>
</td> </td>
<td class="py-3 px-6">{{ $goal->days_formatted->pluck('label')->join(', ') }}</td> <td class="hidden py-3 px-6 lg:table-cell">
<td class="py-3 px-6"> @empty($goal->days_formatted->count())
<em>none</em>
@else
{{ $goal->days_formatted->pluck('label')->join(', ') }}
@endempty
</td>
<td class="hidden py-3 px-6 sm:table-cell">
{{ number_format($goal->calories) }} {{ number_format($goal->calories) }}
</td> </td>
<td class="py-3 px-6"> <td class="py-3 px-6">
<div class="flex space-x-2 justify-start"> <div class="flex flex-col space-y-2 justify-start sm:flex-row sm:space-x-2 sm:space-y-0">
<x-button-link.gray href="{{ route('goals.edit', $goal) }}"> <x-button-link.gray href="{{ route('goals.edit', $goal) }}">
Edit Edit
</x-button-link.gray> </x-button-link.gray>