popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix searchreplacemet UI on small screens

Browse Source
This commit is contained in:
Dobromir Popov
2024-05-04 00:51:31 +03:00
parent 43a4f93bb3
commit 9249281785
1 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/publisher/SearchReplacement.js
View File

@ -85,43 +85,46 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, subscribedPublishers, a
return (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="absolute inset-0 bg-black opacity-50" onClick={onClose}></div>
<div className="bg-white p-6 rounded-lg shadow-lg z-10">
<div className="bg-white p-6 rounded-lg shadow-lg z-10 max-h-screen overflow-y-auto">
<h2 className="text-lg font-semibold mb-4">Можете да изпратите заявка за заместник до следните групи:</h2>
<div className="mb-4">
<label className="block mb-2">
<div className="flex items-center mb-2">
<input
type="checkbox"
className="mr-2 leading-tight"
checked={selectedGroups.includes('subscribedPublishers')}
onChange={() => handleToggleGroup('subscribedPublishers')}
/>
<span className="text-sm font-medium">Абонирани:</span>
</div>
<div className="flex flex-wrap">
{subscribedPublishers.map(pub => (
<span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
))}
</div>
</label>
</div>
<div className="mb-4">
<label className="block mb-2">
<div className="flex items-center mb-2">
<input
type="checkbox"
className="mr-2 leading-tight"
checked={selectedGroups.includes('availablePublishers')}
onChange={() => handleToggleGroup('availablePublishers')}
/>
<span className="text-sm font-medium">На разположение :</span>
</div>
<div className="flex flex-wrap">
{availablePublishers.map(pub => (
<span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
))}
</div>
</label>
<div className="space-y-1">
<div className="flex items-center mb-2">
<input id="subscribedPublishersCheckbox"
type="checkbox"
className="mr-2 leading-tight"
checked={selectedGroups.includes('subscribedPublishers')}
onChange={() => handleToggleGroup('subscribedPublishers')}
/>
<label htmlFor="subscribedPublishersCheckbox" className="text-sm font-medium">Абонирани:</label>
</div>
<div className="overflow-y-auto max-h-64">
<label className="block mb-2">
<div className="flex flex-wrap">
{subscribedPublishers.map(pub => (
<span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
))}
</div>
</label>
</div>
<div className="flex items-center mb-2">
<input id="availablePublishersCheckbox"
type="checkbox"
className="mr-2 leading-tight"
checked={selectedGroups.includes('availablePublishers')}
onChange={() => handleToggleGroup('availablePublishers')}
/>
<label htmlFor="availablePublishersCheckbox" className="text-sm font-medium">На разположение :</label>
</div>
<div className="overflow-y-auto max-h-64">
<label className="block mb-2">
<div className="flex flex-wrap">
{availablePublishers.map(pub => (
<span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
))}
</div>
</label>
</div>
</div>
<div className="text-right">
<button