UI style fixes

This commit is contained in:
Dobromir Popov
2024-04-24 13:53:50 +03:00
parent 822b22b995
commit 84bf0d001e
5 changed files with 63 additions and 45 deletions

View File

@ -57,8 +57,8 @@ export default function MySchedulePage({ assignments }) {
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
<div className="container mx-auto p-4">
<h1 className="text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
<div className="container ">
<h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
<div className="space-y-4">
{assignments && assignments.map((assignment) => (
<div key={assignment.dateStr + assignments.indexOf(assignment)} className="bg-white shadow overflow-hidden rounded-lg">
@ -67,18 +67,18 @@ export default function MySchedulePage({ assignments }) {
</div>
<div className="border-t border-gray-200">
<dl>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
<dt className="text-sm font-medium text-gray-500">Час</dt>
<dd className="mt-1 text text-gray-900 sm:mt-0 sm:col-span-2">
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
<dt className="text-sm font-medium text-gray-500">Смяна</dt>
<dd className="mt-1 text text-gray-900 sm:mt-0 sm:col-span-2">
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{assignment.shift.assignments.map((a, index) => {
return (
<span key={index} className="inline-flex items-center mr-1 px-2 py-0.5 border border-gray-300 rounded-full text-sm font-medium bg-gray-100">
<span key={index} className="inline-flex items-center mr-1 px-2 py-0.5 my-0.5 border border-gray-300 rounded-full text-sm font-medium bg-gray-100">
{a.publisher.firstName} {a.publisher.lastName}
{a.isWithTransport && <LocalShippingIcon style={{ marginLeft: '4px' }} />}
</span>
@ -87,7 +87,7 @@ export default function MySchedulePage({ assignments }) {
)}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
<dt className="text-sm font-medium text-gray-500">Действия</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<button