fix(frontend): changed request block for slideover on mobile UI (#387)

pull/380/head
Brandon Cohen 4 years ago committed by GitHub
parent 51f99a2e7b
commit 549567a7e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -43,11 +43,12 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
return ( return (
<div className="block"> <div className="block">
<div className="px-4 py-4 sm:px-6 "> <div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="mr-6 flex items-center text-sm leading-5 text-gray-300"> <div className="mr-6 flex-col items-center text-sm leading-5 text-gray-300 flex-1 min-w-0">
<div className="flex flex-nowrap mb-1 white">
<svg <svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300" className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -58,11 +59,14 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
clipRule="evenodd" clipRule="evenodd"
/> />
</svg> </svg>
<span>{request.requestedBy.username}</span> <span className="truncate w-40 md:w-auto">
{request.requestedBy.username}
</span>
</div>
{request.modifiedBy && ( {request.modifiedBy && (
<> <div className="flex flex-nowrap">
<svg <svg
className="flex-shrink-0 ml-2 mr-1.5 h-5 w-5 text-gray-300" className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -74,8 +78,10 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
clipRule="evenodd" clipRule="evenodd"
/> />
</svg> </svg>
<span>{request.modifiedBy?.username}</span> <span className="truncate w-40 md:w-auto">
</> {request.modifiedBy?.username}
</span>
</div>
)} )}
</div> </div>
<div className="ml-2 flex-shrink-0 flex"> <div className="ml-2 flex-shrink-0 flex">
@ -189,14 +195,19 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
</div> </div>
</div> </div>
{(request.seasons ?? []).length > 0 && ( {(request.seasons ?? []).length > 0 && (
<div className="mt-2 text-sm flex items-center"> <div className="mt-2 text-sm flex flex-col">
<span className="mr-2">{intl.formatMessage(messages.seasons)}</span> <div className="mb-2">{intl.formatMessage(messages.seasons)}</div>
<div>
{request.seasons.map((season) => ( {request.seasons.map((season) => (
<span key={`season-${season.id}`} className="mr-2"> <span
key={`season-${season.id}`}
className="mr-2 mb-1 inline-block"
>
<Badge>{season.seasonNumber}</Badge> <Badge>{season.seasonNumber}</Badge>
</span> </span>
))} ))}
</div> </div>
</div>
)} )}
</div> </div>
</div> </div>

Loading…
Cancel
Save