Make person list view mobile responsive

This commit is contained in:
Peter Stockings
2023-07-26 12:54:45 +10:00
parent fa8a751d4d
commit 24be7a22ec

View File

@@ -9,7 +9,7 @@
<div class="flex justify-center"> <div class="flex justify-center">
<div class="bg-white shadow rounded-lg p-4 sm:w-full xl:p-8 md:w-full lg:w-11/12"> <div class="bg-white shadow rounded-lg p-4 sm:w-full xl:p-8 md:w-full lg:w-11/12">
<div class="mb-4 flex items-center justify-between"> <div class="mb-4 flex items-center justify-between px-3">
<div> <div>
<h3 class="text-xl font-bold text-gray-900 mb-2">{{ person['PersonName'] }}</h3> <h3 class="text-xl font-bold text-gray-900 mb-2">{{ person['PersonName'] }}</h3>
<span class="text-base font-normal text-gray-500">List of workouts</span> <span class="text-base font-normal text-gray-500">List of workouts</span>
@@ -37,7 +37,7 @@
</div> </div>
<div class="flex flex-wrap -mx-3 mb-1"> <div class="flex flex-wrap mb-1">
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0"> <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<div class="mb-1 w-full"> <div class="mb-1 w-full">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city"> <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
@@ -126,7 +126,7 @@
{% include 'partials/tags.html' %} {% include 'partials/tags.html' %}
{% endwith %} {% endwith %}
<div class="flex flex-col mt-3"> <div class="flex flex-col mt-3 w-screen sm-w-full">
<div class="overflow-x-auto rounded-lg"> <div class="overflow-x-auto rounded-lg">
<div class="align-middle inline-block min-w-full"> <div class="align-middle inline-block min-w-full">
<div class="shadow overflow-hidden sm:rounded-lg"> <div class="shadow overflow-hidden sm:rounded-lg">