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",
"axios": "^0.21.1",
"cross-env": "^7.0",
"laravel-mix": "^6.0.16",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"postcss-import": "^14.0.1",
"postcss-import": "^14.0.2",
"quill": "^1.3.7",
"resolve-url-loader": "^3.1.2",
"tailwindcss": "^2.1.1",
"resolve-url-loader": "^4.0.0",
"tailwindcss": "^2.1.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@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>
</div>
</x-slot>
<table class="min-w-max w-full table-auto">
<table class="w-full table-fixed">
<thead>
<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">Days of Week</th>
<th class="py-3 px-6 text-left">Total Calories</th>
<th class="hidden py-3 px-6 text-left lg:table-cell">Days of Week</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>
</tr>
</thead>
@ -26,12 +26,18 @@
{{ $goal->name }}
</a>
</td>
<td class="py-3 px-6">{{ $goal->days_formatted->pluck('label')->join(', ') }}</td>
<td class="py-3 px-6">
<td class="hidden py-3 px-6 lg:table-cell">
@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) }}
</td>
<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) }}">
Edit
</x-button-link.gray>